I am using LeafletJS and building a custom layers input control with checkboxes to toggle on/off the various map layers.
My goal is to create a "clear all layers" button that, when clicked, will clear all the layers on the map AND remove all the checkmarks from the checkboxes.
The problem:
Toggling the layers off/on works fine when using the custom layers control, but I can't seem to figure out how to remove the checkmarks from the input boxes once the layers are removed from the map.
Here is my setup:
My HTML (note, doing this through L.Control.extend()):
<input type="checkbox" id="airfields" class="check">Airfields
<input type="checkbox" id="docks" class="check">Docks
... and so on
My JS:
$(".check").change(function(){
var layerClicked = $(this).attr("id");
switch(layerClicked){
case "airfields":
if (map.haslayer(airfields)){
map.removeLayer(airfields);
} else {
map.addLayer(airfields);
}
break;
// ...and so on...
}
});
The above code obviously removes the layers from the map, but it doesn't remove the checkmarks from the input element.