I have a Leaflet.js map, with a base tile layer, a label tile layer, and some overlays. I need to put the label tile layer ABOVE the overlays. I tried bringing it to front using bringToFront() - for no avail. Here's the code:

map.addLayer( new L.StamenTileLayer("toner-lines") );
...// more code, loading the overlays, etc
var labels = L.tileLayer('http://{s}.www.toolserver/tiles/osm-labels-en/{z}/{x}/{y}.png', {
    maxZoom: 17,
    zIndex: 1000
});
labels.addTo(map);
labels.bringToFront();

I have a Leaflet.js map, with a base tile layer, a label tile layer, and some overlays. I need to put the label tile layer ABOVE the overlays. I tried bringing it to front using bringToFront() - for no avail. Here's the code:

map.addLayer( new L.StamenTileLayer("toner-lines") );
...// more code, loading the overlays, etc
var labels = L.tileLayer('http://{s}.www.toolserver/tiles/osm-labels-en/{z}/{x}/{y}.png', {
    maxZoom: 17,
    zIndex: 1000
});
labels.addTo(map);
labels.bringToFront();

• javascript
• maps
• leaflet

• My guess is that the bringToFront() is bringing it to the front of the Tile Layer, which is still below the Overlay layer. Would you mind creating a jsFiddle replicating the problem so that could be confirmed and a workaround made? – Josh Commented Nov 13, 2013 at 4:43
• As per @Josh's advice, here's the JSFiddle: jsfiddle/michbarsinai/M29Dk/2 – Michael Bar-Sinai Commented Nov 13, 2013 at 15:17

2 Answers 2

The problem is that the entire Tile Layer stack is drawn under the entire Overlay Layer stack and the bringToFront and sendToBack mands only affect layers within each respective stack. There is a bug report detailing this on Leaflet's github site. It might be fixed in 0.7, but it has already been pushed back a couple of times.

In that bug report, they reference a workaround by jfirebaugh. That should do what you want. It adds the, in your case, label layer as a separate DOM layer ontop of the map after everything else has been drawn, using this code:

var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var topLayer = L.mapbox.tileLayer('lxbarth.map-vtt23b1i').addTo(map);
topPane.appendChild(topLayer.getContainer());
topLayer.setZIndex(9);

For those searching nowaday with Leaflet 1.7.x/1.8.x, you can set the pane for the tilelayer.

Default is the tile pane but you can add this parameter pane: 'overlayPane' to add the tilelayer to overlay pane. So the code above would look like this :

var labels = L.tileLayer('http://{s}.www.toolserver/tiles/osm-labels-en/{z}/{x}/{y}.png', {
    maxZoom: 17,
    zIndex: 1000,
    pane: 'overlayPane'
});