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);
