Leaflet Z-Index – How to Change Leaflet Map Panes Layering Order

leafletz-index

Leaflet maintains that the Map panes elements contain all layers added to the map. The difference between many of the Map panes is strictly the z-index order of layering.

I would like to use a combination of lvector.CartoDB layers, which are essentially overlayPane layers, with TileLayer, such as GeoIQ Acetate-bg and labels.

This is the ordering of the elements as they are added the map:

tileLayer1 = new L.TileLayer();
map.add(tileLayer1);  // add first layer to map

cartoDBLayer1 = new lvector.CartoDB();
cartoDBLayer.setMap(map); // add second layer to map

tileLayer2 = new L.TileLayer();
map.add(tileLayer2);  // add third layer to map

What returns is a map with layers in this order:

tileLayer1,tileLayer2,cartoDBLayer1

tileLayer1 and tileLayer2 are situated in the HTMLElement: TilePane and cartoDBLayer1 is in HTMLElement: overlayPane.

Is there any way to force cartoDBLayer1 to render in the TilePane, such that it falls in order of the z-index that it is added to the map in…

i.e. 

z-index[0]:tileLayer1
z-index[1]:cartoDBLayer1
z-index[2]:tileLayer2

Best Answer

Update Sept 2014

Leaflet now supports setting the zIndex. Thanks to @knutole in the comments for letting me know.

Old Answer

Have you seen this issue created one the LeafLet github repo:

https://github.com/Leaflet/Leaflet/issues/167

try to use

 addLayer(layer,true);

to add a tile layer to the bottom. I'm afraid that's all there is and this second optional argument is not even documented.

Related Question