Interactive online maps

Introduction

Interactive online maps, also called web maps, have capabilities for deep zooming and to contain far more information than you could ever hope to fit onto a printed map – plus search, route planning, pop-up captions and many other functions useful for business planning and intelligence. For example, you can feed data from a spreadsheet into an online map and make it automatically update colours depending on the data.

DEMO 1: Multiple locations on a map with deep zoom capabilities

This is a beautiful, minimalist style map base with custom icons, which Maproom has built for an organisation representing churches dedicated to St Laurence.

It behaves in a similar way to Google Maps. Use either mouse scroll, pinch and zoom or click to zoom deeper and deeper into the map, and see hundreds of churches.

Tap on the icons for pop-up boxes with pictures of the churches.

Open map in full screen

Demo 2: Shaded map zones superimposed over a road network

A corporate client needed a road map showing the London Congestion Charge and Ultra Low Emission Zone to plan their delivery routes. In this demo, we have created layers over London roads showing this and the broader road zones. Try using your mouse scroll or touch rather than the buttons to zoom quickly and deeply into this map to see which roads fall within the zones.

We can create maps like this tailored for business intelligence. You might also want a map like this on your website to show pricing zones to your customers. Your users might really appreciate the predictive Search function that we can put on a map like this.

This two maps above are built with tilesets of vector image map data. Notice that the labels are sharp at all zoom levels – essential for reading street names and other details online.

DEMO 3: Map of postcode districts with pop-up info boxes showing coverage

Many businesses use postcode districts when working out their coverage. In some cases, the map is for internal company use, for calculating sales rep zones or where customers live or where target customers are clustered by postcode. In other cases it can help to have a postcode map published on the company website to display postcode information for the public. The map below was built for a driving school which is in the process of expanding its coverage across southeast England. See our Online Postcode Maps package.

DEMO 4: Selecting areas of a map

The counties map is built using interactive SVG files with a function for selecting areas as well as showing pop-ups. Notice that the labels are sharp at all zoom levels, but they don’t resize themselves, and there are no extra layers of detail that show up with zooming. As this kind of interactivity has separate hover and click functions, it is best viewed on a desktop computer or laptop rather than touch device because there is no hover function on a touch device. Try using your mouse wheel or slide to zoom in and out rather than the + – buttons.

You can also view it in a full window here.

An interactive SVG map is one of the most laborious types of interactive map to create and therefore a typical build will cost several hundred pounds. However, SVG is a format preferred by some of our technical clients. SVG is also a good option on high-traffic websites to avoid the heavy usage fees charged by third-party mapping providers like Mapbox and Google Maps.

DEMO 5: 3d map of urban area

Try right-clicking whilst dragging to change the bearing of this 3d map of Bristol. This can be a good solution for deep-zoom exploratory urban maps. We can add labels to buildings of significance to you, route lines and other bespoke features. Use a map like this for either public display or business intelligence and planning.

View map in full window

DEMO 6: Highlight and link parts of a web map to other web pages

Regions on an interactive web map can be highlighted and linked to other web pages. On this map, hover highlights an area, whilst click or tap opens other web pages – in this case Wikipedia pages about the postcode areas.

Highlight linking to other pages is a good solution if you have a few areas with lots of information. But if you have scores of locations with only a few lines of information for each location, then pop-up boxes may be better on hover, tap or click.

Maproom’s online postcode maps

The main drawback with online maps is that creating them can be technically challenging, requiring specialist GIS software and coding skills. Even experienced designers, developers and cartographers can struggle to set up an online map with anything more complex than a few marker pins overlaying a Google map.

However, Maproom has created systems where non-technical people can update an online map without needing any specialist software or skills.

If you’re interested in postcode maps, don’t miss our Online Postcode Maps package which gives access to detailed UK postcode maps and a unique in-browser editor that lets you customise postcode maps with your own colours and captions.