admin管理员组

文章数量:1204400

Could someone help me to figure out how to set a leaflet overlay OFF by default when adding it to the map, please? For instance, setting the CITIES layer OFF on the map, as shown in the code below. The point is to have only the STATES layer ON and the CITIES OFF by default.

var baseMaps = {
    "Grayscale": grayscale, 
    "Streets": streets
};

var overlayMaps = {
    "Cities": cities, // Need to set OFF over the map
    "States": states  // Need to set ON  over the map
};

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

Could someone help me to figure out how to set a leaflet overlay OFF by default when adding it to the map, please? For instance, setting the CITIES layer OFF on the map, as shown in the code below. The point is to have only the STATES layer ON and the CITIES OFF by default.

var baseMaps = {
    "Grayscale": grayscale, 
    "Streets": streets
};

var overlayMaps = {
    "Cities": cities, // Need to set OFF over the map
    "States": states  // Need to set ON  over the map
};

L.control.layers(baseMaps, overlayMaps).addTo(map);
  • javascript
  • css
  • html
  • leaflet
Share Improve this question asked Sep 4, 2017 at 21:04 HelpOverFlowHelpOverFlow 3351 gold badge3 silver badges11 bronze badges
Add a comment  | 

3 Answers 3

Reset to default 18

You should not add it to the map in the first place. Somewhere before that code you posted you initialize the cities layer and add it to the map. Otherwise it wouldn't be on the map. For example:

var cities = new L.GeoJSON(...);
cities.addTo(map);

//Or

var cities = new L.GeoJSON(...);
map.addLayer(cities);

Now when you add that to your layer control it's checkbox is automaticly checked by the control because it's already added to your map.

Example added after comment for clarification. Here is one layergroup added to the map and the other is not. Both are added to the layer control. Only the one that is added to the map is checked in the control:

var map = new L.Map('leaflet', {
    center: [0, 0],
    zoom: 0,
    layers: [
        new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        })
    ]
});

// LAYERGROUP WITH ADD TO MAP
var layerGroup1 = new L.LayerGroup([
    new L.Marker([25, 25])
]).addTo(map);

// LAYERGROUP WITHOUT ADD TO MAP
var layerGroup2 = new L.LayerGroup([
    new L.Marker([-25, -25])
]);

var layerControl = new L.Control.Layers(null, {
    'Group 1': layerGroup1,
    'Group 2': layerGroup2
}).addTo(map);
body {
    margin: 0;
}

html, body, #leaflet {
    height: 100%;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet 1.0.3</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="application/javascript" src="//unpkg.com/[email protected]/dist/leaflet.js"></script>
  </body>
</html>

I can't vote Up, but I agree your apportation, It works! My code:

var cities = L.layerGroup().addTo(mymap);

L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

var poligons = L.layerGroup();
L.polygon([[41.5040,1.8047],[41.5037,1.8237],[41.4935,1.82467],[41.4955,1.80210]]).bindPopup('A great polygon').addTo(poligons);

var overlays = {
    "Cities": cities,
    "<span style='color:red;'>Polígons<span>": poligons
};

L.control.layers(null,overlays,{collapsed:false}).addTo(mymap);

if you want to turn the layer off by default, you can set the checked of input element to false after you add all the layer to map, and after all click a random input element of layer will make it work.

for example : i only want to keep the first layer, and set others layer off by default.

// add the all layer to map
L.control.layers(basemaps, markerGroups).addTo(map);
// this can get all input element of layer
var click_elements = document.getElementsByClassName("leaflet-control-layers-selector");
// set all layers off in addtion to the first layer
for (let i = 1;i < click_elements.length;i++) {
     click = click_elements[i];
     click.checked = false;
}
// and finally, make a click event
var first_layer = click_elements[0];
first_layer.click();

本文标签： javascriptSet Leaflet Overlay Off in the Layer ControlStack Overflow

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