Store Locator Concept with Mapbox tools
This is a Best Buy Store Locator demo that demonstrates a map-centric store locator concept. Instead of forcing a user to fill in forms, they can begin their search by moving around the map.
It shows how a user can zoom into the map and reduce the number of locations returned based on what’s showing in the map itself. The interactivity between the sidebar and the map provides you with tight integration as hovering on a sidebar entry shows a card by the location. Clicking the cards allow you to open another page with more detailed information.
These maps are fully customizable. This map uses the company’s logo for the marker location, as opposed to using the generic upside-down teardrop pin, we see on most generic maps and store locators.
We also see the search tool that allows us to fly to a specific location by typing in its name.
This concept enables a beautifully integrated, powerful and elegant store locator into your overall branded web site.
Major Features
- Customized Map with Logos and Names – Every layer of the map is customizable – Store locations are indicated with store logos and name, not the ubiquitous generic pin
- Automatically updated sidebar on map movement – When you pan and zoom on the map, you get a list of the locations in the sidebar
- Search tool to find locations in the map – Immediately zooms you to the selected location
- Hover in sidebar highlights the location on map
- Card displays satellite image of location – The card shows a birds eye view of the location
- Clicking on card opens corresponding webpage – A new window opens, displaying a webpage with more detailed information
Technologies used
- Studio
- Tileset
- Search
- queryRenderedFeatures
- popup
Other useful tech (not in this demo)
- Directions
- Isochrones