UK postcodes map – animated version for websites

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


Maproom’s animated web map of UK postcode areas is perfect 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.

UK postcodes tooltip preview
UK postcodes tooltip preview (not live)

All the 124 two-character postcode areas of the United Kingdom are shown with their letters and boundaries, with a tooltip appearing with extra information as you scroll around or tap on the screen.

You can edit the tooltip captions within a simple HTML file included in the package. So, for example, to add information about a postcode area, you would simply add a line in the text.

Format of files

The download includes a bundle of HTML, SVG, CSS and Javascript files, which can be uploaded via FTP directly onto your website.

Compatibility:

  • Responsive for desktop computers, tablets and mobile phones
  • Compatible with IE9+, Firefox, Chrome, Safari, iOS Safari, Android, Opera. A fallback is provided for older browsers that do not support SVG images

Live demo

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


Versions:

The animated UK postcodes map is supplied in two versions: a fully responsive version and a zoombox version.

UK postcodes map responsive preview
Preview of the responsive version (default blue; not live)

Responsive version (default blue)

Recommended for the broadest compatibility to fit across different screens and devices. You can use this version as a standalone web page or within the flow of other content, and it will resize itself according to the size of the container. The larger the container, the better, so that the postcode letters are large enough to be legible on a desktop computer. On touch devices, this map can be zoomed in and out without loss of resolution.

UK postcodes map with zoombox preview
Preview of the version with zoombox (default green; not live)

Zoombox version (default green)

Recommended if you don’t have much room for the map on your web page, when the smaller postcode areas are too small to be legible. On a desktop computer, the zoombox version will enable the user to zoom in and pan to see the smallest postcode areas. On touch devices, this version switches to the responsive touch zoom.

Integration:

Can be a stand-alone page or embedded within an existing page, either through HTML5 integration or an iframe (instructions included with download).

Skills required:

  • The map captions and colours can be edited by anyone with basic skills in HTML.
  • The map shapes and animation behaviour can be edited by a developer with skills in SVG and Javascript coding.