A simple store locator based on Leaflet, built into a static site generated by Hugo.
Author's Demo: https://leaflet-store-locator.netlify.app/
Detailed description: https://ttntm.me/blog/store-locator-leaflet-hugo/
Requires Hugo to build/run the site; after cloning/downloading it, you can either hugo server
or npm run start
in order to view the site on http://localhost:1313
.
Data is a json file contained in /data/ and named stores.json Data fields with example content are:
"shopName": "McDonald's Messe Vienna",
"shopAddress": "Ausstellungsstraße 44A",
"shopPLZ": "1020 Vienna",
"shopCountry": "Austria",
"shopLatitude": "48.217461",
"shopLongitude": "16.405981",
"shopActive": true
The index file loads the contents into a variable with the following line "{{ $shops := .Site.Data.stores }}" It provides a search field and determines sort order of the list.
A partial named js.html contains the script which creates and populates the map. Numerous Leaflet settings can be adjusted here.