Overlay below tiles in Leaflet.js

Question

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.org/tiles/osm-labels-en/{z}/{x}/{y}.png', {
    maxZoom: 17,
    zIndex: 1000
});
labels.addTo(map);
labels.bringToFront();

Fritz

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? – Frieze

As per @Josh's advice, here's the JSFiddle: jsfiddle.net/michbarsinai/M29Dk/2 – Fritz

Answer 1

The problem is that the entire Tile Layer stack is drawn under the entire Overlay Layer stack and the bringToFront and sendToBack commands 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);

Frieze

Seems not to be fixed in 0.7.3 but in 0.8 dev – Cloudburst

Answer 2

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.org/tiles/osm-labels-en/{z}/{x}/{y}.png', {
    maxZoom: 17,
    zIndex: 1000,
    pane: 'overlayPane'
});

Unreasonable