How to filter location search results by time using the TravelTime API

by Louisa Bainbridge
on Nov 2, 2016 11:44:35 AM

In this blog you’ll learn how to create a location-based search tool that can  filter location search results by time, rather than geodistance.If you're not a developer, check out this post for making a map. Using the TravelTime API, you’ll be able to calculate journey times from a start point to multiple points. This enables users to select which location to visit easily as it does not require them to manually calculate their route time.

The example application below enables users to search for pharmacies located nearby their desired location (Big Ben). Note: we classify ‘nearby’ locations as areas that can be reached quickly, rather than locations that are close by straight-line distance. The application will display the results as color coded points on the map as well as a list with travel times.



App shows which points of interest are reachable within 30 minutes of the origin travelling by public transport?

Application Initialization

First set up a HTML page template: 

Head: This example uses the Leaflet map library, with CSS and also Bootstrap CSS for marker icons and general styling.

Body: This contains controls for changing the travel time limit. Editing this control from 30 minutes to 15 would reduce the amount of time the user is willing to go to reach the pharmacy. The transportation mode can also be changed here. It also includes the containers for the map and list. CSS styles can be added later as necessary. For any further help on using the Leaflet map take a look at Leaflet library documentation.

Now for the business end…

Add a script tag to the end of the body element and set up our map:

This example uses OpenStreetMap’s tile layer for the background and a separate marker layer to draw the markers. Use the leafletMap variable to add any additional modifications to the map object itself. The origin displayed is the coordinates of the Big Ben starting point with a [latitude, longitude] format. This format will be used in the search queries too.

Finally it’s time to add points of interest (the pharmacy locations in this example) near Big Ben:

The points are listed in a dictionary format, the name of the point is listed in quotes (“1” “2”…) and the value is listed as the coordinates in the [latitude, longitude] format as explained above.


The following function is the main call for updating results:  The first two lines take input values from the select drop downs and change the parameters of the request. As travel time has to be an Int rather than a string when sent to the API, a conversion is required. The createRequest function creates a request JSON string that is sent to the TravelTime API. The postRequest is a helper function that sends a HTTP POST request to the API and delegates the handling of the received response to the timeFilterResponseHandler.Take a look at creation of the request first: For this you’ll need API keys


Set the origin in the sources key to display travel times from Big Ben to the pharmacies. Points can be set as the points of interest (POI) dictionary as it’s already in the correct format. It’s possible to have up to 10 sources or destinations in one request.Breaking it down:

  • The destinations hash looks similar and just requires one slight change, switching start_time to arrival_time
  • The coords are the starting point
  • start_time is a String containing a date time in an ISO format (getMonday8Am is a helper function to get next Monday’s DateTime object)
  • travel_time is specified as Int of seconds
  • mode is a string specifying the transportation mode used for traveling
  • Specify that you want time to the point in the properties array
For complete reference or the request please visit the documentation.Now lets take a look a quick at the postRequest function: You can see that a request to the API is being sent with a “time_filter” endpoint – if this is successful you’ll be able to delegate the response handling to the call back function. Alternatively you can use jQuery or any other library you feel comfortable with.Now for the fun stuff – the handler function: This function firstly filters the poi dictionary into reachable and unreachable points. It then draws the points on the map after clearing the marker layer, and displays the origin marker for reference. The drawMarker function is a helper that adds markers to the map with a predefined style. Finally it processes the response text into a suitable format with the getTimes function and displays them in a list. Filtering is done as follows: This is a fairly simple process – take the returned keys for filtered points and use those keys to split the poi dictionary into reachable and unreachable coordinates.Just for clarity, here’s the drawMarker function before we proceed further: Use Leaflet’s divIcon to create the marker. It allows a CSS symbol to be displayed on the map. “glyphicon glyphicon-map-marker” is the icon itself while the map-marker is a custom style to correct for the icon’s offset. The color class is just to set a predefined color.Now move on to displaying the results as a list:

Take the dictionary of returned points and transform it into an array with times attached so you can sort them.

Now map the array into an HTML string with the timedElementTemplate template function and set it as the content of the list container. The secondsToHHMMSS is a helper that takes an Int of seconds and returns time in a HH:MM:SS format. Here is the template:

That’s it for all the function code! Lastly, here are the custom styles used to make the page look like the screenshot:



TravelTime case study: healthcare development analysis

The Megahospital challenge is a tool created using the TravelTime API by Border City Data. See how the app was built for healthcare development analysis.

Niharika Sisodia Apr 8, 2019 9:08:00 AM

Google Distance Matrix API vs. the TravelTime Search API

Google Distance Matrix and TravelTime Search both calculate travel times and distances from one to many points of interest. Compare the API features and pricing.

Niharika Sisodia Jan 28, 2019 4:04:45 PM

10 brick and mortar store locator pages for inspiration

Get inspired by brick and mortar store locator pages. View store locator pages from top global retail brands. Attract customers to your brick and mortar store by creating an effective store locator page design.

Niharika Sisodia Dec 20, 2018 10:21:18 AM

How to convert visitors into customers using map view

Improve your map UI. Perfect your website map view to streamline the user journey. Convert visitors to your site into customers for your product or service.

Niharika Sisodia Dec 18, 2018 3:30:14 PM

How far can I travel in 15 minutes or 1 hour? This map shows you.

How far can I travel within a time limit? Make a map to show you where you can reach within a certain travel time. Change the mode of transport and time of day. Add up to three starting locations and filter the intersection between them.

Niharika Sisodia Nov 26, 2018 9:17:41 AM

What is geocoding? Use geocoding to display postcodes on a map

What is geocoding and how does it work. Use a geocoder to convert place names and postcodes into coordinates. Display coordinates on a map. Use geocoding to improve routing and map display.

Niharika Sisodia Nov 22, 2018 9:26:41 AM