Tutorial: how to build a store finder

by Niharika Sisodia
on Aug 6, 2018 8:14:06 AM

This is a step by step guide that will show you how to create a store locator map using Leaflet OpenStreetMap and the TravelTime platform. 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

store-locator-design

GET AN API KEY


How to use this guide:

STEP 1: Add structure

STEP 2: Set the initial constants

STEP 3: Set up the map


 

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:

Visualisation of the map container and sidebar listing is shown here. 

Store-locator-api

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

Store-finder-screenshot

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.

store-locator-isochrone

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.

store-finder

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

store-locator-design 

GET AN API KEY

For more information about building your own store locator, visit our TravelTime Documentation page. To start creating a store locator that can be filtered by travel time, request an API Key.

 

 

Related

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
READ

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
READ

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
READ

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
READ

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
READ

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
READ