Isochrone API Tutorial: How to Create an Isochrone Map for Your App

Prerequisites

To follow along with the tutorial, you’ll need the following:

• ‍The TravelTime Isochrone API. The Isochrone API calculates all areas that are reachable within a specified travel time from a start location by any transport mode and allows you to display this on a map. If you’re new to TravelTime, you can sign up for a free API key here.

How the TravelTime Isochrone API works 

The TravelTime API accepts JSON requests and returns a JSON response. On the front end of your application, users can enter the parameters of their search, including:

• The departure or arrival location
• The departure or arrival time
• The mode of transport
• The travel time limit

You can try this for yourself in our Isochrone API Playground.

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

These results can then be displayed on your application or on a map like the example below:

1. Make a request to the Isochrone API

The code sample below shows how to visualise a travel time response.

It shows locations within 1 hour from The White House, Washington DC by public transport.

The JSON response includes coordinates. These points show the boundaries of shapes reachable within the corresponding travel time. 

Now let’s visualise this response on a map.

2. Map the response in your app

The image below shows how this response would be displayed on a Leaflet map.

We'll need to do the following three things:

1. First, we need to define parameters for the search. We’ll need to change the name of the start location (The White House) into coordinates using a geocoder.
2. Second, we need to change the departure time to the ISO format.
3. Finally, since the TravelTime API only accepts time in the format of seconds, we need to translate the 1-hour travel time into seconds which is 60 minutes x 60 seconds.

Since this code runs only in the browser, we have removed API key from the sample. Like with the JSON request, the code must have headers. These headers are needed to authenticate the request and usually sit on the server side of your app.

3. Geocode the address coordinates

For the start location, we specified The White House. However, the API only accepts coordinates of a location.To change the address into coordinates, we can use the TravelTime geocoding endpoint.

The function below sends a request for the geocoder:

4. Generate your request

Now that we have everything we need for the request, we can write the code that would generate the request. 

5. Create the map view

Finally, we need to call a function to set up a map with a marker at the departure location.

A separate function is used to draw the multipolygon from the response to reflect the isochrone.

‍Using isochrones in your application

You can use the TravelTime Isochrone API to allow users on your website or app to search for and view the locations they can reach within a specific travel time.

For example, property website, Zoopla, uses the API to help their users visualise potential properties in locations within their desired travel time.

Similarly, Foxtons also allows users to search for properties within a maximum travel time from their workplace:

Next steps

With the TravelTime Isochrone API, you can enable your users to search for locations by travel time for any mode of transport, including public transport, cycling and walking.

Coupled with the TravelTime Matrix API, you can also rank and filter thousands of location search results by travel time.

Additionally, TravelTime supports over 60 countries worldwide. You can see all of our supported countries here.

Check out our documentation to learn more about what you can do with the TravelTime API or sign up for a free API key.