Isochrone API tutorial: see how far you can travel within a time limit with Leaflet & TravelTime API polygons

by Niharika Sisodia
on Mar 14, 2019 11:10:35 AM

isochrone-map

GET AN API KEY

We'll show you how to draw travel time polygons, also known as an isochrones with simple HTML and JavaScript code and data provided from TravelTime API on a Leaflet map.

In this example, we will use the TravelTime API Geocoder to get coordinates of the White House, Washington DC, then send those coordinates and trip parameters as a Time Map search back to the API. The received polygon data will be drawn on a Leaflet map. In the end result, you will see which areas on a map can be reached within 60 minutes using public transportation. We will also be able to select from different transportation modes such as walking, cycling, public transport and more.

Code snippets provided in this tutorial are inserted into a CodePen integrated development window where you can manipulate the code and see a live result. To make the sample work and draw the isochrone, you’ll first need to insert an API key into the CodePen - Request an API key for the TravelTime Search API by clicking here.

The basics

To create an isochrone, the user must provide parameters to the API search request, including:

  • Departure or arrival location
  • Mode of transport
  • Travel time limit
  • Time of the day

Once the request is made, the TravelTime API receives the request and returns a JSON response. The response includes coordinates for points. These points show the boundaries of shapes reachable within the travel time.

TravelTime API Time Map request and response

Communication with the API works by sending a JSON format request and the API returns a JSON format response with the polygon data that we will see drawn in the sample code.

Here is how an API request looks without header information, more information about the Time Map search and it's parameters is available in the Travel Time API documentation.

The JSON response after a successful API request includes coordinates. These points show the boundaries of shapes reachable within the corresponding travel time.

Visualizing on a map

This response has to be visualized on a map. Let’s explore the sample code that is also available in the CodePen development environment.

Isochrone_map

The image above shows how this response would be displayed on a Leaflet map. It can be implemented using any programming language or mapping system you prefer. This is the simplest way to generate a request and display a response using JavaScript.

GET AN API KEY

Writing our code sample

First, we need to define parameters for the search.

  • Convert the name of the start location into coordinates using a geocoder;
  • Enter the departure time into the ISO format.
  • Translate the 1 hour travel time into seconds which is 60 minutes x 60 seconds.

These values usually would be in the JSON request, in our sample, we're setting them as variables

As mentioned previously to execute a request to the TravelTime API, an API key is needed, that can be obtained here. The API key is added to the header information of the API request, into variables APPLICATION_ID and API_KEY. These are needed to authenticate the request and usually sit on the server side of your application.

Geocoding

For the starting location, we specified The White House, Washington DC, but the API only accepts latitude and longitude coordinates. To change the address into coordinates we use TravelTime Geocoder.

Request to the API

Now that we have everything we need for the request, we can use the code that would generate the request to API Time Map search. A JSON departure_search is formed and sent in a HTTP request.

Drawing the result

In this sample we are using free Leaflet.js for the interactive map and Mapbox map tiles. mymap variable sets the starting location of the map when the code sample loads. 

Drawing of the isochrone itself is handled by this script.

To see all of the mentioned code in action, please try our CodePen.

See the Pen Drawing isochrones by iGeolise (@igeolise) on CodePen.

Related

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
READ

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 11, 2019 9:05:01 AM
READ

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 26, 2018 9:17:41 AM
READ

Create your own driving commute distance map in the USA & 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 Nov 14, 2018 1:45:13 PM
READ

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
READ