Using TravelTime Search API to Generate Isochrone

Lurker · July 12, 2016

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.

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>

source :

https://www.gislounge.com/using-traveltime-search-api-generate-isochrone/

3dbu · July 12, 2016

nice share dude, thks for the entirely code, thks

Sign In

Using TravelTime Search API to Generate Isochrone

Recommended Posts

Lurker

Link to comment

Share on other sites

3dbu

Link to comment

Share on other sites

Join the conversation

Activity

Important Information