Need some help?

I'm usually available for small jobs or problem solving with jQuery or css, at reasonable rates. Just get in touch.

Buy me a drink

If you've found this useful, particularly for commercial projects, you might consider making a small donation.

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.

Check to highlight:

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:

Postcode map of the whole UK

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.