Leaflet geoJson in front of markers in a FeatureGroup

Question

I am loading some markers and json data to a leaflet map.

I need to get my json in front of the markers. I have tried placing the markers and json in seperate FeatureGroups and then tried bringToFront() and bringToBack() to no avail

var markerHolder = new L.FeatureGroup().addTo(map).bringToBack();
var jsonHolder = new L.FeatureGroup().addTo(map).bringToFront();

I also tried using this panes work around but when using a Feature group in place of the tileLayer as in the example below, an error was thrown at getContainer()

var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
    var topLayer = L.mapbox.tileLayer('lxbarth.map-vtt23b1i').addTo(map);
    topPane.appendChild(topLayer.getContainer());
    topLayer.setZIndex(9);

Here is a fiddle illustrating my problem - could anyone demonstrate how to get my json features in front of the markers?

Answer 1

The only thing I suggest is using something other than markers for the layer that is to go on the bottom.

Try using a circle or point layer instead of a marker layer. That should work.

I reckon markers are designed to always be on top.

Answer 2

I'm not sure if there's a better way to do this than to use CSS.

If you use a web browser's developer tools to inspect your map (or the jsfiddle you linked to), you'll see the markers are all in a div with class leaflet-marker-pane. All the other features (paths) are in another div, this one with class leaflet-overlay-pane.

The problem is that leaflet-overlay-pane has a lower z-index (4) than leaflet-marker-pane (6), so it's always--as far as I can tell--going to be under the markers, no matter what you do in leaflet.

If you really want to change this, you should be able to by overriding the CSS to bump leaflet-overlay-pane up a bit, eg:

.leaflet-overlay-pane {
    z-index: 7;
}