Creating a travel time data visualization map with Leaflet

by Louisa Bainbridge
on Jan 23, 2017


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.




Totaljobs launch with TravelTime, increase conversions 10%

How one of the largest UK job portals, Totaljobs, implemented TravelTime on their website to increase conversions by 10%.

Evelina Bezubec Apr 22, 2020

Tutorial for Making Isochrones With Postman & Traveltime API

With this Time Map endpoint tutorial using postman, you can get a list of coordinates showing a perimeter of where’s reachable within a travel time limit.

Evelina Bezubec Nov 4, 2019

IKEA's marketing team uses TravelTime to create a drive time map

IKEA uses TravelTime to build a drive time map. See how their marketing team use it to adjust messaging to their audience.

Evelina Bezubec Oct 9, 2019

TravelTime releases isochrone QGIS plugin

Create a QGIS isochrone using the TravelTime platform API. API keys are free to use for non-commercial purposes. You can also calculate a distance matrix and routing using the plugin.

Louisa Bainbridge Jun 12, 2019

IFS use TravelTime to calculate 3.2 billion journey times

How the IFS created a travel time matrix of 40,000 origins to 40,000 destinations for both driving and public transport using the TravelTime platform.

Louisa Bainbridge Apr 16, 2019

TravelTime case study: healthcare development analysis

The Megahospital challenge is a tool created using the TravelTime API by Border City Data. See how the app was built for healthcare development analysis.

Niharika Sisodia Mar 26, 2019