[GIS] bringToFront(), bringToBack() on L.geojson problem

leafletmapbox

I'm trying to make a simple interactive map of Germany. I'm using mapbox.js (2.4.0) and have it set up like this:

var map;
var currLayer, citiesLayer, riversLayer;

$(document).on("ready", function() {
L.mapbox.accessToken = '';
map = L.mapbox.map('map', 'vantuch.d55cb2a1', {zoomControl: true, scrollWheelZoom: true}).
setView([51.0621,10.9863], 6);

    // CALL AJAX REQUEST FOR TESTING
    findCities();
    findRivers();
    findCityPlaces();
});

I am calling AJAX functions to set up a L.geojson layer after success like this:

/* functions for setting up MARKERS (find_river_places) */
function showMarkers(map, geojson, selectType) {

    geojsonLayer = L.geoJson(geojson, {
        // setting up markers
    });

currLayer = geojsonLayer;
map.addLayer(geojsonLayer);
}

function showCitiesMarkers(map, geojson) {
    geojsonLayer = L.geoJson(geojson, {
    pointToLayer: function(feature, latlng) {
    var marker;

        //return new L.CircleMarker(latlng, {radius: 5, fillOpacity: 1.0}).bindPopup(popup);
        marker = new L.Marker(latlng, {
        icon: new L.DivIcon({
            className: 'circle-border-city',
            html: '<div>' +
          '<span class="circle-marker-city">' + feature.properties.name  +
          '</span>' + '</div>'
        })
    });
    return marker;
    }
});

citiesLayer = geojsonLayer;
map.addLayer(geojsonLayer);

}

What I want to do is to have layers for rivers and cities always on the top of other layers (user should be able to turn them on or off), no matter which function is called the first. But they're always rendered at the bottom.

I thought that citiesLayer.bringToFront() after adding other layers should work. But after testing it in the console it does nothing. So what am I doing wrong, or is there a better way to do this ?

enter image description here

Best Answer

EDIT following question edits 2 and 3:

Unfortunately L.Marker's behave totally differently from vector layers. Their zIndex property (which control their stack up order) is automatically adjusted by Leaflet so that South-most markers (i.e. bottom-most) appear above North markers. See for example in Dortmund: you have a yellow circle above a red one, which is above another yellow one…

Additionally, there is no bringToFront() or bringToBack() method for markers, since you do not have control on how they stack up.

Now if you display your cities as circle-like markers, why not simply using L.circleMarker instead? That way, they will behave like other vector layers, and you will be able to use bringToFront() with them.

Updated demo: https://jsfiddle.net/ve2huzxw/284/

Original answer

Since you are using mapbox, you have Leaflet version 0.7.7 under the hood.

As such, unfortunately you cannot use the custom map panes introduced with Leaflet 1.0.

However you should have been able to use bringToFront() and bringToBack() on your Feature Groups / GeoJSON groups, which in fact just call the same method on their child vector layers.

Note that markers will always be rendered on top of all vector layers, no matter what you do.

Demo: https://jsfiddle.net/ve2huzxw/283/

Would you be able to reproduce your issue online?

You do not show how you assign your citiesLayer.

Related Question