Map of Europe with HTML in a Lightbox
This is a sample map of Europe that opens a lightbox when you click on one of the markers:
This is how the administration panel looks like:
This map example uses Featherlight which is a very lightweight jQuery lightbox plugin. You won’t need to install any additional WordPress plugins to use this map and the lightbox on your site. The lightbox should work without any problems.
Continue readingUse Markers and Colored Regions on one Map
The following example illustrates how you can mix two display modes:
Normally, the plugin won’t allow to use markers and colored regions on one map. This is mainly due to the Google Geochart API. Since there is no way to achieve this by natively using the API, we will have to create two seperate maps. We use CSS to position the maps over each other. At the end you will have a map that looks like the one from above.
If you want to use this technique on your site, then you can do the following:
- Import both maps from below. Simply click on the download button and follow the instructions there.
- Once this is done, insert the maps on site (pages, posts, etc.) by using the following HTML. Please note that the order of the shortcodes is important. The first shortcode is the regions map and the second the markers map. Please make sure to insert the correct ids for the maps. :
<div id="mixed_display_modes"> <div class="region_map"> [interactive_map id="102"] </div> <div class="marker_map"> [interactive_map id="103"] </div> </div>
- It is also necessary to make sure that the following styles are applied. If you import the maps from below, you can skip this step since you won’t need to add the following CSS. They are already included in the map template of the markers map. If you want to use this technique with already existing maps, then make sure that you use the following CSS (together with the HTML from before):
#mixed_display_modes { position: relative; } #mixed_display_modes .marker_map { position: absolute; width: 100%; pointer-events: none; top: 0; } #mixed_display_modes .marker_map text, #mixed_display_modes .marker_map circle { pointer-events:visible; } #mixed_display_modes .marker_map path { display: none; } #mixed_display_modes .marker_map rect { fill: transparent; }
You can also use a different region after the import. You only have to make sure that you use the same regions on both maps.
The map configuration of both maps can be found here: