1

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?

  • Welcome to Geographic Information Systems! what software are you using? Please update your question using the edit button or add a relevant tag. – Ian Turton Jan 1 at 17:07
  • Welcome to Geographic Information Systems! Welcome to GIS SE! We're a little different from other sites; this isn't a discussion forum but a Q&A site. Your questions should as much as possible describe not just what you want to do, but precisely what you have tried and where you are stuck trying that. Please check out our short tour for more about how the site works. – Ian Turton Jan 1 at 17:08
  • 1
    @IanTurton I have answer so I propose reopening. – TomazicM Jan 1 at 19:13
  • 1
    The map panes tutorial at leafletjs.com/examples/map-panes literally uses several L.TileLayers, so the answer is "yes". – IvanSanchez Jan 1 at 22:14
  • 1
    It’s ready for you @TomazicM – PolyGeo Jan 2 at 1:37
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);
|improve this answer|||||
  • Thanks for your suggestion! – Amdir Jan 3 at 21:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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