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.
- High performance
- Easy to update
- Front-end based
- Individual Store Pages
- Geolocation API
- Google Maps API
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.
Build the UI.
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.
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".
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",
"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!