根据在选择/下拉框中而不是复选框中选择的值动态获取和显示地图图层

Question

I have about 5 map layers as separate json files. Each map layer file is fetched and displayed dynamically using checkbox click. It is working perfectly. My code is as seen given below. i have another requirement to change these 5 checkboxes to a single dropdown. When i select a particular value from dropdown input field it has to display its corresponding layer. And if i select another value from dropdown it has to remove the previously selected map layer and display the corresponding layer of newly selected value. Is it possible to do the same in dropdown?

<div id="inputParentId" />
<input type="checkbox" id="1" onClick="togglejsonLayer(this,'lay1');" />
Layer 1
<input type="checkbox" id="2" onClick="togglejsonLayer(this,'lay2');" />
Layer 2
<input type="checkbox" id="3" onClick="togglejsonLayer(this,'lay3');" />
Layer 3
<input type="checkbox" id="4" onClick="togglejsonLayer(this,'lay4');" />
Layer 4
<input type="checkbox" id="5" onClick="togglejsonLayer(this,'lay5');" />
Layer 5

<div id="map" style="height: 600px; width: 100%;"></div>

<script>
  const mbAttr = "";
  const mbUrl =
    "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=xxxxxxxx";

  const streets = L.tileLayer(mbUrl, {
    id: "mapbox/streets-v11",
    tileSize: 512,
    zoomOffset: -1,
    attribution: mbAttr
  });

  const sattelite = L.tileLayer(mbUrl, {
    id: "mapbox/satellite-v9",
    tileSize: 512,
    zoomOffset: -1,
    attribution: mbAttr
  });

  const map = L.map("map", {
    center: [39.74739, -105],
    zoom: 12,
    layers: [streets]
  });

  var baseLayers = {
    Streets: streets,
    Sattelite: sattelite
  };
  L.control.layers(baseLayers).addTo(map);

  function onEachFeature(feature, layer) {
    var popupContent;
    if (feature.properties && feature.properties.popupContent) {
      popupContent = feature.properties.popupContent;
    }
    layer.bindPopup(popupContent);
  }

  async function getGeojson(checkbox, layerName) {
    if (layers[layerName]) {
      if (checkbox.checked) layers[layerName].addTo(map);
      else map.removeLayer(layers[layerName]);
      return;
    }

    const response = await fetch(`./${layerName}.json`);
    const geojson = await response.json();
    return geojson;
  }

  const layers = {};

  const togglejsonLayer = async (checkbox, layerName) => {
    const geojsonData = await getGeojson(checkbox, layerName);
    const geojson = L.geoJSON([geojsonData], {
      onEachFeature
    });

    const checkId = checkbox.id;
    if (checkbox.checked) {
      layers[layerName] = geojson;
      layers[layerName].addTo(map);
    } else map.removeLayer(layers[layerName]);
  };
</script>

Answer 1

You could use a Layer.Control because it does the same job as JRI mentioned but since you want an implementation outside the map you could the following:

You keep as it was before with a slight change for caching the layers that have been already fetched

async function getGeojson(layerName) {
    const response = await fetch(`./${layerName}.json`);
    const geojson = await response.json();
    return geojson;
}

You can have one variable that keeps all the fetched layers and one to add/remove the current selected layer on the map instantly. Also reuse a clearMap function to empty the map once you are in the caching and not caching mode.

const layerCaching = {};
const currentDisplayedLayer = {};

document.getElementById("layers").onchange = (e) => {
  togglejsonLayer(e.target.value);
};

const clearMap = () => {
    Object.keys(currentDisplayedLayer).forEach((layer) => {
      map.removeLayer(currentDisplayedLayer[layer]);
      delete currentDisplayedLayer[layer];
    });
};

const togglejsonLayer = async (id) => {
  if (id === "0") return clearMap();

  const layerName = `lay${id}`;

  let geojson;
  if (!layerCaching[layerName]) {
     const geojsonData = await getGeojson(layerName);
     geojson = L.geoJSON([geojsonData], { onEachFeature });
  } else geojson = layerCaching[layerName];

  if (Object.keys(currentDisplayedLayer).length > 0) clearMap();

  currentDisplayedLayer[layerName] = geojson;
  if (!layerCaching[layerName]) layerCaching[layerName] = geojson;
  currentDisplayedLayer[layerName].addTo(map);
}

Last but not least you can run a for loop to build dynamically the select items so in case you decide to add more layers in the future with the convention laynumber it will be reall yeasy to do so.

<select name="layers" id="layers"></select>

const layersSelect = document.getElementById("layers");
layersSelect.add(new Option("Select Layer", "0"));
const arrayLength = Array.from(Array(5).keys());

arrayLength.forEach((_, id) => {
  layersSelect.add(new Option(`Layer ${id + 1}`, id + 1));
});

Demo