There have been several Github issues raised regarding Leaflet z-indexing of layers, and I'm still not clear where things stand. I think my question is quite simple:

Is it possible to set any stacking order of a mixture of geoJSON and imageOverlay layers? If so, how, and can it be done in 0.7.7, or only in 1.0.0-beta?

| improve this question | | | | |

The only way I know of to arbitrarily manipulate layer z-indexing relies on the pane features introduced in 1.0.0-beta, specifically the map.createPane and map.getPane methods combined with the ability to set a pane option for each layer.

You start by creating new panes for each of your layers to occupy:


You can then assign your layers to whichever pane you want by setting pane: 'newPane1' (or pane: 'newPane2' etc.) in the layer options.

To reorder the panes (and the layers within them), you can use the getPane method like so:

map.getPane('newPane1').style.zIndex = 402;
map.getPane('newPane2').style.zIndex = 399;
map.getPane('newPane3').style.zIndex = 401;

One important thing to know is that while the documentation for 1.0b still describes the zIndex values as being 2 for tiles, 4 for overlays etc., these values have actually been multiplied by 100 in the new beta, so whenever you create a new pane, it gets a zIndex of 400 by default. The rendering order of different panes with the same zIndex appears to be determined by the order in which they were created (panes created later are on top of those created earlier).

Here's a somewhat overly-complicated example fiddle, with sliders to adjust the z-indices of a few different layers:


| improve this answer | | | | |
  • Many thanks for all the details. I'll wait for 1.0.0 full release to try to use this technique. – Tom Chadwin Feb 2 '16 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.