Contents
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.
APPLICATION ACTIONS
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: