admin管理员组

文章数量:1418104

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 edited Dec 22, 2018 at 5:10 ghybs 53.6k6 gold badges87 silver badges114 bronze badges asked Dec 21, 2018 at 10:13 Peter KraussPeter Krauss 14k28 gold badges185 silver badges333 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

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);

本文标签： javascriptDefault item of a Layer ControlStack Overflow

版权声明：本文标题：javascript - Default item of a Layer Control - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745177947a2646331.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。