Leaflet layers Z-index

Question

I need to set z-index (control what is in foreground) between leaflet layers.

It is possible to e.g. control between 2 (or more) geoJson layers or between 2 (or more) ImageOverlay layers, with bringToFront, bringToBack functions.

L.geoJson layer is always over L.imageOverlay layer and I need to set imageOverlay to be over GeojJson.

Is this possible in Leaflet?

Answer 1

Yes, but not using bringToFront and bringToBack. You need to use custom panes in the 1.0.0 version. See this post on GIS.SE and this tutorial on the Leaflet site. To summarize, you need to create a new pane for your image overlay, set its z-index, and then set the pane option when you create the layer. The following will add an image overlay above your GeoJSON layers:

map.createPane('imagePane');
map.getPane('imagePane').style.zIndex = 401;
var imageLayer = L.imageOverlay(imageUrl, imageBounds, {
  pane: 'imagePane'
}).addTo(map);

Of course, you can also place GeoJSON layers in their own pane(s) and manipulate their z-indexing as well.