Layering with z-index works when using layergroups - but is there any working way to have another layer with circles or other elements ontop of a layer with a heat-map?

The heat-map seems to be always on top - except for single markers (circle-markers also don't work).

Using Mapbox/leaflet and https://github.com/Leaflet/Leaflet.heat

enter image description here


1 Answer 1


It's not a bug like @chkri mentionned.

It's just the way Leaflet handles its divs where it draws svg and where it draws canvas.

SVGs (basically everything extending L.Path) are drawn on a div container (leaflet-overlay-pane) with a smaller z-index then the div containing the heatmap canvas, and thus heatmap will always be on top of SVG markers.

A quick fix is to modify leaflet css and invert z-index of concerned containers.

.leaflet-overlay-pane {
    z-index: 6; /* previously 4 */
.leaflet-marker-pane {
    z-index: 5; /* previously 6 */
.leaflet-shadow-pane {
    z-index: 4; /* previously 5, store the shadows of L.Markers */

Note that by doing this heatmap and L.Marker will all be behind SVG Markers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.