SVG and RaphaelJs allow to create really nice experience. Some experimentation on the topic – world map.
It’s really incredibly quick and easy to create. All you need is SVG paths to draw the countries. These can easily be found on Wikipedia (look for world map svg files) or paths and selections can be converted to SVG paths with various image editors (like Gimp). Also you can download the paths I used from jsfiddle.
Once you got the paths create a canvas to draw on with RaphaelJS:
var paper = Raphael('mapHolder'); // mapHolder is an ID of div element to be used as canvas
If you use paths from my example you need to include worldpaths.js file to your page and call getPaths function passing default settings for the paths:
var map = getPaths(paper, { fill: "#333", stroke: "#000", "stroke-width": .5, "stroke-linejoin": "round" });
Then loop through the paths array and “draw” SVG paths on canvas:
for (var countryCode in map) { (function (countryPath) { // give paths some opacity look nice countryPath.attr({opacity: 0.6}); // get random colour colour = Raphael.getColor(); // fill country path with colour when mouse goes over the country path countryPath[0].onmouseover = function() { countryPath.animate({fill: colour, stroke: colour }, 300); paper.safari(); }; // return to default grey colour countryPath[0].onmouseout = function() { countryPath.animate({fill: "#333", stroke: "#000"}, 300); paper.safari(); }; })(map[countryCode]); }
And vuala!
View live demo here.
ODDie
April 8, 2011 at 2:35 am
Hi
Nice tut. I played a bit with Raphaeljs, looks promising, but documentation seems a little awkward.
Did you managed to get links on paths to workd for example? You know, open various URLs by clicking on particular countries/regions on map.
Dasha
April 8, 2011 at 9:19 am
I think you can make it work with some javascript. If you look at my demo I show images for the country when you click on the path. I would expect you can do similar thing to open URLs.
alettieri
June 18, 2011 at 11:56 am
Hi Dasha, this is great! Thanks for sharing.
Where did you source the paths from?
Dasha Salo
June 18, 2011 at 9:27 pm
Just look for .svg images on Wiki – you will find lots. Then extract paths from those .svg’s and use with RaphaelJs. Might have to modify them a little bit though.
Benjamin Delespierre
June 20, 2011 at 4:55 pm
Hello Dasha. Many thanks for those explainations and for the complete Raphaël worldmap I was looking for for hours 🙂
Dasha Salo
June 20, 2011 at 5:16 pm
Glad you found it useful! 🙂