How to set the zIndex layer order for geoJson layers?

Question

I would like to have certain layers to be always on top of others, no matter in which order they are added to the map. I am aware of bringToFront(), but it does not meet my requirements. I would like to set the zIndex dynamically based on properties.

Leaflet has the method setZIndex(), but this apparently does not work for geoJson layers: https://jsfiddle.net/jw2srhwn/

Any ideas?

Answer 1

Cannot be done for vector geometries.

zIndex is a property of HTMLElements, and vector geometries (lines and polygons) are rendered as SVG elements, or programatically as <canvas> draw calls. Those two methods have no concept of zIndex, so the only thing that works is pushing elements to the top (or bottom) of the SVG group or <canvas> draw sequence.

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

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

So, do L.Polygons have a setZIndex() method? No. So calling that in their containing group does nothing. It will have an effect on any L.GridLayers contained in that group, though.

Coming back to your problem:

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

Looks like the thing you're looking for is map panes. Do read the map panes tutorial.

Answer 2

This is one of the reason for the implementation of user defined "panes" in Leaflet 1.0 (compared to versions 0.x).

1. Create panes: var myPane = map.createPane("myPaneName")
2. If necessary, set the class / z-index of the pane element: myPane.style.zIndex = 450 (refer to z-index values of built-in panes)
3. When creating your layers, specify their target pane option: L.rectangle(corners, { pane: "myPaneName" })
4. When building through the L.geoJSON factory, you can loop through your features with the onEachFeature option to clone your layers with specified target pane.

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

Answer 3

For peoples who are searching about Z-Index

All path layers (so all except for markers) have no z-index because svg layers have a fix order. The first element is painted first. So the last element is painted on top. @IvanSanchez described good why zIndex not working.

You can control the order with layer.bringToBack() or layer.bringToFront().

With that code you have more options to control the order of the layers.

L.Path.include({
    getZIndex: function() {
        var node = this._path;
        var index = 0;
        while ( (node = node.previousElementSibling) ) {
            index++;
        }
        return index;
    },
    setZIndex: function(idx) {
        var obj1 = this._path;
        var parent = obj1.parentNode;
        if(parent.childNodes.length < idx){
            idx = parent.childNodes.length-1;
        }
        var obj2 = parent.childNodes[idx];
        if(obj2 === undefined || obj2 === null){
            return;
        }
        var next2 = obj2.nextSibling;
        if (next2 === obj1) {
            parent.insertBefore(obj1, obj2);
        } else {
            parent.insertBefore(obj2, obj1);
            if (next2) {
                parent.insertBefore(obj1, next2);
            } else {
                parent.appendChild(obj1);
            }
        }
    },
    oneUp: function(){
        this.setZIndex(this.getZIndex()+1)
    },
    oneDown: function(){
        this.setZIndex(this.getZIndex()-1)
    }
});

Then you can call

• polygon.oneUp()
• polygon.oneDown()
• polygon.setZIndex(2)
• polygon.getZIndex()
• And now layergroup.setZIndex(2) are working