This is a step by step guide that will show you how to create a store locator map using Leaflet OpenStreetMap and the TravelTime. Learn more about using the TravelTime API on a store finder
This guide will show you how to build a store finder that allows customers to:
- View stores on a map
- View stores in a list
- View stores within a maximum travel time
- Filter stores by shortest travel time
How to use this guide:
STEP 1: Add structure
Note that we have used Bootstrap, FontAwesome and some custom styling. These are optional and are used to style the markers on the map.
Now you can create a map container and sidebar listing by marking up the page:
Visualisation of the map container and sidebar listing is shown here.
STEP 2: Set the initial constants
As we will be displaying our pre-selected locations on the map, we need to add their information to the code. We also need to set the departure time, travel time and authentication keys for the request.
STEP 3: Set up the map
To set up the map, we first need to create a map object from Leaflet, referencing the <div> element with the id=”map”. This renders the map in that element.
We also need to add an OpenStreetMap tile layer to the background on the map and prepare to draw the origin marker of the map. Note that we use a custom icon.
Display markers on the map
This function takes an array of coordinates for the marker and draws them on the provided map.
Now let's try to request an isochrone from the TravelTime API. The argument for the function is only used for the response handling function so we can ignore it for now. The request JSON structure has two properties: ‘departure_searches’ and ‘arrival_searches’. Since we want to find out the area where a traveller can go in a given time, we will create a departure search. A detailed reference for the request is found here.
In the call for the AJAX request, we must not forget to add the authentication headers. And finally, we provide the name for the function which will handle drawing the isochrone on the map since we want it to be displayed as soon as the response is received.
Draw an isochrone
To draw an isochrone we use the function ‘drawTimeMap’, which requires a Leaflet map object as an argument. Since the coordinate structure for linear rings in the response don't match Leaflet, we will write a helper function that does the conversion. Let’s call it ‘ringCoordsToArray’.
Since the function requires the map object and the AJAX success parameter takes a function with only the response parameter, we use currying. In this case, we take the map parameter and return a function that accepts the response.
Using the response we can take the first result and convert the surrounding shell as well as holes within each shape into a format accepted by Leaflet using the helper function. Then we simply pass the converted array to the factory for Leaflet’s polygon and add it to the map.
Image below shows a visualization of the created isochrone shape.
Travel time data for stores
We are calculating the time needed to reach each store, so it will use a departure search again. The request JSON structure is very similar to that of the isochrones, but we add the location ids and coordinates. After the request is sent and a response received, we call a function, which will display the results in the sidebar.
Display store travel times in the sidebar
We want the store that can be reached in the shortest time displayed at the top, so we sort our results by travel time. Next, we iterate through the results and insert the shop name (in this case it’s a postcode) with the time converted to minutes for readability. Sprinkle in some styling from Bootstrap and we’re done.
Perform all actions
Finally, we can add the code that initiates all the actions needed for the final result.
The example below shows a list of stores within 30 minutes by public transport from the centre of London. The results are filtered by ‘shortest travel time’.