Блог

Мне удалось заставить нижеприведенное работать с помощью людей здесь, но застрял в проблеме JS. В настоящее время моя проблема заключается в том, что на карте теперь отображаются только два маркера, где карп и линь оба = 1 в GeoJSON. То, что я пытаюсь сделать, — это нечто более динамичное:

1. Я бы хотел, чтобы флажки были отключены по умолчанию
2. Я также хотел бы исправить проблему, из-за которой на карте отображаются только результаты, соответствующие carp = 1 и tench = 1. Я бы хотел, чтобы фильтр был динамическим при каждом выборе, а не ограничивал результаты от выключения

https://jsfiddle.net/chrisjenner/0ez7k8um/

Код фильтра:

 <div class="input" id="carp">
      <input type="checkbox" class="carp" name="1" value="1" checked="true">
      <label for="1">Carp</label>
    </div>

    <div class="input" id="tench">
      <input type="checkbox" class="tench" name="2" value="1" checked="true">
      <label for="2">Tench</label>
    </div>

const lakes = L.geoJSON(null, {
  style: function(feature) {
    return {
      color: feature.properties.color
    };
  },
  filter: (feature) => {
    const isCarpChecked = checkboxStates.carp.includes(feature.properties.carp)
    const isTenchChecked = checkboxStates.tench.includes(feature.properties.tench)
    return isCarpChecked amp;amp; isTenchChecked //only true if both are true
  }
}).bindPopup(function(layer) {
  return layer.feature.properties.name;
}).addTo(map);

function updateCheckboxStates() {
  checkboxStates = {
    carp: [],
    tench: []
  }

for (let input of document.querySelectorAll('input')) {
    if (input.checked) {
      var numValue = parseInt(input.value);
      switch (input.className) {
        case 'carp':
          checkboxStates.carp.push(numValue);
          break
        case 'tench':
          checkboxStates.tench.push(numValue);
          break
      }
    }
  }
}

for (let input of document.querySelectorAll('input')) {
    input.onchange = (e) => {
    lakes.clearLayers()
    updateCheckboxStates()
    lakes.addData(lakes_data)
  }
}


updateCheckboxStates()
lakes.addData(lakes_data)