Creating an interactive SVG map

RaphaelJs is an awesome library for vectorial drawing on a website, specially suited for interactive graphics. In a recent project I created a RaphaelJs interactive map for spanish provinces which you can test here:
http://mapasvgtest.theagilemonkeys.com
Or fork here:
https://github.com/javiertoledo/spain-map

The process of creating such a map from an SVG file requires some processing and tweaking over the SVG source:

• Extracting SVG path strings and creating a JSON object for RaphaelJs

I wrote a simple ruby script to parse the SVG file, extract points and build final paths from them. As my source file had mixed paths, polilynes and polygons, I had to normalize them as paths to simplify later steps. You can find the script here:
https://github.com/javiertoledo/spain-map/blob/master/utils/jsonize.rb

I discovered later that there are online services designed to do this job like http://readysetraphael.com/

• Tweaking and joining some paths.

There are provinces in Spain composed on more than one territory, for example those composed of islands. In order to unify events detection for province I concatenated all the province's territories on a single path string per province. You can do this because first operation on each string is a "cursor movement", so Raphael will then render exactly the same but with a single Path object.

This is how looks like my paths file after extracting and tweaking, I also added some convenience fields to each path, a number and a name:
https://github.com/javiertoledo/spain-map/blob/master/src/spain-map.coffee

• Loading and rendering paths

Once reached this point things become more straightforward, just need to initialize a Raphael Paper object and iterate over paths drawing and adding some event listeners to them.

• Optionally you can fit the map in the container div adding the paths to a Raphaël set and then centering RaphaelJs view on its bounding box with Paper.setViewBox(...). (Then I realized this wasn't the best idea, see the update below)

Here is the full loader which renders and centers the map:
https://github.com/javiertoledo/spain-map/blob/master/src/main.coffee

Update: Some people noticed serious performance issues with the map on Firefox and IE and after some investigation I discovered the bottleneck were at calculations of the map bounding box. As this data is always the same, I've replaced this calculation for precalculated values obtaining significant improvements in performance.