London postcodes map – animated version for websites

responsive SVG, Javascript, CSS and HTML files · licensed for commercial use


This animated London postcodes map is perfect for interactive, immersive websites.

Use the animated web version when you want an efficient and attractive way to give lots of caption information in a small space across different types of screens and devices.

Animated London postcodes web map details

All of London’s E, EC, W, WC, N, SW and SE postcode districts on the animated map are interactive so that hovering over or tapping the postcodes brings up a tooltip with caption information. The captions can be easily edited by anyone with a basic knowledge of HTML and be changed to give, for example, delivery information and other data about a postcode area.

Each postcode area is perfectly mapped to the hover/touch animation, and interlocks with its neighbouring postcodes like a jigsaw. The animated map is responsive and will expand and contract to match the size of screen whilst all the labels and captions remain sharply in focus.

The animated London postcodes map is supplied as a download with ready-to-use linked files: HTML (where caption content can be edited), CSS (graphic styles), SVG (the map itself in code form as a scalable vector graphic with special functions) and Javascript (for the tooltip function).

Content for the captions can easily be edited in the HTML file:

html-edit

tooltip-edited

The map colours, fonts and tooltip style can be edited by anyone with a basic understanding of CSS style sheets. The files are fully marked up with styling hints.

For example, you can edit the map’s default colour by changing the hexadecimal colour code in the CSS file:

CSS colour
Single colour

Individual postcode areas can be given individual colours if wanted:
individual colours

Live demo

This is a live demo of a small part of the animated London postcodes map. Hover / tap the postcodes to activate the captions.

This is a static (non-animated) preview of the full map:Animated London postcodes map preview

The map can be embedded within any web page:
iframedemo