Leaflet divIcons set behind polygon features

Question

I have a polygon layer in my leaflet map (a geoJson layer):

var PolygonLayer = L.geoJson(json, {
style: polygon_style});

With this layer I have DivIcon labels enabled based on basic attributes:

var label = L.marker(polygonCenter, {
            icon: L.divIcon({
                className: 'label',
                html: '<div>' + label + '</div>'
            }),
        }).addTo(map);

I also have some highlight styling for mouseovers and click events.
If possible I would like to have these divIcon labels set behind the polygons, so that mouseover and pointing functions will not be inhibited.
I have tried setting the marker's zIndexOffset and the DivIcon's size to [0,0], but nothing has worked. Is there any way of setting the polygons in front of the labels?

Answer 1

In leaflet the z-index of the panes is set automatically.

I believe it is:

• popup pane
• marker pane
• overlay pane
• tile pane

from top to bottom

the overlay pane is where your polygon layer is. if you adjust the z-index of the marker pane to be behind the overlay pane then your markers should show up behind your polygons.

see this codepen for an example.

http://codepen.io/anon/pen/MKvZZa

css:

#map{width:400px;height:400px;}
.label{background-color:white;}
.leaflet-marker-pane{
  z-index:2
}

javascript:

var map = L.map('map').setView([51.505, -0.09], 13);
var accessToken='insert your mapbox access token here';
var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=' + accessToken, {
    attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
});

mapboxTiles.addTo(map);
var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map)

var myIcon = L.divIcon({
  iconSize: [70, 20],
  iconAnchor: [35, 10],
  className: 'label',
  html: '<div>' + 'test label' + '</div>'
})

L.marker([51.508, -0.11], {
    icon: myIcon
}).addTo(map);