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?
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
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: