This is an interactive map with a list of available store locations. Selecting a store shows it with a pin on the map. Users can choose a store from the list in the sidebar or click the "Find Stores Near Me" button to automatically select the nearest location.

Customization

The app is built with standard Bootstrap 5 components and under 100 lines of vanilla JavaScript. The code uses the Geolocation browser API to ask for permission and fetch the user's location.

The map section takes advantage of Bootstrap Studio's Map component to render a fully functional map interface with adjustable starting location and zoom level. The Map component has a lot of customization options and is very easy to set up with support for both Google Maps and OpenStreetMaps.

For the store locations the app uses regular static HTML elements. Each location has the data-lat and data-lng attributes which tell the app where the store is located. When users click the "Find Stores Near Me" button and grant geolocation permissions, the app takes their location and using a simple algorithm finds the store with the nearest coordinates. The distance can be displayed in either miles or kilometers - simply change the DISTANCE_UNIT constant in the JavaScript file.

Get started

Download the .bsdesign file from the button above, and open it in Bootstrap Studio to deploy your own store locator in no time.