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

This video tutorial shows you how to use Mapbox GL JS to build an interactive web map with custom markers and popups. Watch to see how you can load your own GeoJSON point 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

• 0:09 - Log into your Mapbox account and copy an access token from your Account page.

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.

Next steps

Now you know how to build an interactive Mapbox GL JS web map with custom markers and popups.

Here are some things to try next:

• Video: Add a custom font to a map style with StudioÍ
• Tutorial: Create a map data visualization with Studio