Build High Converting Store Finder - Step by Step Tutorial

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

GET AN API KEY

How to use this guide:

STEP 1: Add structure

Create an index.html file. Set up the document by referencing the Leaflet CSS and JavaScript files in the HTML file:

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:

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.

Request isochrone

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.

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.

Full code

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’.