How to show a lightbox window by clicking the map
Clickable map is a good way to display different information, for example - contact details of regional representatives. Integrating a map with lightbox plugin is a great solution for this.
A lightbox popup is a way of displaying images, videos, and other content by filling the screen and darkening the rest of the web page. Using HTML and JavaScript, you can customize the map so that it displays a lightbox when you click states.
Try clicking on the red states!
Integrating a map with the Colorbox lightbox script
For this purpose we will use Colorbox, a popular lightbox plugin. The plugin require the jQuery library to work correctly and its source must be included before the source of the plugin. Colorbox has the additional requirement that its stylesheet should be included in the <head> of the document before including the source of the plugin. The example is provided below:
<link rel = "stylesheet" href = "path/to/css/colorbox.css">
<script src = "path/to/jquery/jquery.min.js"></script>
<script src = "path/to/plugin/jquery.colorbox-min.js"></script>The content for the lightbox should be specified in distinct html files (e.g. one file per state).
You must also call the $.colorbox method for states needed by modifying the map object and setting a callback handler for the click event, as shown in the provided example:
$(function() {
$.extend(true, map.mapConfig.map_data,
{
st6: {
link: "javascript: void(0)",
has_popup: 1,
color_map: "#ff5959",
color_map_over: "#f00001"
},
st33: {
link: "javascript: void(0)",
has_popup: 1,
color_map: "#ff5959",
color_map_over: "#f00001"
}
}
);
map.on('click', function(ev, sid, map){
if (map.mapConfig.map_data[sid].has_popup){
var href = ['data', 'info', sid, 'info.html'].join('/');
$.colorbox({href: href});
}
});
});
The jQuery $.extend() function we used here merges the contents of two or more objects together into the first object.
The map variable stores the FlaMap class instance and provides access to the map_data object, which can be reached via map.mapConfig.mad_data.
The map_data object contains basic state data that can be accessed using states' IDs (e.g. "st1", "st2" etc.).
Specifying the link property as in the example makes the mouse cursor change to a pointer when mousing over the related states.
Adding and specifying the has_popup tells to the plugin API data if the state has a popup or not.
The color_map and color_map_over properties correspond to state colors for both active and inactive states. Assigning these properties allows you to highlight states with data.
You can pass additional parameters to the colorbox() function to adjust the appearance of the lightbox. For more information about the plugin usage see the official page.
Click handling
The callback that handles the click event is set by using the map.on() method. This callback checks if there is a property has_popup defined for the state clicked. It also checks if the value is equivalent to true or false and if true, the $.colorbox() method is called.
The object {href: href} passed to this method provides a path to the file containing the content to be shown in lightbox. Statement ['data', 'info', sid, 'info.html'].join('/') generates the path depending on the state ID. For example, for the state has ID st6 it would return the following: "data/info/st6/info.html".
In this example, we use the demo version of the HTML5 US map.