Creating a travel time data visualization map with Leaflet

by Louisa Bainbridge
on Sep 28, 2016 12:27:53 PM


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.




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 Apr 1, 2019 10:15:00 AM

5 ways to increase conversion rates using a map

Discover how using a map can increase conversion rates for your product or service. Increase the relevance of results for your users. Encourage users to take the desired action by filtering out irrelevant results.

Niharika Sisodia Jan 2, 2019 9:13:18 AM

Map circle distance or map drive time distance

Map circle distance using the TravelTime radius map tool. Compare distance to travel time. Create your own travel time map using the TravelTime Platform.

Niharika Sisodia Oct 23, 2018 11:34:54 AM

How to use a radius map tool Google alternative

A radius map tool Google alternative. Draw a circle around a point and compare to travel times.

Niharika Sisodia Sep 26, 2018 11:35:54 AM

Draw driving, cycling & walking times on a km radius map

Create a kilometer radius map. Draw travel times on km radius map. Create isochrone map using travel times.

Niharika Sisodia Jul 9, 2018 1:40:58 PM

How to make a kilometer radius map

Create a distance radius using a kilometer radius map. Compare km radius to travel times. Tools for beginners, data analysts and developers.

Niharika Sisodia Jul 5, 2018 11:28:36 AM