How to Make a Travel Time Map

Mapbox has released a new plugin which allows you to add an isochrone layer to your Mapbox powered maps. The Mapbox Isochrone plugin visualizes how far you can travel in different periods of time.

You can see how the ischrone plugin works on this demo map. You can adjust the starting position by dragging and dropping the car icon on the map. If you switch to the 'Quantized' view the map switches to display stepped isolines, showing how far you can travel in incremental steps of time.


The Mapbox Isochrone plugin works with three different modes of travel: driving, cycling and walking. You can discover a little more about how the plugin generates the travel times for the different modes of travel on the Mapbox blog, Add Isochrones to Your Next Application.


You can also use the Route360 API to add an isochrone layer to your maps. Route360's API provides developer access to their isochrone library. The API has been designed to provide simple access to the Route360 isochrone travel time library from the Leaflet.js mapping platform.

Using the Route360 JavaScript API you can add a travel time isochrone layer to a Leaflet map. The API allows for users to view bike, car or walking travel-time isochrone layers on a Leaflet map. The API includes options to add a time control, so that the transit isochrone travel times will adjust to a transit network's schedule of operations.

The GraphHopper Isochrone API also provides travel times for bike, car or walking. You can view the API in action on this demo map. You can get details on how much the API costs on the Pricing page.