Rosalyn Ellis, the Digital Publishing Director of Thameside Media, has been excited by maps since she was a teenager back in the 80s. Her degree show at art school consisted of a mechanical, cog-driven map depicting a journey from Sharpness to the Severn Bridge and back, accompanied by the dissertation Mapland. She wrote articles about maps for Macmillan’s epic Dictionary of Art in the 90s, and in 2010 launched our popular Maproom shop, selling editable vector base maps of the British Isles.
Over the past 18 months Rosalyn and freelance developer Tom Blaker have been experimenting with ways to animate web maps, making for a rich, interactive experience in digital mapping. The first handful of interactive maps were built for Maproom clients using a javascript library called Raphaël. Now Rosalyn and Tom have developed a new way of animating maps, using SVG code, CSS, jQuery and hand-built javascript. The creation of these animated maps is complex, but in terms of captions and colours they can be edited by anyone with a basic understanding of HTML and CSS, which makes them perfect for Maproom.
We have launched what we believe may be the first editable animated vector base map ever offered for sale – an interactive, animated map of London postcodes. Here’s a small live demo from it:
Hovering or tapping the postcodes brings up caption information, which is a very efficient way of giving a lot of information in a small amount of available space on a website. The hover action is precisely aligned to the shapes of the postcode areas – alignment of multicoloured polygons is one of the main technical challenges with any vector maps, and doubly so with animated maps. And the map remains sharp at different zoom levels on different devices – something that’s not possible using standard JPEGs and PNG image formats.
Postcode maps are among Maproom’s most popular products, largely because they are vital for businesses operating sales regions by postcode. Our interactive maps can be used for showing data such as courier delivery charges that often vary by postcode.
Visit the Maproom shop for more information about the animated London postcodes map. An animated version of the full UK postcodes map will also soon be ready, followed by an animated, interactive British counties map. Watch this space!
Leave a Reply