Boolean Intersection Filtering in Carto.js

[urbanscape]

Context

I have a neighborhood dataset indicating boolean values by building lots for various indicators (i.e. within a special district, 10-minute walking distance to a subway station, below the average median income, etc.). The goal of this interactive map is to create a check-box for each of these indicators, and once checked, will display all TRUE values for that indicator. When more than one indicator is checked, it will find the boolean intersection value and display building lots where TRUE for all checked indicators.

Steps to Reproduce

1. Create input type in HTML <input type=”checkbox” name=”[column name]” id=”[column name]” value=”T” unchecked>
2. Create filter.Category(‘[feature name]’, {in: })
3. Add filters source.addFilters([feature1, feature2, feature3, ...])
4. Apply filters for each feature
5. Apply registerListeners()

Current Result

Console.log prints the selection of features only selected from the check-box and pulls in TRUE values for these features as an array. When 2 features are selected:

>(2) [Array(2), Array(2)]
>>0: [“featureName1”, “T”]
>>1: [“featureName2”, “T”]

However, the map keeps showing the intersection of all features (whether selected or not selected) in the database.

Expected result

When one check-box is selected, the map will display all TRUE values for that feature. When multiple check-boxes are selected, the map will only display values that are TRUE for all checked features -- intersection of TRUE for all features.

1. Console.log seems to be separating out each feature that is selected but the map does not show the corresponding results.
2. Is the issue with the way addFilters function is formatted?

Browser and version

Chrome Version 89.0

Code

HTML:

<input type="checkbox" name="featureName1" id="featureName1" value="T" unchecked>
<input type="checkbox" name="featureName2" id="featureName2" value="T" unchecked>

Script:

const source = new carto.source.SQL('SELECT * FROM dataset');

function getSelectedTypes () {
      const envCheckboxes = [...document.querySelectorAll('#controls input[type=checkbox]')];

      const values = [];

      envCheckboxes.forEach(input => input.checked ? 
                                 values.push([input.name, input.value]):null);

      return values;
    }

const filter1 = new carto.filter.Category('featureName1', {in: getSelectedTypes()});
const filter2 = new carto.filter.Category('featureName2', {in: getSelectedTypes()});

source.addFilters([filter1, filter2]);

function applyFilter1 () {
	filter1.setFilters({in: getSelectedTypes()})};
function applyFilter2 () {
	filter2.setFilters({in: getSelectedTypes()})};

function registerListers() {
	const envCheckboxes = [...document.querySelectorAll('#controls input[type=checkbox]')];

	const value1 = [ ]
	envCheckboxes.forEach(input => {
if (input.name === ‘featureName1’) {
value1.push(input)
}});
const value2 = [ ]
	envCheckboxes.forEach(input => {
if (input.name === ‘featureName2’) {
value1.push(input)
}});

value1.forEach(
input => input.addEventListener(‘click’, () => applyFilter1()));
value2.forEach(
input => input.addEventListener(‘click’, () => applyFilter2()));
}

const layer = new carto.layer.Layer(source,style)

client.addLayer(layer);
client.getLeafletLayer().addTo(map);
registerListeners();