Interactive Javascript map of Canada with Raphaël

Interactive Javascript map of Canada with Raphaël

  • Programming
  • Javascript
  • Raphaël.js

It seems like there is a plethora of examples of interactive maps of the United States, but the internet is, rather unsurprisingly, lacking in the area of maps of our great white neighbors to the north. So here is an example of how I created an interactive map of Canada using a handy little Javascript library called Raphaël.

First, you actually need a map of Canada in SVG format. Wikipedia is a great source for free media. I found a very detailed SVG map of Canada here.

Next, you need to convert the SVG file into a javascript object that can be added to the Raphaël paper. There are a few decent conversion tools for this. The one that worked for me is Ready Set Raphaël Simply, upload the file, click “Check It”, and copy the resulting Javascript code. Your results may very depending on how cleanly the SVG was defined. In the case of the wikipedia file, the results are fantastic, but having had to use a specific designer's file for my work, I had to spend quite a bit of time cleaning up the resulting code. Just be patient and remember that you may have to remove a significant number of paths in an effort to simplify the script. As you are going through it, for your sanity, I recommend that you assign all of the paths to variables with meaningful names.

Now, you have completed the most difficult part. Next, include the Raphaël library, create place to draw the map, and draw the map.

See the full demo with source code.