Store Locator

The initial store locator that the team had was an ancient relic from an old .NET website that they no longer wanted to maintain. With load times approaching 20 seconds, it was definitely time for an upgrade.

The team was looking for something lean and mean. An app that could handle 250+ store locations with ease and without skipping a beat. They also wanted to leverage the same data to create individual store pages for added SEO value.

Requirements

  • High performance
  • Responsive
  • Easy to update
  • Front-end based
  • Individual Store Pages

Tools

  • Javascript
  • JSON
  • Geolocation API
  • Google Maps API

Step 1

Convert their existing store listings built in SQL to JSON.

This involved creating the new JSON structure system, adding additional features such as store hours and custom descriptions, adding additional stores, removing old stores, and improving the accuracy of the latitude and longitude coordinates.

SQL
JSON

Step 2

Build the UI.

Before any javascript or API development began, the UI was laid out with a few sample stores and tested on multiple devices to make sure the client was happy. This piece was very important because the application needed to follow their new brand guidelines. It also provided a guideline for me to follow on the javascript application side.

Step 3

Calculate the Great Circle Distance.

Google Maps API has the ability to calculate street level distances between two points on earth with ease, but that can add up to a hefty price tag. The client was looking to reduce the number of Google Maps API calculations done on the site, so I worked to make finding stores a two step process. First, the customer would type in an area (address, zip code, etc) or allow geolocation to see a map with a list of the closest 15 stores. The application would loop through all available stores to calculate the approximate distance without an API by using the Great Circle Distance.

Calculating distances over spheres (our planet is a sphere, right?) is pretty tricky. Thanks to trigonometry, we can use the ancient formulae to calculate the rough distance between two latitudinal and longitudinal points using The Great Circle Distance.

Once a user selected an individual store from the map, it would automatically load the user's Google Maps or Apple Maps application where it would then calculate street-level distance.

Great Circle Distance calculation From Wikipedia - Great-circle distance

The Google Maps geolocation takes around 400 milliseconds, and the Great Circle Distance calculation takes around 15 milliseconds per search, successfully meeting the requirement of "High Performance".

It seems that the greatest achievements in human history have all been made possible by the science of cartography.

Maintenance

Updating content.

Currently, the code it set up in an easy-to-read and easy-to-update JSON format, which allows even non-coding employees to make updates.

{
"name": "Store ABC",
"description": "This store is based in city XYZ and specializes in...",
"address": "123 Main Street, Dallas TX",
"phone": "123-456-7890",
"hours": {
"mon": "8:00 - 16:00",
"tue": "8:00 - 16:00",
"wed": "8:00 - 16:00",
"thu": "8:00 - 16:00",
"fri": "8:00 - 16:00",
"sat": "10:00 - 15:00",
"sun": "10:00 - 15:00"
}
}

Finito! (The End)

Thanks for reading!