Adding SymbolLayer text to MarkerLayer

[Niamh1]

In the "Clusters and Popup" example (https://svelte-maplibre.vercel.app/examples/clusters) there is a CircleLayer, with the SymbolLayer point_count information added on top. I want my cluster icons to be pill shaped instead of circular. I have created a MarkerLayer, with an svg to do this. But now the SymbolLayer text is being rendered underneath the cluster icons and are invisible unless I reduce the opacity. Is there a way to a) make the CircleLayer icons not circular, or b) change the z-index of the SymbolLayer to appear on top of the MarkerLayer. Thanks!

[dimfeld]

a) I don't think so, but I'm not 100% sure. It's worth checking the Maplibre Layers Spec to see if there's a way to accomplish this, but I expect not.

b) Unfortunately not for this case. The problem there is that the SymbolLayer is being rendered as part of the WebGL canvas, but the MarkerLayer with its SVGs are rendered on top of it in the DOM.

When everything is in WebGL you can use thebeforeId prop to control which layers render below others, and when everything is in DOM you can just use normal CSS z-order, but you can't place DOM elements in between layers of the WebGL canvas.

My suggestion here would be to put the cluster counts into the marker's HTML as well so you have full control. This is somewhat similar to what the Custom Marker Cluster does.

In that case isn't not actually using the cluster counts, but if you look at the Feature in the slot for cluster markers you'll see the various counts that you want.

Hope this helps!

[Niamh1]

Brilliant, thank you for your answer.

Your suggestion to put cluster counts into the marker's HTML worked perfectly.