How to set zIndex layer order for geoJson layers?

Question

I would like certain layers to always be on top of the others, no matter in what order they are added to the map. I know bringToFront() , but that does not meet my requirements. I would like to install zIndex dynamically based on properties.

The setZIndex() has a setZIndex() method, but this does not seem to work for geoJson layers: https://jsfiddle.net/jw2srhwn/

Any ideas?

Answer 1

Cannot perform vector geometry.

zIndex is a property of HTMLElement s, and vector geometries (lines and polygons) are displayed as SVG elements or programmatically as <canvas> drawing calls. These two methods have no zIndex concept, so the only thing that works is to push elements at the top (or bottom) of the SVG or <canvas> sequence.

Also, recall that L.GeoJSON is just a specific type of L.LayerGroup , in your case containing L.Polygon instances. Also, if you read the documentation about the setZIndex() method on L.LayerGroup :

Calls setZIndex on each layer contained in this group, passing z-index.

So do L.Polygon have a setZIndex() method? No. So call it in their containing group to do nothing. This will affect any L.GridLayer contained in this group.

Returning to your problem:

I would like certain layers to always be on top of the others, no matter in what order they are added to the map.

It looks like what you are looking for are cards. Read the card tutorial .

Answer 2

This is one of the reasons for implementing custom “panels” in Leaflet 1.0 (compared to 0.x).

• Create Panels : var myPane = map.createPane("myPaneName")
• If necessary, set the class / z-index of the panel element: myPane.style.zIndex = 450 (see z-values ​​of the embedded panels )
• When creating your layers, specify their target pane : L.rectangle(corners, { pane: "myPaneName" })
• When building the L.geoJSON factory, you can scroll through your functions with the onEachFeature option to clone your layers with the specified pane .

Demo: https://jsfiddle.net/3v7hd2vx/90/