I'm developing a map application in Leaflet with multiple Layers (Tile-Layer and TopoJSON). I would like a button, which moves the Tile-Layer in front of the other Layers. Therefore I need to put the Tile-Layer into a pane with a z-Index > 400 (see Map Panes). This works fine when initializing the Tile-Layer, but how do I move an existing Tile-layer into another pane in the foreground after having initialised it (change "pane: 'tilePane'" to "pane: 'layerForeground'")?

map.getPane('layerForeground').style.zIndex = 650;

var SWEmean71_00Apr =L.tileLayer('data/maps/e01_swe/tiles/3857_Mittelwert/{z}/{x}/{y}.png', {
maxZoom: 12,
minZoom: 7,
tms: false,
pane: 'tilePane',

1 Answer 1


Leaflet layers can not change panes dynamically. Panes are too tightly coupled to the initialization of the HTMLElements for the layers' containers.

You can, however, change the zIndex of a map pane dynamically. So you can set a unique pane for each of your tilelayers, and change their z-indexes when you need to change their order.

  • Perfect, this is exactly what I was looking for, Thanks!!
    – burtro
    Mar 13, 2017 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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