UK postcode map with SVG
A few weeks back I was trying to create a map to display sales for an online shop by postcode. I started off thinking about using an imagemap, but quickly progressed to experimenting with svg polygons – with the result you can see above. Hover over the areas to display the location, or click the checkboxes to highlight the marked areas. This is all done in html, no images.
It’s simple enough to link the map to some server side code plus a bit of javascript, allowing the production of dynamic statistical maps.
There’s a complication using jQuery (or javascript) to interact with svg polygons, particularly with assigning classes to the elements. I used this excellent plugin, and additionally to make IE9 behave a tweak is required to jQuery itself (detailed here).
Finally, of course, this will not work in IE8 and under.
Note that the map above shows Scotland and Northern England only. Doing the map took forever so…if you’d like a map of the whole UK you’re welcome, but a small donation will be required. Please get in touch if you’re interested. Here’s an image anyway:
