Jump to content

Our forum made possible by displaying online advertisements to our visitors.

Please consider supporting us by disabling your ads blocker.

  • Announcements

    • EmperoR

      Dear Guests   12/24/2016

      Welcome to the GIS-AREA. like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information for you to signup. Be a part of GIS-AREA by signing in or creating an account here. Once you have created your account and have introduced yourself to our community, you can start new topics, reply to others, subscribe interesting threads, get your customize profiles, make news friends, and others nice stuff. To make your stay as pleasant and constructive as possible, please don't forget to read through our pinned forum rules and board guidelines in each section before you do anything else.
Sign in to follow this  
Lurker

Using TravelTime Search API to Generate Isochrone

Recommended Posts

Lurker    1,770

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.

 

time-travel-GIS-london.png

 

 

 

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/
  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site, you agree to our Terms of Use.