Trying to use bringToFront to order combined tile layers layergroup for leaflet basemap

Question

I've combined a from a geoserver WMS tilelayer (trails) seperately with a mapBox streets-baseic and mapbox sateline using LayerGroup to form two basemaps, "Streets" and "Imagery" available for a leaflet map. I'm wanting the WMS trails to become part of these base maps and not be an overlay users can control. I'm new to leaflet and am having trouble with ordering of the TileLayers within the streets layer group.

The map starts with the trails on top of the streets basemap fine. The trails will still display over the sateline imagery when switching to the Imagery base map. However, when the base map is switched back over to the Streets base map, the trails disappear.

I've tried to implement trails.addTo(map).bringToFront(); after the layer control, thinking it is an ordering issue and even played around with zIndex, without success. I've looked at the follwoing two posts. I could try to remove and re-add the layers each time the base map is switched, but it seems the answer should be simpler.

How to change layer order in leaflet.js

https://stackoverflow.com/questions/12848812/layer-ordering-in-leaflet-js

Can anyone tell me how I can order the combined tile layers within the base map?

Here is my code

"use strict";

//map   
var map = L.map('map', {
        center: [IVY.default_latitude, IVY.default_longitude],
        zoom: 14
    });


//default basemap layer

//street layer using mapbox basic
var mapboxbasic = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token=' + IVY.mapbox_api_key, {
        maxZoom: 18
    });

//City Trails
var trails = L.tileLayer.wms('https://bloomington.in.gov/geoserver/publicgis/wms', {
        layers: 'publicgis:BikePedTrails',
        format: 'image/png',
        transparent: true,
        version: '1.1.1'
    });


//aerial layer using mapbox satellite
var mapboxsat = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets-satellite/{z}/{x}/{y}.png?access_token=' + IVY.mapbox_api_key, {
        maxZoom: 18
    })
;


//Base Map Layer Groups

var streets = new L.layerGroup([mapboxbasic, trails]).addTo(map);
var imagery = new L.layerGroup([mapboxsat, trails]);


/*
//experiment use bringToFront inside layergroup def - no difference
var streets = new L.layerGroup();
    mapboxbasic.addTo(streets).addTo(map);
    trails.addTo(streets).addTo(map).bringToFront();

var imagery = new L.layerGroup();
    mapboxsat.addTo(imagery);
    trails.addTo(imagery).addTo(map).bringToFront();
*/


//layer controls

var basemap = { 'Streets': streets, 'Aerials': imagery}
;


L.control.layers(basemap).addTo(map);

// bring trails to front

//base layer change method

//only works when switching to aerials - not when switching to streets
map.on('baselayerchange', function(layer) {
trails.bringToFront();
});

//these don't make a difference
//trails.addTo(map).bringToFront(); 
//trails.addTo(basemap).bringToFront();

Answer 1

There is actually a very simple way to control the "vertical" order of the tileLayers within the tilePane: option zIndex

http://leafletjs.com/reference.html#tilelayer-zindex

Demo: http://jsfiddle.net/19hjrmpc/8/

Please note that you do not need to combine your tileLayers into LayerGroups to achieve this. If you absolutely need some sort of combinations, it would probably be easier to use scripting to turn ON and OFF the required layers.

With Thomas' solution, you move your trails tileLayer to the overlayPane, which is always above the tilePane (i.e. no matter what zIndex you set to other tileLayers, they will never be on top of it), but I am not aware of another out-of-the-box solution than Layers Control to put a tileLayer in it.

Answer 2

I don't have a clean solution but if you don't use other overlays a quick and dirty workaround would be to use an overlay object in your Layer Control and set it to display:none;

https://jsfiddle.net/expedio/19hjrmpc/