0

I am having difficulty with layer order. I have 4 layers but zIndex is not working for L.tileLayer. Here's a part of my code: https://pastecode.xyz/view/d726ccb1

 var overlay_Numerydziaek1 = L.tileLayer.wms('http://mapy.geoportal.gov.pl/wss/service/pub/guest/G2_GO_WMS/MapServer/WMSServer', {
    layers: 'NumeryDzialek',
    opacity: 1.0,
    format: 'image/png8',
    transparent: false,
    continuousWorld : true,
    zIndex:110,
}).addTo(map);


var overlay_Dziaki2 = L.tileLayer.wms('http://mapy.geoportal.gov.pl/wss/service/pub/guest/G2_GO_WMS/MapServer/WMSServer', {
    layers: 'Dzialki',
    format: 'image/png',
    uppercase: true,
    transparent: false,
    continuousWorld : true,
    tiled: true,
    info_format: 'text/html',
    opacity: 1,
    zIndex:100,
    identify: false,    
});

map.addLayer(overlay_Dziaki2);  
overlay_Dziaki2.bringToFront()
var overlay_googlemapsstelita_1 = L.tileLayer('http://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}', {
    opacity: 1.0
    zIndex:50,
});
var overlay_OpenStreetMap_1 = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    opacity: 1.0,
    zIndex:10,
});
map.addLayer(overlay_OpenStreetMap_1);
overlay_OpenStreetMap_1.bringToBack()       

With this code var overlay_googlemapsstelita_1 appears on top and the second is var overlay_OpenStreetMap_1. Then var overlay_Numerydziaek1 and var overlay_Dziaki2. I want overlay_Numerydziaek1 to appear on top. How can I do this ? For other non L.tileLayer, zIndex is working fine.

  • I've been also trying overlay_OpenStreetMap_1.setZIndex(100); but still not working :( – Kacper Kaniewski Jan 14 at 20:05
  • If you have a solution to your problem, post it as an answer, please, and mark it as solution. – Stefan Jan 14 at 20:26
2

First off, adding Google Maps tiles via a tile template goes against Google's terms of use. I encourage you to have a look at GoogleMutant.

Second: calls to bringToFront will change the z-index of the tilelayers. Dig a bit into Leaflet's source code. Calls to bringToFront and bringToBack will change the z-index of the TileLayer based on the TileLayers currently added to the map.

Third: See the Leaflet tutorial on map panes for info on how to have finer control of different kinds of layers. Quoting from there:

map.createPane('labels');
map.getPane('labels').style.zIndex = 650;
var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB',
        pane: 'labels'
}).addTo(map);

You might want to add your WMS layers to a different pane which will always be on top of tilelayers in the default pane.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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