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: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.
- 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: