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
You can also follow a written tutorial for this task.
- 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.
- 1:44 - Add data in GeoJSON format for where markers will appear.
- 2:02 - Add CSS to style your markers.
Markerelements and add them to the map.
- 3:08 - Add CSS to style your popups.
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.
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:
Add 3D buildings to a Mapbox Studio style
Add a 3D building layer to a map style in Mapbox Studio.
Video: Add 3D buildings and data-driven styling with Studio
Turn on 3D buildings and apply fill colors based on building heights.
Video: Add bilingual labels to a map with expressions in Studio
Learn how to use expressions for string and data operations in Studio.