How to Search Locations by Travel Time With the iGeolise TravelTime API

When developing a location-based application, displaying the most relevant information is the key to success. Countrywide.co.uk managed to increase their conversions by up to 300 percent when delivering points of interest by travel time. In this article, we’ll explain how to search and display locations by travel time rather than distance using the TravelTime Platform API.

To show you how to integrate the TravelTime Platform API we’ve created a sample app using Leaflet JavaScript library to display an OSM public tiled web map with 10 hardcoded points of interest, denoted by var poi in our code. These points can represent anything, but let’s imagine that our app is for a property listing site and the search is displaying all possible rental locations available within a 3 mile radius from the London School of Commerce.

var origin = [51.504622, -0.089905]; // This is the Location of starting point which is London School of Commerce
     var radiusMeters = 3 * 1609.34; // miles * meters per mile.

     var osmUrl="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; // This the OSM public tile layer for the map url template.
     var osmTileLayer = L.tileLayer(osmUrl, {minZoom: 8, maxZoom: 12});

     // we use the starting coordinates to center the map.
     var map = L.map("map").addLayer(osmTileLayer).setView(origin, 12);

     // These are the points of interest that we are going to filter and get travel time for.
     var poi = [
       {coords: [51.503088, -0.014267], name: "POI0" },
       {coords: [51.505000, -0.100000], name: "POI1" },
       {coords: [51.510000, -0.160000], name: "POI2" },
       {coords: [51.525276, -0.035919], name: "POI3" },
       {coords: [51.523860, -0.065301], name: "POI4" },
       {coords: [51.449830, -0.045265], name: "POI5" },
       {coords: [51.462951, -0.135480], name: "POI6" },
       {coords: [51.518080, -0.127841], name: "POI7" },
       {coords: [51.489754, -0.119242], name: "POI8" },
       //This is a point that is 5 miles away from origin
       {coords: [51.489754, -0.150000], name: "POI9" }
     ];

View in Context

This common map search logic displays 6 points of interest that are within a 3-mile radius as blue markers and those that are outside as red. However, our app user is looking for properties that are easily accessible from the London School of Commerce, not the locations that are deemed close by using ‘as the crow flies’ distance. For this, a search that finds results within a 30 minute commute from the school is more relevant. We can achieve that with a simple JSON request using the TravelTime API’s TimeFilter feature.

search results by distance

Radius search showing search results by distance

To get started, you will first need to create the appropriate request for the API. TravelTime supports CORS to easily integrate the API into any system and we will be posting the JSON request for time_filter feature to sort our POI according to our request.

    // simple post request helper, could use jQuery instead.
     function postRequest(request, callback) {
       var xhttp = new XMLHttpRequest();
       xhttp.onreadystatechange = function () {
         if (xhttp.readyState == 4 && xhttp.status == 200) {
           callback(xhttp.responseText);
         }
       };

       xhttp.open("POST", "http://api.traveltimeapp.com/v3/time_filter", true);
       xhttp.send(JSON.stringify(request));
     }

View in Context

On the request below we use set of destinations to define our request parameters. In this case, it is coords: origin that are equal to London School of Commerce's location. You can have multiple sources per search and a startTime is always required. We will use arrivalTime instead of startTime, which changes the type of search performed: showing the best journeys which arrive to destination by 8AM at the latest, rather than journeys that begin at this time.

 

Comments (0)