Toggle Leaflet JS KML layers individually

Question

I'm creating a map with multiple KML layers, and have been able to get the KMLs to appear, however, implementing a simple checkbox to turn each layer on and off is proving to be a problem. I've tried omnivore, and several other plugin things, but none seem to work properly.

HTML Toggle:

<input type="checkbox" id="toggleScottsdale" onclick="toggleScottsdale();"><label>&nbsp;SCT AIR</label><br>
<input type="checkbox" id="toggleSilo" onclick="toggleSilo();"><label>&nbsp;MES SLO</label> 

Example KML Layer (there are 5 in total):

fetch('urltofile1.kml')
        .then(res => res.text())
        .then(kmltext => {
            // Create Scottsdale Overlay
            const parser = new DOMParser();
            const kml = parser.parseFromString(kmltext, 'text/xml');
            const scottsdale = new L.KML(kml);
            map.addLayer(scottsdale);
        }); 
fetch('urltofile2.kml')
        .then(res => res.text())
        .then(kmltext => {
            // Create Silo Overlay
            const parser = new DOMParser();
            const kml = parser.parseFromString(kmltext, 'text/xml');
            const scottsdale = new L.KML(kml);
            map.addLayer(silo);
        }); 

Toggle Function:

function toggleScottsdale() {
        if(map.addLayer(scottsdale)) {
            map.removeLayer(scottsdale);
        } else {
            map.addLayer(scottsdale);
        }
    }; 
function toggleSilo() {
        if(map.addLayer(silo)) {
            map.removeLayer(silo);
        } else {
            map.addLayer(silo);
        }
    };

Not only does console return that scottsdale is undefined, but I am unsure how to replicate a toggle for each layer.

Answer 1

One possible solution would be to store KML overlays in some global object, using overlay name as property name, and then use general toggleOverlay function that add/removes overly to the map on the basis of checkbox id that corresponds to overlay name.

Code could then look something like this:

HTML

<input type="checkbox" id="scottsdale" onclick="toggleOverlay(this)" checked><label>&nbsp;SCT AIR</label><br>
<input type="checkbox" id="silo" onclick="toggleOverlay(this)" checked><label>&nbsp;MES SLO</label> 

JS

var overlays = {};

function toggleOverlay(checkbox) {
  var overlay = overlays[checkbox.id];
  if (map.hasLayer(overlay)) {
    if (!checkbox.checked) map.removeLayer(overlay);
    }
  else if (checkbox.checked) {
    map.addLayer(overlay);
  }
}

fetch('urltofile1.kml')
  .then(res => res.text())
  .then(kmltext => {
    const parser = new DOMParser();
    const kml = parser.parseFromString(kmltext, 'text/xml');
    const scottsdale = new L.KML(kml);
    map.addLayer(scottsdale);
    overlays['scottsdale'] = scottsdale;
  }); 
fetch('urltofile2.kml')
  .then(res => res.text())
  .then(kmltext => {
    const parser = new DOMParser();
    const kml = parser.parseFromString(kmltext, 'text/xml');
    const silo = new L.KML(kml);
    map.addLayer(silo);
    overlays['silo'] = silo;
  });