z-index of geoJSONs and imageOverlays in Leaflet

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?

Answer

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:

map.createPane('newPane1');

map.createPane('newPane2');
map.createPane('newPane3');
[etc...]

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;
[etc...]

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:

http://fiddle.jshell.net/nathansnider/4gmqf0ug/