I've been struggling to get map filters to work on my Leaflet map. I've got minimal JavaScript or Leaflet knowledge so where I have got to now has been a struggle. I'm essentially trying to do the following
https://jsfiddle.net/chrisjenner/jq1emofz/
I have tried to replicate this but without any joy. I'm sure it's fairly simple but with limited knowledge, I haven't been able to fix it. My version of the above can be found below where I am trying to filter a layer by a Boolean field. Carp and Tench are species and my sample dataset is for lakes. I want to be able to filter by these.
https://jsfiddle.net/chrisjenner/02crteao/64/
Below is my code
<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="1" value="1" checked="true">
<label for="1">Tench</label>
</div>
const lakes = L.geoJSON(lakes_data, {
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 && 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) {
switch (input.className) {
case 'carp':
checkboxStates.carp.push(input.value);
break
case 'tench':
checkboxStates.tench.push(input.value);
break
}
}
}
}
for (let input of document.querySelectorAll('input')) {
input.onchange = (e) => {
lakes.clearLayers()
updateCheckboxStates()
lakes.addData(lakes_data)
}
}
updateCheckboxStates()
lakes.addData(lakes_data)
