Register to watch the webinar

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Adblock detected. If you have any problems registering try disabling the browser extension and refreshing this page.

Lunchbox
Thursday
July 16, 2020
  |  
12:00 pm
  
(PST)
  |  
Duration: 
45:41

Build a store locator using Mapbox GL JS

Madison Draper

Map Designer, TAM

Hannah Judge

Technical Account Manager

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:

Example locators:

Filtering options:

Geocoding your APIs:

Google Sheets data --> JSON:

WordPress:

Data-driven styling:

More resources:

Registration

Thursday, July 16, 2020
  |  
12:00 pm
  
(PST)
Thank you for registering!
*All registered participants will receive a link to the recording.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

If you're having trouble registering try disabling any ad blocker or browser extension and refresh the page.

Madison Draper

Map Designer, TAM

Hannah Judge

Technical Account Manager

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:

Example locators:

Filtering options:

Geocoding your APIs:

Google Sheets data --> JSON:

WordPress:

Data-driven styling:

More resources:

Discover other webinars

See all