SVG with RaphaelJS - Creating Interactive Maps Part 2

Welcome to a new month.

Its been a while since I last posted anything on this blog. This month, I intend to bring this series to a close. We ended with a pathfile for the interactive map for Liberia.

This month, we bring this to an end. Before we start, you can view all our files from our repository. In looking at our repository, we have obtained our path.js file.

Our task now is to parse the path.js file and display our interactive map. The code to do this is shown below:

	$(function(){ var r = Raphael('map', 500, 500),
	attributes = {
	fill: '#fff',
	stroke: '#3899E6',
	'stroke-width': 1,
	'stroke-linejoin': 'round'
	},
	arr = new Array();
	for (var region in paths) {
	var obj = r.path(paths[region].path);
	obj.attr(attributes);
	arr[obj.id] = region;
	obj
	.hover(function(){
	this.animate({
	fill: '#1669AD'
	}, 300);
	}, function(){
	this.animate({
	fill: '#FFFFFF'
	}, 300);
	});
	$(obj.node).qtip({
	content: { text: 'Name: ' + paths[arr[obj.id]].name },
	style: {
	background: '#000000',
	color: '#ffffff',
	border: { width: 6, radius: 3, color: '#ff0000' }
	},
	position: {
	my: 'left center',
	at: 'bottom center',
	target: 'mouse',
	adjust: { x: 20, y: 25 }
	}
	});
	}
	r.setViewBox(0, 0, 1000, 1000, true);
	});

In total, we have 44 lines of code. I will walk you through it. On line 1 we instantiate jQuery. jQuery is an excellent way to get access to the DOM elements of a webpage.

Next we declare our paper as a variable r. The code snippet to do this is shown below:

	var r = Raphael('map', 500, 500),

	attributes = { fill: '#fff',
	stroke: '#3899E6',
	'stroke-width': 1,
	'stroke-linejoin': 'round'
	},
	arr = new Array();

Next we loop through the paths array. The for loop iterates through each and every object that makes up the interactive map.

	obj .hover(function(){
	this.animate({
	fill: '#1669AD'
	}, 300);
	}, function(){
	this.animate({
	fill: '#FFFFFF'
	}, 300);
	});

The above block of code makes the particular object in the map change colour when the mouse is placed over it.

	$(obj.node).qtip({ content: { text: 'Name: ' + paths[arr[obj.id]].name },
	style: {
	background: '#000000',
	color: '#ffffff',
	border: { width: 6, radius: 3, color: '#ff0000' }
	},
	position: {
	my: 'left center',
	at: 'bottom center',
	target: 'mouse',
	adjust: { x: 20, y: 25 }
	}
	});
	}

The above code uses the Qtip library to place a tooltip on the object on mouse over.

Finally, we resize the map on the paper by reducting its size. The code to do this is shown below:

r.setViewBox(0, 0, 1000, 1000, true);

At the end, we have an interactive map of Liberia. You can view it here. So we have reached the end.