1

I have a series of esri leaflet layers in a variable called "baseLayers" but want to initiate the map with all of them turned off by default inside the layer control box. I've tried playing with the L.control.layers method options but can't find anything that works. What I have currently is this:

L.control.layers(null, baseLayers, {collapsed:false}).addTo(map);

The 'addTo(map)' command is what I think causes all layers to show up as enabled in the layer control box by default, but if I remove that part of the code then the layers just don't show up at all in the control box. Any ideas?

  • I wanted the opposite, to turn my layers on by default. Thanks to your question and the answers provided I recognized I was missing the addTo(map) call. I was mistakenly using only addTo(group). Thanks! – Germán Carrillo Jan 23 '17 at 20:57
  • Glad to know! Best of luck :) – spartmar Jan 23 '17 at 20:58
1

have you already seen this helpful tutorial?

http://leafletjs.com/examples/layers-control/

because the control expects a object composed of basemaps (that can only be displayed one at a time) to be passed to the constructor in the first position and an object composed of overlays that can be checked on and off individually to be passed in the second position, the variable name you've chosen a bit confusing.

The 'addTo(map)' command is what I think causes all layers to show up as enabled in the layer control box by default

the layers control addTo() method doesn't have any control over individual layer visibility, it just ensures that the control itself is displayed on top of the map.

using the live sample referenced in the tutorial above as an example, the reason the cities LayerGroup is displayed by default is because the layer was added to the map back when it was constructed.

/* 
 if you remove 'cities' from the array below
 the layer will not be drawn on the map 
 and its checkbox will be 'unchecked'  
*/
var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [grayscale, cities]
});
  • 1
    So pretty much removing the "addTo(map)" method from the original instantiation of all my layers is what fixed the problem - I still added the layer control box with 'L.control.layers', but because the layers weren't on the map already when I created them, I was able to create a layer control box with all my layers unchecked by default. Thanks! – spartmar Jan 20 '17 at 21:09
  • its my pleasure. – John Gravois Jan 21 '17 at 10:38
0

Have you tried setting the opacity of each of the layers to zero when you instantiate the map?

From Leaflet (http://leafletjs.com/examples/geojson/):

var myLines = [{
    "type": "LineString",
    "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
    "type": "LineString",
    "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];

var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
};

L.geoJSON(myLines, {
    style: myStyle
}).addTo(map);

In the above example, you would need to add the style object as part of your add to map call. What type of data do you have in each of your layers?

FWIW, have you thought about using MapBox? There is a a handy function where you can set the visibility in the layout property to none. This allows you to instantiate a lot of layers before you start bothering the GPU with rendering anything. We recently went through a project with >500 layers and the GPU died when trying to use opacity only.

https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/

  • 1
    Dan, thanks for your help. Upon reading your answer I realized that my question was not clear enough and didn't include all the details. I am using the esri leaflet api, and need to have my layers turned off by default in the layer control box within the map. Is this possible? Thanks! – spartmar Jan 18 '17 at 1:04
0

Just in case it helps anyone, this is the example code that ended up working for me:

    var parks = L.esri.featureLayer({
    url: parksURL,
    pane: 'parks_pane',
    style:{
        color: '#2EFE64',
        weight: 2,
        opacity: 0.85,
        fillOpacity: 0.85
    },
    onEachFeature: function (feature, layer) {
         layer.bindPopup('<b>Park: </b>' + '<br>' + 'Name  --  ' + feature.properties.FORMAL_NAM + '<br>' + 'Address  --  ' + feature.properties.ADDRESS_LI);
    }
  });    <!-- .addTo(map) removed originally from this line so checkboxes aren't turned on by default -->

var baseLayers = {
   "Parks": parks,
    etc.
};

L.control.layers(null, baseLayers, {collapsed: false}).addTo(map);

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.