Clustering custom html markers with mapbox-gl-js - mapbox

Question

I'm using the mapbox-gl-js API and I'm using it with react to create some custom markers as follows:
let div = document.createElement('div');
let marker = new mapboxgl.Marker(div, {
offset: [ -20, 80 ]
});
marker.setLngLat(person.geometry.coordinates);
render(
<MapPersonIcon />,
div,
() => {
marker.addTo(map);
}
);
This worked great. However I would now like to cluster these markers, producing the same affect as the functionality found with layers i.e.
https://www.mapbox.com/mapbox-gl-js/example/cluster/
Does anyone know whether this is possible (hopefully with custom clusters too) or whether it will be available in an upcoming release?

Answer 1

This feature is now in Mapbox GL js - https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/
Key takeaways:
When setting your data source using map.addSource, make sure you define cluster: true and clusterRadius: int, like so:
map.addSource( 'sourceName', {
type: "geojson",
data: {
type: 'FeatureCollection',
features: [JSON]
},
cluster: true,
clusterRadius: 80,
});
That will push mapbox to cluster your icons, but you need to tell mapbox what to do when it clusters those icons:
map.on( 'moveend', updateMarkers ); // moveend also considers zoomend
The business (trimmed down for relevance):
function updateMarkers(){
var features = map.querySourceFeatures( 'sourceName' );
for ( var i = 0; i < features.length; i++ ) {
var coords = features[ i ].geometry.coordinates;
var props = features[ i ].properties;
if ( props.cluster ){ // this property is only present when the feature is clustered
// generate your clustered icon using props.point_count
var el = document.createElement( 'div' );
el.classList.add( 'mapCluster' );
el.innerText = props.point_count;
marker = new mapboxgl.Marker( { element: el } ).setLngLat( coords );
} else { // feature is not clustered, create an icon for it
var el = new Image();
el.src = 'icon.png';
el.classList.add( 'mapMarker' );
el.dataset.type = props.type; // you can use custom data if you have assigned it in the GeoJSON data
marker = new mapboxgl.Marker( { element: el } ).setLngLat( coords );
}
marker.addTo( map );
}
NOTE: Don't copy paste this code, rather use it in conjunction with https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/ to get the whole picture. Hope this helps!

Answer 2

Answering own question:
At current it seems that this isn't possible as per mapbox's github:
If you would like to cluster your markers you will need to use mapbox's native maki icons (please see above example picture & URL) until a plugin is available for your custom HTML markers.