How to Create a Travel Time Data Visualisation 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.




How to Create Isochrones with Postman and the 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

Use this Travel Time Calculator to Discover Journey Times

Explore travel time calculator tools. Calculate travel times globally. Optimise your journey using time instead of distance.

Evelina Bezubec Aug 1, 2019

Isochrone Analysis Made Easy

Isochrone analysis simplified. Learn how to use isochrone analysis in mapping. Improve customer service, logistics or plan an office relocation using isochrones analysis techniques. Save time and costs, and retain staff using the TravelTime platform.

Niharika Sisodia Mar 25, 2019

Isochrone Map Design Inspiration

Perfect your isochrone map design. Use these tips to make your isochrone map easy to understand. Improve user experience by creating a simple and aesthetically pleasing isochrone map.

Niharika Sisodia Feb 7, 2019

How Far Can I Travel in 15 Minutes or 1 Hour? This Map Shows You

How far can I travel within a time limit? Make a map to show you where you can reach within a certain travel time. Change the mode of transport and time of day. Add up to three starting locations and filter the intersection between them.

Niharika Sisodia Nov 21, 2018

Create Your Own Driving Commute Distance Map in the USA and Beyond

Create a commute distance map and drive time map. View potential areas to work on a commute distance map. Search by travel time instead of distance.

Niharika Sisodia Oct 25, 2018