Find all products for your country

How to display a lightbox on click on map

A user can display necessary information related to map regions in the form of a lightbox. Lightbox is a way of displaying images, videos and other content by filling the screen, and dimming out the rest of the web page. By using HTML and Javascript the user can configure the map to be able to display a lightbox when regions of the map are clicked.

If your site uses WordPress, no coding is required!

If you need a simple integration of interactive maps with a lightbox plugin for WordPress without writing a code, then you can study the following article about integrating our maps with the Popup Builder plugin

Below are instructions for those who use the non-WordPress version of interactive maps

For this purpose we will use Colorbox (click to download), 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 region).

The user also should make a call to the $.colorbox method for regions 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 region data that can be accessed using regions' 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 regions. Adding and specifying the has_popup tells to the plugin API data if the region has a popup or not. The color_map and color_map_over properties correspond to region colors for both active and inactive states. Assigning these properties allows the user to highlight the regions with data. The user 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.

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 region 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 region id. For example, for the region 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.


Privacy policy   |   Terms of Use

Home  |  Products  |  Showcase Gallery  |  Custom Design Service  |  Free Maps  |  Support  |  Contact
© 2006-2018 All Rights Reserved.
Fla-shop.com - Interactive Maps for Websites
Follow us Follow us on Twitter Follow us on Facebook