How To Get An Interactive Map On Your Website

6 February 2017
How to get an interactive map

We get asked about interactive maps and infographics a lot by our charity website clients. Things like animations or data driven graphics can be impressive, fun to play with and give a positive overall impression.

In this post we unpick what people mean when they talk about interactivity. We’ll explore the pros and cons of interactive maps and data driven graphics, when they are appropriate and how to get a great interactive map on your website for free.

What do we mean by ‘interactive’?

All websites are interactive by their nature. Users can navigate at will by clicking and scrolling to find information, download documents, fill in forms etc.

In the context of commissioning a website lots of people use the word interactive to mean something quite specific. They’re referring to a discrete feature such as a map, slideshow, chart, diagram or animation that can be manipulated without triggering a page load.

We will refer to these types of features as data driven graphics. Are data driven graphics necessary on your website to fulfil needs that basic interactive features can’t? Let’s explore the pros and cons to help you work out what you need.

The purpose of data driven graphics

The primary purpose of a data driven graphics is to make complex information understandable and easy to analyse. These types of visualisations are useful when there is a lot of complex data to present and your user needs to be able to analyse that data.

The difficulties of data-drive graphics

The ability to convey complex information, streamline content management and manipulate the data are all useful but they can come at a price.

Data driven graphics can be:

  • Expensive to create
  • Inflexible if your data model changes
  • Hard to edit yourself
  • Hard to optimise for mobile devices
  • Easy to break or make look bad if the wrong data is added
  • Hard to navigate as the user needs to take time to learn the interface

How to get an interactive map on your website

One of the most common requirements on charity websites looking to present data is the need to plot things on a map. It’s important to show the scope of your work, your field of influence and the success of your projects.

It is possible to create beautiful custom drawn maps with interactive features driven by a database but such features can be very expensive to produce so a better approach in many cases is to embed a map from an established mapping system that allows you to plot your own data as a layer on top.

Here are some great mapping tools for you to explore with our recommendations of how to use them.

Google’s My Maps

Google Maps splash screen

We recommend this to small charities for listing a number of locations that link to other pages. You can manage multiple maps from one simple interface and easily add pins for all the data you need then quickly embed it on your website. You can add descriptions and links to each location that will appear in a tooltip when the pin is clicked. You can even group pins into different categories and set different colours for the pins.

The best options is often the simplest. Give it a go and see how simple it is to do.

We have created a step by step support guide on how to do this so our clients can can embed a Google Map on their website.

Mapbox

Mapbox home page

An incredibly powerful tool for creating custom maps and visualising data. This is aimed more at developers so while it’s very powerful, we wouldn’t recommend using it for a simple map for your website.

Snazzy Maps

Snazzy maps splash screen

This tool is designed for re-styling the base Google map. It’s easy to get drawn into the details of how the map looks and forget about the actual data and is therefore more appropriate for people whose priority is aesthetics rather than simple data.

MapKit

This tool pitches itself as a simpler version of Google Maps. It’s fairly new so it’s still a bit rough round the edges but we definitely recommend you take a look.  With MapKit you can create maps, embed them on your website and even integrate it with Snazzy Maps (above) to give you a wide choice of map styles to choose from. The main downside is that there’s currently no interface for managing all of your existing maps together.

BatchGeo

We haven’t had a chance to play with this extensively but it looks great and comes highly recommended. This tool looks right for larger organisations who want to be able to import data to show on a map rather than manually adding locations. Their intro video is fun and informative.

Is there a place for a static illustrated map?

Yes there is. In many circumstances, a simple illustrated map does a better job of conveying the information that’s important because you can add text labels or icons that are always present without the user having to click around to explore what’s hidden. You’ll have a lot more control over what’s displayed and you can use your brand colours and fonts. Mobile optimisation is also much easier. Just remember that it will be harder for you to update so make sure you only do this with data that won’t often change.

Map of regions - Girl Generation

Questions to ask when scoping your needs

If you think that you need a data driven graphic or an interactive map on your website ask yourself these questions:

  • How does the feature fit with my overall objectives for the website?
  • What is the budget for this graphic (both money and time)?
  • What do I want my users to understand or learn from my map? Is it a general overview or a gateway to deeper content?
  • Does the map need to act as a navigational device?
  • Do my users need to analyse or interrogate this data? If so, what will make that easiest for them?
  • How often will the data need to be updated?
  • What do I want my users to do with this information (what’s the call to action)?

If you found this useful why not subscribe to our newsletter and get the latest tips and expertise straight to your inbox.

Subscribe

Subscribe to our newsletter to get the latest tips straight to your inbox.