I am creating a Mapbox map in which I want multiple checkboxes to create an 'and' filter on one layer.
Here's the checkbox parts of my code so far:
<input type="checkbox" id="srBox" name="srBox" value="SustainableRecreation">
<label for="srBox"> Sustainable Recreation</label><br>
<input type="checkbox" id="hlBox" name="hlBox" value="HealthyLandscapes">
<label for="hlBox"> Healthy Landscapes</label><br>
<input type="checkbox" id="ovBox" name="ovBox" value="Overnight">
<label for="ovBox"> Overnight</label><br>
var checkbox = document.getElementById('srBox');
checkbox.addEventListener('change', function() {
if (this.checked) {
map.setFilter('rfovProjects', ['==', ['get', 'SR'], 'Y']);
} else {
map.setFilter('rfovProjects', null);
}
});
var checkbox = document.getElementById('hlBox');
checkbox.addEventListener('change', function() {
if (this.checked) {
map.setFilter('rfovProjects', ['==', ['get', 'HL'], 'Y']);
} else {
map.setFilter('rfovProjects', null);
}
});
var checkbox = document.getElementById('ovBox');
checkbox.addEventListener('change', function() {
if (this.checked) {
map.setFilter('rfovProjects', ['==', ['get', 'OV'], 'Y']);
} else {
map.setFilter('rfovProjects', null);
}
});
If you look at the full map example (https://codepen.io/flyinginsect2/pen/oNoQvNQ), you'll see that if you click Healthy Landscapes and then Overnight, there are a few projects that show up. However, there are no projects that are in both of these categories.
How can I combine these filters?
I have a few more that I need to add in as well.