javascriptleafletmapbox

Leaflet z-index


I'm porting some Google Maps code to Leaflet (well, Mapbox actually). I have quite a lot of shapes (like rectangles, polygons) and markers on the map and I need the ability to adjust their order manually at any time, not just when adding them for the first time.

In google maps there was a setZIndex method which allowed to adjust order of elements inside a pane (shapes were always below the markers). How can I do it in Leaflet? If it's not available in the api, what's the best way to implement it?


Solution

  • Currently it's not available in the Leaflet API. Luckily if Leaflet is using SVG, all objects are DOM elements and we can simply change their order. Here's a sample code:

    L.Path.prototype.setZIndex = function (index)
    {
        var obj = $(this._container || this._path);
        if (!obj.length) return; // not supported on canvas
        var parent = obj.parent();
        obj.data('order', index).detach();
    
        var lower = parent.children().filter(function ()
        {
                var order = $(this).data('order');
                if (order == undefined) return false;
                return order <= index;
        });
    
        if (lower.length)
        {
                lower.last().after(obj);
        }
        else
        {
                parent.prepend(obj);
        }
    

    };