Over the past few years there's been an increasing demand from our clients for interactive maps, whether it be for shopping centres, housing developments or just geographical maps.
Most recently, I was tasked with creating a masterplan (architectural, not the evil villain kind) for Little Kelham, a property development at Kelham Island in Sheffield built by Citu. They needed two versions of the masterplan: a map to highlight the residential properties they have available, and a map for their commercial properties. Each plot needed to have its own well defined shape and have a hover state & click events.
What am I making?
Raphaël makes drawing vector art easy and, more crucially, cross-browser compatible. It currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.The United Kingdom is made up of England, Scotland, Wales, Northern Ireland and a fairly exhaustive list of thousands of smaller islands. For the purpose of this tutorial we're just going to focus on England, and in particular its regions. We've split England up into nine regions: the North West, North East, Yorkshire & Humber, West Midlands, Midlands, East Anglia, Greater London, the South East and the West Country.
How will it look?
How do I make it?
*Tip: save your progress often!*
Prepare the SVG imageYou'll need an SVG image to start with. I used this United Kingdom - Region 3.svg file from Wikipedia.
Later, when we use Raphaël, it'll ask us for dimensions for our map. I'd recommend you create a new artboard in Adobe Illustrator at your preferred dimensions, then scale your vector objects to fit.
Use File -> Save As... to save your map as .svg, after which you'll be presented with the SVG Options dialog. Click on the 'SVG Code...' button, which will allow you to save your image out to SVG in XML format. In my example, I saved this file as 'map_england.svg'.
Convert the SVG into a Raphaël-friendly format
Your .svg file will be full of (and possibly , etc. if you have some perfectly shaped objects) tags, each with a 'd' attribute containing path data.
He found http://toki-woki.net/p/SVG2RaphaelJS/, which may be of use to you. Thanks @dalehay!
Managing lots of paths
If, like on the Little Kelham properties map you have a *lot* of objects, then it's really useful to be familiar with regular expressions as you can much more easily find & replace sections of code. Just be careful when using mass find & replace as debugging missing parts of code can be a bit of a nightmare when handling hundreds of objects!
Manipulating the paths