HTML 5 Interactive Map Using SVG Path and Polygon

Update #1 (02/25/2013)

Lately, I discovered that the sample code HTML5 - Interactive Map using SVG Path/Data was no longer working correctly in Firefox 19.0. The mouseover event was totally off. Initially, I thought simply updating the KineticJS library will solve the issue but that was not the case. The reason was that some of the properties/methods were being removed and replaced in kinetic-v4.3.3. For instance, Layer.draw() is now Layer.drawScene(),setAlpha() is being replaced with setOpacity(), color name is no longer valid and we should use HTML color code, and etc. In kinetic-v3.9.7, we can set the text background color through the Kinetic. Text constructor. But in the latest KineticJS library, we have to group the Rectangle and Text object to create the text with the background color. I have updated the source code to use the latest library and everyone is welcome to download it.

Introduction

Recently I was revisiting the article Silverlight - Creating Image Map with Hotspots that I wrote a couple of years ago using Silverlight and Expression Blend 3.0. I decided to redo it using HTML5. This brief tutorial demonstrates how to implement the interactive map using HTML5, KineticJS, and jQuery.

Getting Started

Shown in figure 1 are the files in the sample project. The images folder contains all the flag images and InteractiveMapData.js file contains all the map information. InteractiveMapPath.htm and InteractiveMapPoint.htm include a sample interactive map using the SVG path and point respectively. KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling high-performance path detection and pixel detection for desktop and mobile applications.

How to create an interactive image?

You can use Expression Blend to create the SVG path; please refer to the article Silverlight - Creating Image Map with Hotspots for more information. In the InteractiveMapPath.htm example, I reused the path drawings from the previous tutorial. If you look at it closely the fill and stroke are a little bit off compared to the other example. I'm very positive this wouldn't happen if I redraw the path again. There are several free tools out there you can use to draw the path data but the one I found the most productive one is from the aviary. Here is a brief tutorial on how to use it to generate and utilize the path data:

Click on Start a new Phoenix link creation under Launch Phoenix image.
A new window will open, click on the Load an image file link.
You can browse for the image on your PC or provide an absolute link to the picture and hit the upload button.
Right-click the newly created layer and select "Push layer to raven":

It will bring up another window with a pen tool similar to figure 3:
Select the pen tool (highlighted in yellow) and start to draw the path on the image.
When you are done drawing the path on the image, click on File, Export, Export to SVG, OK, save the file.
You can open the .svg file using Notepad or other HTML editor to view and copy the path data.

Another option to create an interactive map/image is to use an SVG polygon. My favorite is the Online Image Map Editor because this one has an option to zoom in and it is very helpful when drawing a polygon on a small area.

How to add events to the image path?

We will use a KineticJS JavaScript library to hook up the event listeners to the shapes on the images. You can find many good examples of how to utilize the library from the HTML5 Canvas Tutorials. I will briefly go through the implementation. Both implementations in the attached example are about the same. The main difference is that one uses Kinetic.Polygon() and the other uses the Kinetic.Path() constructor.

Listing 1

var path = new Kinetic.Path({
data: c,
fill: '#fff',
stroke: '#555',
strokeWidth: .5
}); var shape = new Kinetic.Polygon({
points: points,
fill: '#fff',
stroke: '#555',
strokeWidth: .5
});

The div elements inside the body tag are used to hold the image map and the menu. Initially, I was planning to use the HTML5 context menu but decided to drop it because the menu element wasn't supported by many browsers. I ended up using the jQuery to create the menu when the mouse is clicked.

Listing 2

<div id="container">
</div>
<div id="contextMenu" style="display: none">
<div id="contextMenuH">
</div>
<div id="contextMenuB">
</div>
</div>

Shown in listing 3 are the mouse events associated with each shape. The JavaScript is very straight forward. Here is a brief explanation of the events. The color will change from white to green when the mouse hovers over the shape. You can change it to your favorite color. On mouse out of the shape, set the color back to white and hide the tooltip. The tooltip with the country name will appear when moving the mouse along the shape. There is also logic to hide the menu when moving the mouse from one shape to another shape. And last but not least the mouse click event. We are using jQuery to position and generate the menu. The menu is composed of the country name, flag image and several links related to the selected country.

Listing 3

*///mouseover the country
shape.on("mouseover", function () {
this.setFill('#008000');
this.setOpacity(0.5);
shapesLayer.drawScene();
});
//mouseout the country
shape.on("mouseout", function () {
this.setFill('#fff');
shapesLayer.drawScene();
tooltip.hide();
tooltipLayer.drawScene();
});
//mousemove around the country path
shape.on("mousemove", function () {
var mousePos = stage.getMousePosition();
var x = mousePos.x + 5;
var y = mousePos.y + 10;
drawTooltip(tooltip, x, y, k);
//keep track of previous key
if (previousK !== k) {
previousK = k;
previousSelected = this;
//hide the menu if different country path is selected
$("[id$='contextMenu']").css({
display: 'none'
});
}
});
//onclick the country path
shape.on("mousedown", function (e) {
$("[id$='contextMenu']").css({
display: 'inline',
position: 'absolute',
top: e.pageY,
left: e.pageX + 5,
opacity: .8
});
//menu header
$("[id$='contextMenuH']").html('');
//flag
$('<img />').attr('src', area.flag).appendTo($("[id$='contextMenuH']"));
$('<span />').html(k).appendTo($("[id$='contextMenuH']"));
//build links
$("[id$='contextMenuB']").html(''); //clear
//countryReports
$('<a target="_blank"></a>')
.attr('href', 'http://www.countryreports.org/country/%27%20+%20k%20+%20%27.htm%27 + k + '.htm')
.html('Country Reports').appendTo($("[id$='contextMenuB']"));
//Economy
$('<br/><a target="_blank"></a>')
.attr('href', 'http://www.economicexpert.com/a/' + k + '.htm').html('Economy')
.appendTo($("[id$='contextMenuB']"));
//The world Factbook
$('<br/><a target="_blank"></a>')
.attr('href', 'https://www.cia.gov/library/publications/the-world-factbook/geos/%27%20+%20area.abbreviation%20+%20%27.html%27 + area.abbreviation + '.html')
.html('Factbook').appendTo($("[id$='contextMenuB']"));
//Global Statistics
$('<br/><a target="_blank"></a>')
.attr('href', 'http://www.geohive.com/cntry/%27%20+%20k%20+%20%27.aspx%27 + k + '.aspx')
.html('Global Statistics').appendTo($("[id$='contextMenuB']"));
//Wiki
$('<br/><a target="_blank"></a>')
.attr('href', 'http://en.wikipedia.org/wiki/' + k).html('Wiki')
.appendTo($("[id$='contextMenuB']"));
});

Point of Interest

Polygon or Path? I think they both behave the same and didn't make much difference. I guess that depends on the tools that we have.

Conclusion

I hope someone will find this information useful and make your programming job easier. If you find any bugs or disagree with the contents or want to help improve this article, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and explore it in order to grasp the full concept of it because I might have missed some important information in this article. Please send me an email if you want to help improve this article.

Tested on: Firefox 12.0, Apple Safari 4.0.4, Google Chrome 19.0

Watch this script in action