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 and add it to your map using the Mapbox GL JS Marker method.

You can also follow a written tutorial for this task.

Getting started

Create a map

  • 0:43 - Create a webpage with a Mapbox map using HTML and Mapbox GL JS.

Add data

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

Add markers

  • 2:02 - Add CSS to style your 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 different map style.
  • 4:27 - Upload a different marker image to customize the markers.