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();
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);
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'
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With