Multiple active TileLayers rather than just one?

Question

I was wondering if it's possible to use multiple TileLayers in leaflet at the same time, rather than just having one active? A bit like group layers. In my map I have a base map, and I would like to make another TileLayer with transparent PNG:s where I can have roads, names of places, and so on.

Right now I am following this tutorial to achieve what I want: https://www.hreikin.co.uk/2018/06/07/user-guide-how-to-create-an-interactive-campaign-map-with-leafletjs/

Basically I am working with the following tools: Leaflet as base for the map Zoomify (software) http://www.zoomify.com/ to creat the map Tiles from the image I have made in Photoshop.

The base tile looks like this in the code:

var layer = L.tileLayer.zoomify('./basemap/{g}/{z}-{x}-{y}.jpg', {
    width: 19000,    // MUST be defined.
    height: 10688,   // MUST be defined.
    minZoom: 2,
    maxZoom: 7,
    continuousworld: false,
    noWrap: true,
}).addTo(map);

Then I have a bunch of markers for cities that are grouped into layers. What I currently would want to do is to make multiple basemaps as layers, rather than toggleable.

As you can see on the layer icon in the top right corner you can only have one active basemap at a time: https://hreikin.co.uk/interactive-campaign-map/interactive-campaign-map.html

Does anyone have any suggestions?

Answer 1

You are mentioning group layers in your question and that's actually the right solution for what you want to achieve. You can group several tile layers in one group and add it to the map as single layer.

To have those layers displayed in the right order one above other, map panes, mentioned by @IvanSanchez (https://leafletjs.com/examples/map-panes/), can be used.

Vertical order of panes is controlled by zIndex property of pane. By default tile layers are assigned to tilePane pane, which has zIndex value of 200. Next pane above it is overlayPane with zIndex values of 400, to which all vector overlays are assigned. This tells you you have zIndex values between 200 in 400 available for ordering of tile layers in your group layer.

To achieve what you want, first you create map panes with desired zIndex values, then assign layers to those panes and in the last step create base group layer and add it to the map, with optional overlays.

So let's say you have tile layers layer1, layer2 and layer3, that you want to combine in single base layer, where layer3 should be at the bottom, followed by layer1 and layer2.

map.createPane('paneForLayer1');
map.createPane('paneForLayer2');

map.getPane('paneForLayer1').style.zIndex = 210;
map.getPane('paneForLayer2').style.zIndex = 220;

var layer1 = L.tileLayer.zoomify( ..., {pane: 'paneForLayer1', ... }); 
var layer2 = L.tileLayer.zoomify( ..., {pane: 'paneForLayer2', ... });
var layer3 = L.tileLayer.zoomify( ..., { ... });

baseLayer = L.layerGroup([layer1, layer2, layer3]);
map.addLayer(baseLayer);

.
.
.

L.control.layers(
  {'Base layer': baseLayer},
  {'Overlay1': overlay1, 'Overlay2': overlay2}
).addTo(map);