An interactive map is a common request from non-profit organisations looking to build an engaging website. 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 making 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 building 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-driven 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 make 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
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.
Mapbox
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
This tool is designed for restyling 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.
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.
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?
- What is the budget for this graphic (both money and time)?
- What do I want my users to 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?
- 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)?
Download the step-by-step guide
We’ve created a step-by-step guide on how to add a Google Map to your website. If you find this useful please consider sharing this page!
