Featured image

How to Create a Travel Time Data Visualisation Map with Leaflet

by Louisa Bainbridge on Sep 28, 2016


In this blog we’ll discuss how to use the TravelTime API to generate data visualization maps with a travel time area (isochrone) shaded. We’ll also showcase some of the maps we made using this API and Leaflet maps. The same process works for any map provider, so it's possible to replicate this process on Google, Mapbox, OSM or any others. Not too show what isochrone means? Check out our isochrone guide page for more detail

Getting started

You’ll need access to the TravelTime API, the program that draws the shapes. Get API keys here. You’ll then need to set up some boilerplate code to display the results on a map. To see how we did this using Leaflet check out this GIS Lounge article. This article also explains how to form the request. For any more tips with code take a look at our documentation.

Editing a request

Your travel time visualization can be adapted so that the shapes changed based on:

Mode of transport - this includes all public transport data, driving, walking, cycling, train, bus as well as combining train and car together. Read our blog on creating a drive time polygon here

. data-visualization-map-cycling data-visualization-map-walking data-visualization-map-bus data-visualization-map-train

 data-visualization-map-public-transport  data-visualization-map-driving data-visualization-map-train-driving

Points of interest – unlike mapping miles radius, the shape varies depending on the point of origin. Check out our comparison of 2 different maps with a 45 minute travel time area by public transport. Adjusting the shape by location improves a site search through personalisation. 

  data-visualization-map-public-transport-edinburgh data-visualization-map-public-transport-newark

Source or destination – this decides whether your travel time area is drawn to arrive at the point of origin by a particular time, or if they will be departing from this point by then. For example, a user on mobile looking for a restaurant to visit then will benefit from a source search. Alternatively, a map displaying ideal commuter towns for London workers would use a destination-based search. Take a look at how to search using more than one point of interest here

Map layers

Add up to 10 origins on a single map to see how the areas overlap. It’s also possible to create one big shape adding up lots of little areas, such as to see which areas are within easy reach from a chain of supermarkets. It’s possible to use the API to add more than 10 points of origin too – contact us to upgrade your API key here.

It's also possible to get this data downloadable as a KML and export postcode catchemtn data when you join as a client, prices start at £100.


Data visualisation Isochrone maps