Custom HTML markers in Mapbox GL JS

By Yunjie Li

You can now add HTML markers to your GL maps in the latest release of Mapbox GL JS (v0.21.0). The Marker API provides you with added flexibility for representing point data by allowing you to use dynamic HTML, including images and videos, to create markers.

Below is a map that I created with Marker, which shows recently spotted plant and wildlife species at a given location. I am streaming the thumbnail photos in real-time from the iNaturalist API.

View full screen demo

Here is how you can add a custom image Marker to your map using an external URL (returned from an API call, for example).

var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(' + img_url + ')';
new mapboxgl.Marker(el)
 .setLngLat([-122.4, 37.7])
 .addTo(map);

Also check out this Mapbox GL JS example to see a full example of the Marker class in action.

Make a map!

We would love to see the maps you’re building with custom markers! If you have something to share, tweet at @Mapbox.

Yunjie Li