Remove Leaflet overlayMaps layer programmatically

Question

Using Leaflet javascript. I would like my "clear button" to do two things...

1) uncheck all the L.Control layers 2) remove the current overlay from the map

I can do the first easily enough using this code:

var checks = document.querySelectorAll('[type = "checkbox"]'), i;
    function uncheckBoxes() {
        for (i = 0; i < checks.length; ++i) {
            checks[i].checked = false;
        }
    }

The next is a little more tricky. I have tried using the removeLayer() and clearLayers() function but they do not work. I don't see a way in the leaflet documentation to remove an L.control overlayMap layer from the map unless you physically uncheck it yourself.

Any insight into this would be greatly appreciated.

Answer 1

Not exactly sure what is your difficulty in programmatically removing some layers / overlays from your map.

It is normally trivial (map.removeLayer(layer)), and the Layers Control automatically reflects what is happening on the map (in that case, if layer is one of the overlays, its associated checkbox will become unticked).

As for removing all your overlays from map, you just need to keep a reference to those overlays, loop through them and remove them from the map:

var overlays = {
  'Name 1': someLayer,
  'Name 2': someOtherLayer
};

L.control.layers(null, overlays).addTo(map);

// Whenever you want to remove all overlays:
for (var name in overlays) {
  map.removeLayer(overlays[name]);
}

Demo: https://jsfiddle.net/3v7hd2vx/357/