WMS layer not visible while clicking Leaflet's grouped basemap layers

Question

I have a webpage that adds Geoserver's WMS layer to the OSM basemap and also provide GetFeatureInfo on map click. The webpage works fine. The code was adapted from here. For the sake of tidiness, I am not reposting the code.

I want to add multiple basemap layers to my webpage. I did it via Leaflet's grouped layers control. Here is the code.

// OSM
var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
var osmURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = '&copy; ' + osmLink;
// Carto    
var cartoLink = '<a href="http://cartodb.com/attributions">CartoDB</a>';
var cartoURL = 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png';
var cartoAttrib = '&copy; ' + osmLink + ' &copy; ' + cartoLink;

//Creation of map tiles
var osmMap = L.tileLayer(osmURL, {attribution: osmAttrib});
var cartoMap = L.tileLayer(cartoURL, {attribution: cartoAttrib});

    // Base layers definition and addition
        var baseLayers = {
            "Carto Dark": cartoMap,
            "OSM": osmMap
        };
    
    // Map creation
     var map = L.map('map', {
        layers: [osmMap],
        center: [Lat, Lon],
        zoom: 12
      });   
    
 // Geoserver WMS
var url = "WMS link URL";

    L.tileLayer.betterWms(url, {
        layers: 'my_layer:my_layer',
        transparent: true,
        tiled: true,
        format: 'image/png'
      }).addTo(map);

    //Add baseLayers to map as control layers
    L.control.layers(baseLayers,null, {position: 'bottomright'}).addTo(map);

The problem with the above code is, When I reload the webpage, it shows the WMS layer added to the OSM basemap. GetFeatureInfo also works fine. But as soon as, I click on the layer control/switching panel, the WMS layer becomes invisible (or goes in the background) while GetFeatureInfo still works.

How can I fix this issue?

I only want to show the same WMS layer on all basemaps (via layer control switching) while GetFeatureInfo is still enabled on map click.

Answer 1

Vertical order of layers in Leaflet is regulated through so called map panes (see https://leafletjs.com/reference.html#map-pane). All tiled layers are assigned to tilePane, display order of layers on that pane is order of adding layers to the map. If layer is hidden and then showed again, it goes to the top.

If you want to keep your WMS layer on the top all time, you have to assign it to map pane with higher zIndex than tilePane, which has zIndex of 200.

Code could then look something like this:

wmsPane = map.createPane('wmsPane');
wmsPane.style.zIndex = 250;

L.tileLayer.betterWms(url, {
  layers: 'my_layer:my_layer',
  transparent: true,
  tiled: true,
  format: 'image/png',
  pane: wmsPane
}).addTo(map);