RSS

Creating a world map with RaphaelJS (svg)

04 Apr

SVG and RaphaelJs allow to create really nice experience. Some experimentation on the topic – world map.


svg 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.

Advertisements
 
6 Comments

Posted by on April 4, 2011 in RaphaelJS

 

Tags: , ,

6 responses to “Creating a world map with RaphaelJS (svg)

  1. 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.

       
  2. 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.

       
  3. 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! 🙂

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: