How to connect an interactive map to fancyBox pop-ups

What is Fla-shop.com?

Fla-shop.com provides clickable, responsive, and mobile-friendly maps of the US and the rest of the world. They are completely customizable, providing the user with settings, a visual editor, and easy installation. They provide both HTML5 and WordPress options, meaning they can be easily integrated with your existing site.

What is fancyBox?

fancyBox is a tool that offers an elegant way to add zooming functionality for images, HTML content, and multi-media on your web pages. It is built on top of the popular JavaScript framework jQuery It is easy to implement and provides excellent customization options.

We want to combine these two powerful tools to build a beautiful interactive map, such as this example:

Setting up the map data

In the settings.js file you will find the settings for our Fla-shop.com map. This contains the data for our map of the United states. You can find the individual states defined in the map_data object:

The most important property for this tutorial is the fancybox_data property. This is the pop-up web page that will open when you click on the state. For example, when I click on the state of Alabama, a popup will display showing the link provided, in this case, the Wikipedia page for Alabama.

Imagine other use cases for this functionality, like If you had a food blog, and for each US state you click, you get directed to the best restaurant in that state. The possibilities are endless!

Each state object also contains obvious properties such as the name and shortname to be shown. The color of the item and what color is shown when you hover over a state are also defined here.

Adding the map to your HTML page

You can add the clickable map, with fancyBox functionality, to your webpage like so:

<!-- start Fla-shop.com HTML5 Map -->
	<div id='map-container' style="border:1px solid #000000;"></div>
	<link href="map.css" rel="stylesheet">
	<script src="raphael.min.js"></script>
	<script src="settings.js"></script>
	<script src="paths.js"></script>    
	<script src="map.js"></script>
	<script>
	var map = new FlaMap(map_cfg);
	map.drawOnDomReady('map-container');
	map.on('click', function(ev, sid, map) {
		var url = map_cfg.map_data[sid]['fancybox_data'];
	  	if (url) {
			$.fancybox.open([
				{
					type: 'iframe',
					src: url,
					iframe: {
						preload: true, css: { width: '80%' }
					}
				}
			]);
		}
	});
	</script>
<!-- end HTML5 Map -->
	

You can see how the map gets created using the data we configured for map_cfg in our settings.js file:

var map = new FlaMap(map_cfg);
    

The page will render the map when the page DOM has been loaded:

map.drawOnDomReady('map-container');
	

We have handled the creation and the rendering of our map, but how do we get the fancyBox pop-up to appear when a state is clicked?

We can add an event handler to the map like so:

map.on('click', function(ev, sid, map) {...}
	

You can see that when a state of the map is clicked, the state id is passed in, get’s matched with the corresponding state in our map_config object, and the fancybox_data URL we set up gets opened!

From UI Developer to UI Cartographer

There you have it! An interactive map by Fla-shop.com with pop-up functionality provided through fancyBox. Have fun building your own maps!