I am trying to use Leaflet Layers Control with base layers, as in the docs's example... And it is not working

REAL CASE:

var bing_options = {
    bingMapsKey: BING_KEY,
    attribution: attribMapBase+' BING',
    culture: 'pt'
};
var 
  lay_mapbox = L.tileLayer(MAPBOX_URL+MAPBOX_KEY, {
    attribution: attribMapBase+' MapBOX',
    id: 'mapbox.streets'
  }),
  lay_bing = L.tileLayer.bing(bing_options)
;

var mymap = L.map('mapid', {
    center: [-23.56149,-46.655953],
    zoom: 20,
    layers: [lay_mapbox, lay_bing]
});
L.control.layers({
    "Standard": lay_mapbox,
    "BING": lay_bing
}).addTo(mymap);
lay_mapbox.addTo(mymap); //  set as default... NOT WORKING!

Please see the use of the last mand, it is not working.

I am trying to use Leaflet Layers Control with base layers, as in the docs's example... And it is not working

REAL CASE:

var bing_options = {
    bingMapsKey: BING_KEY,
    attribution: attribMapBase+' BING',
    culture: 'pt'
};
var 
  lay_mapbox = L.tileLayer(MAPBOX_URL+MAPBOX_KEY, {
    attribution: attribMapBase+' MapBOX',
    id: 'mapbox.streets'
  }),
  lay_bing = L.tileLayer.bing(bing_options)
;

var mymap = L.map('mapid', {
    center: [-23.56149,-46.655953],
    zoom: 20,
    layers: [lay_mapbox, lay_bing]
});
L.control.layers({
    "Standard": lay_mapbox,
    "BING": lay_bing
}).addTo(mymap);
lay_mapbox.addTo(mymap); //  set as default... NOT WORKING!

Please see the use of the last mand, it is not working.

• javascript
• leaflet

Share Improve this question Follow edited Dec 22, 2018 at 5:10 ghybs 53.6k66 gold badges8787 silver badges114114 bronze badges asked Dec 21, 2018 at 10:13 Peter KraussPeter Krauss 14k2828 gold badges185185 silver badges333333 bronze badges 5

• 2 baseMaps['Grayscale'].addTo(map); – IvanSanchez Commented Dec 21, 2018 at 10:35
• oh, and BTW please don't ment on 5-year-old Leaflet issues on github. – IvanSanchez Commented Dec 21, 2018 at 10:43
• Same answer as on the linked dup - the control picks up the layers that are added to the map when you add the control. If that's not elegant enough for you, you could extend the control. – peeebeee Commented Dec 21, 2018 at 10:57
• Hi @IvanSanchez, please check my "real case", not working with your clues. – Peter Krauss Commented Dec 21, 2018 at 14:48
• Hi @peeebeee, I edited, it is not only a elegancy problem, it is not working... I included a "REAL CASE" to you. – Peter Krauss Commented Dec 21, 2018 at 23:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

With your real case MCVE it is now possible to understand your issue and provide you with help relevant to your exact situation.

So let's see the mentioned docs / tutorial: (emphasis mine)

Also note that when using multiple base layers, only one of them should be added to the map at instantiation, but all of them should be present in the base layers object when creating the layers control.

Now let's see the docs about layers map instantiation option:

Array of layers that will be added to the map initially

So when you do:

var mymap = L.map('mapid', {
  center: [-23.56149,-46.655953],
  zoom: 20,
  layers: [lay_mapbox, lay_bing] // Offending line
});

...you are actually adding multiple base layers to your map. Since they are already on map, lay_mapbox.addTo(mymap) does not change anything.

Simply do not add all of them initially, then you can selectively choose which one should be visible at start up:

var
  lay_mapbox = L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
  }),
  lay_bing = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
  });

var mymap = L.map('mapid', {
  center: [-23.56149, -46.655953],
  zoom: 20,
  // layers: [lay_mapbox, lay_bing] // Offending line
});
L.control.layers({
  "Standard": lay_mapbox,
  "BING": lay_bing
}, null, {
  collapsed: false
}).addTo(mymap);
lay_mapbox.addTo(mymap); //  set as default

html,
body,
#mapid {
  margin: 0;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg./[email protected]/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script>

<div id="mapid"></div>

Now what may have misled you is that in the mentioned tutorial, the example uses the map layers option to initially add 1 base layer and 1 overlay:

var map = L.map('map', {
  center: [39.73, -104.99],
  zoom: 10,
  layers: [grayscale, cities] // 1 base layer, 1 overlay
});

...whereas the Layers Control is supplied with 2 base layers, 1 of them being in mon with the above initially added layers:

var baseMaps = {
  "Grayscale": grayscale, // Initially added to the map
  "Streets": streets // Left alone
};

var overlayMaps = {
  "Cities": cities // Initially added to the map
};

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