Leaflet - Adding another layergroup on top of a heatmap layer

Question

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

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.