Using the TravelTime Search API to Generate an Isochrone

Ad:


Share:

This step-by-step guide developed by staff at TravelTime shows how to draw a travel time polygon, filter points of interest by travel time and deliver A to B routing information all in one API call.  

When searching and analysing location data, the miles radius circle is seen a lot, yet we don’t often travel in a straight line. Mapping suitable locations by time lets you understand where’s really in reach within an area. Travel time mapping and searching is for people that ask ‘where’s a suitable location within 10 minutes?’ rather than ‘where’s within 3 miles radius?’

The goal: create a map that shows all possible locations that are within 30 minutes of Oxford Street, London using public transport.

Step 1: API keys

Make sure you have API keys for the TravelTime platform API here (http://www.traveltimeplatform.com/developers/) – you’ll get access within 24 hours.

Step 2: Viewing results

Now we need some boilerplate code for viewing the results. This snippet includes leaflet library – a wonderful map, (but you can use any map provider of your choice) and jquery to make sending requests a bit easier.

<html>
    <head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    </head>
    <body>
      <div id="map" style="height: 100%;"></div>
      <script>
      /*
        All of the code will go here
      */
      </script>
    </body>
  </html>

Step 3: Geocoding

First lets figure out where exactly we are. Our API uses coordinates, so we need to use the Google Maps Geocoding API to translate Oxford Street into coordinate to be compatible with the API:

 var startingLocation = "Oxford Street London";

      $.ajax("http://maps.google.com/maps/api/geocode/json?address=" + startingLocation).done(function(results){
         var location = results.results[0].geometry.location
         ...

Step 4: Forming a request

With the coordinates available we can query our API for the time map. We will need to form request:

var request = {
  "departure_searches": [
  {
  "id": "from oxford street",                  // we can send multiple queriesper request,
  // ids are used to figure out which respone
  // goes where.

"coords": location,                          // 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": 1800                          // time is in seconds, 1800s is 30 minutes
  }
  ]
  };

We also need authentication. You will have to use your own api key in he request headers:

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

Now we can combine everything and send the request to the api:

$.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?
  })

Step 5: Mapping the request

Now that we have received the response lets draw it on the map! First, lets setup our map. We will use OSM maps, and draw the map centered on our 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 we can add our results to the map, so the success function should be

success: function(data) {

//Map set up
  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.
  });
  }
  }

And there you have it! A shape which shows where can you get within 30 minutes by public transport in london drawn on a web page.


Ad:


time-travel-GIS-london

The full code is:

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

var startingLocation = "Oxford Street London";

$.ajax("http://maps.google.com/maps/api/geocode/json?address=" + startingLocation).done(function(results){
  var location = results.results[0].geometry.location

var request = {
  "departure_searches": [
  {
  "id": "public transport from oxford street",
  "coords": location,
  "transportation": {
  "type": "public_transport"
  },
  "departure_time": new Date().toISOString(),
  "travel_time": 1800
  }
  ]
  };

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

$.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) {

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].shapes.forEach(function(s) {
  var holes = s.holes;
  holes.unshift(s.shell);
  L.polygon(holes).addTo(map);
  });
  }
  })
  })
  </script>
  </body>
  </html>

Related Articles



Advertising


Like this article and want more?

Enter your email to receive the weekly GIS Lounge newsletter:

Advertising