CODEWITHSUNDEEP
leaflet
ConnorLynch
ConnorLynch

Reputation: 15

Integrating Pane TileLayers with LayerGroup Control (V1.0)

I am trying to find a method of integrating the layer group control with the method of having 2 tile layers visible to enable the labels to sit above the polygons I generate.

http://leafletjs.com/examples/layers-control.html - layergroup guide http://leafletjs.com/examples/map-panes.html - panes guide

My aim is to have the often used dark and light cartodb maps as options - but still making use of the panes functionality.

I have attempted to have something like the below however I don't believe leaflet is capable of handling it in this way.

Has anyone found a method yet to integrate this correctly?

var darkTile = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB'
    }).addTo(map);

    var darkLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB',
        pane: 'labels'
    }).addTo(map);

    var lightTile = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB'
    });//.addTo(map);

    var lightLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB',
        pane: 'labels'
    });//.addTo(map);
    var light = {
        lightTile,
        lightLabels
    };

    var dark = {
        darkTile,
        darkLabels
    };

    var baseMaps = {
        "Light" : light,
        "Dark" : dark
    };

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

Upvotes: 1

Views: 1155

Answers (1)

ghybs
ghybs

Reputation: 53215

  1. Make sure you create your pane explicitly:
map.createPane("labels");
  1. Create Layer Groups to gather your Tile Layers (basemap and labels) instead of plain JS objects. Leaflet will not use your plain objects.
var light = L.layerGroup([
  lightTile,
  lightLabels
]);

var dark = L.layerGroup([
  darkTile,
  darkLabels
]).addTo(map); // Add the group to map, rather than its individual layers.

Demo: http://jsfiddle.net/3v7hd2vx/45/

Upvotes: 0

Related Questions