Build a store locator using Mapbox GL JS

About this episode

Learn how to use Mapbox GL JS to build an interactive web map to help users find locations on the map. Our store locator tutorial uses retail locations, but your map can include any collection of locations, such as food banks or hospitals and health clinics. Madison Draper will code a new locator using the tutorial and answer live questions about the solution and tooling.

You'll learn to...

• Create the basic front-end structure for your web application
• Load your own data for results
• Add interactivity to your map with JavaScript popups, flyTo animations, and more

Code-along resources

Code along:

• Madison's code on Notion

Example locators:

• Tillamook Cheese Locator
• Impossible Burger Locator

Filtering options:

• Filter features by map view
• Store locator wrapper adding responsive design and category filters

Geocoding your APIs:

• Documentation for Mapbox Geocoding API
• Batch Geocoding with Tableau Prep

Google Sheets data --> JSON:

• Sheet Mapper
• Sheet Mapper Advanced

WordPress:

• Mapbox map block for WordPress

Data-driven styling:

• Example showing how to style elements based on data properties

More resources:

• ‍Search our documentation
• Request help from our Support team