How to use TravelTime Search API to create isochrones

When searching maps we usually rely on radius to see where’s easy to reach. However, people don’t travel as the crow flies, as a radius suggests. This is why isochrones are useful when analysing maps, they show all locations you can reach within a certain travel time limit.

Below you can see an image with an isochrone displaying all locations reachable within 1 hour of Edinburgh Airport using public transport assuming you depart on Monday at 5. This isochrone was created using TravelTime Search API from iGeolise. This article shows you how to write simple code that will generate an isochrone.

The full code for this result is:

<html>
 <head>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js
 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js
 <style type="text/css">
 body {margin: 0;}
 </style>
 </head>
 <body>
 
 

var startingLocation = "Edinburgh Airport";

var headers = {
 "Access-Control-Allow-Origin": "/*",
 "X-Application-Id": "id",
 "X-Api-Key": "key"
 }

var coords = null;
$.ajax( {
method: "GET",
url: "http://api.traveltimeapp.com/v4/geocoding/search?query=" + startingLocation,
headers: headers,
accept: "application/json"
}).done(function(results){
coords = { lng: results.features[0].geometry.coordinates[0], lat: results.features[0].geometry.coordinates[1]} ;
})

setTimeout(function(){
var timeMapRequest = {
 "departure_searches": [
 {
 "id": "public transport from London School of Commerce",
 "coords": coords,
 "transportation": {
 "type": "public_transport"
 },
 "departure_time": new Date().toISOString(),
 "travel_time": 3600
 }
 ]
 };

$.ajax({
 url : "http://api.traveltimeapp.com/v4/time-map",
 method: "POST",
 headers: headers,
 data: JSON.stringify(timeMapRequest),
 contentType: "application/json; charset=UTF-8",
 success: function(data) {

var osmUrl="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
 var osmTileLayer = L.tileLayer(osmUrl, {minZoom: 8, maxZoom: 15});
 var map = L.map("map").addLayer(osmTileLayer).setView(coords, 12);

data.results[0].shapes.forEach(function(s) {
 var holes = s.holes;
 holes.unshift(s.shell);
 L.polygon(holes).addTo(map);
 });
 }
 })

}, 1000)

 
 </body>
 </html>

Let’s break it down to understand how it works.

API keys

For your request you will need API key and API ID. You can get those for free by signing up on http://docs.traveltimeplatform.com/overview/getting-keys/

Viewing results

The following snippet includes Leaflet open-source JavaScript library, but can be changed with any map provider:

<html>
   <head>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
   http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js
   https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js
   </head>
   <body>
    
    
    /*
    All of the code will go here
    */
    
   </body>
 </html>

Geocoding

Each request for an isochrone requires a departure or arrival location defined as a coordinate. The TravelTime API has a free of charge geocoder (http://docs.traveltimeplatform.com/reference/geocoding-search/) that can help you translate any address into required coordinates:

var startingLocation = "Edinburgh Airport";
var coords = null;
$.ajax( {
method: "GET",
url: "http://api.traveltimeapp.com/v4/geocoding/search?query=" + startingLocation,
headers: headers,
accept: "application/json"
}).done(function(results){
coords = { lng: results.features[0].geometry.coordinates[0], lat: results.features[0].geometry.coordinates[1]} ;
})

A request

Once the coordinates for the search are known, it’s time to define that this is a departure search for public transport leaving at 5pm on Monday, using a 60-minute travel time limit. The final request should look like this:

var timeMapRequest = {
 "departure_searches": [
 {
 "id": "from Edinburgh Airport",                // we can send multiple queries per request,
 // ids are used to figure out which response
 // goes where.

"coords": coords,                    // our current location coordinates,
   // coordinates are in format {lat: float, lng: float}
   "transportation": {
 "type": "public_transport"                 // using public transport
 },
 "departure_time": new Date().toISOString(),  // and leaving at this moment
 "travel_time": 3600              // time is in seconds, 3600 is 60 minutes
 }
 ]
 };

Authentication

Authentication is now needed. You will have to use your own API key in the request headers:

var headers = {
 "X-Application-Id": "<your app id>",
 "X-Api-Key": "<your app key>"
 }

Sending the request

Now you can combine everything and send the request to the API:

setTimeout(function(){                // we want to make sure we received coordinates from the geocoding service
$.ajax({
 url : "http://api.traveltimeapp.com/v4/time-map",
 type: "post",
 headers: headers,
 data: JSON.stringify(request),
 contentType: "application/json; charset=UTF-8",
 success: function(data) {
 //We have our data, now what?
 })}, 1000) // a timeout of 1 second should be sufficient in our case

Display the request on a map

After receiving response you’ll need to setup your map. Using OSM maps you can draw the map centered on your current location. It will be placed in the div with id “map”:

var osmUrl="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
 var osmTileLayer = L.tileLayer(osmUrl, {minZoom: 8, maxZoom: 15});
 var map = L.map("map").addLayer(osmTileLayer).setView(location, 12);

Finally you can add your results to the map, so the success function should be:

success: function(data) {
//Map setup
 var osmUrl="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
 var osmTileLayer = L.tileLayer(osmUrl, {minZoom: 8, maxZoom: 15});
 var map = L.map("map").addLayer(osmTileLayer).setView(location, 12);
data
 .results[0] // We asked for one shape, so only one request will be returned
 .shapes    // results are objects with search_id and shapes fields
 .forEach(function(s) { //There might be multiple shapes, like a little islands we can reach by public transport
 var holes = s.holes;
 holes.unshift(s.shell);
 L.polygon(holes).addTo(map); // adding the shapes to the map to draw them.
 });
 }
 }

Conclusion

TravelTime Search API is a quick and easy way to create isochrones. Also you can filter locations within travel time limit, get postcodes inside reachable area or use more conventional A to B routing. This is great for any analysis purposes or could be integrated into your product. Learn more about the API here http://docs.traveltimeplatform.com/

Try out the solution in action using this ready made app: https://app.traveltimeplatform.com/.