All docsHelpTutorialsVideo: Add custom markers to a map with Mapbox GL JS

Video: Add custom markers to a map with Mapbox GL JS

Use Mapbox GL JS to build an interactive web map with custom markers and popups. Load GeoJSON data inline in your HTML and add it to your map dynamically using Mapbox GL JS Markers.

Follow the written tutorial.

Getting started

  • 0:09 - Find your access token, text editor, and custom marker image.

Create a Mapbox GL JS map

  • 0:43 - Use HTML and Mapbox GL JS to create a webpage with a Mapbox map.

Add custom data

  • 1:44 - Add data in GeoJSON format for where markers will appear.

Add HTML markers

  • 2:02 - Add CSS to style your HTML markers.
  • 2:23 - Add JavaScript to create the Marker elements and add them to the map.

Add popups

  • 3:08 - Add CSS to style your popups.
  • 3:23 - Add JavaScript to attach popups to markers.

Customize map appearance

  • 4:01 - Change the style URL to use a custom map style.
  • 4:27 - Upload a different marker image to customize the markers.