How to apply multiple filters to mapbox locations

Question

I've created a map for various buildings on a college campus and am trying to setup a navigational menu for the end user to select multiple filters to show only the applicable locations.

I've had success in creating each filter, however the filters don't communicate with each other. How do I call the value of each filter each time a filter is selected?

Demo

HTML:

<div class="radio-toolbar">
  <p>Type</p>
  <input type="radio" id="Apartment_Type" name="type" onclick="Apartment_Type()">
  <label for="Apartment_Type">Apartment</label>


<input type="radio" id="Residence_Hall_Type" name="type" onclick="ResidenceHall_Type()">
  <label for="Residence_Hall_Type">Residence Hall</label>


  <input type="radio" id="Both_Type" name="type" onclick="Both_Type()" checked>
  <label for="Both_Type">Both</label>
  <br><br>
  <hr>
</div>

<div class="radio-toolbar">
  <p>Style <br> <span style="font-size: 10px;">(Residence Hall Only)</span></p>
  <input type="radio" id="Low_Rise_Style" name="style" onclick="Low_Rise_Style()">
  <label for="Low_Rise_Style">Traditional Style (Low Rise)</label>

  <br><br>

<input type="radio" id="High_Rise_Style" name="style" onclick="High_Rise_Style()">
  <label for="High_Rise_Style">Suite Style (High Rise)</label>
  <br><br>


<input type="radio" id="Apartment_Style" name="style" onclick="Apartment_Style()">
  <label for="Apartment_Style">Apartment Style</label>

<input type="radio" id="All_Style" name="style" onclick="All_Style()" checked>
  <label for="All_Style">All</label>
  <br><br>
  <hr>
</div>

JavaScript:

map.on('load', function Apartment_Type() {
  // Get the checkbox
  var checkBox_apartmenttype = document.getElementById("Apartment_Type");

  // If the checkbox is checked, display the output text
  if (checkBox_apartmenttype.checked == true){
    map.setFilter('Locations', ['==', ['get', 'type'], 'apartment']);
  } else {
  }
});

map.on('load', function ResidenceHall_Type() {
  // Get the checkbox
  var checkBox_halltype = document.getElementById("Residence_Hall_Type");


  // If the checkbox is checked, display the output text
  if (checkBox_halltype.checked == true){
    map.setFilter('Locations', ['==', ['get', 'type'], 'hall']);


  } else {

  }
});

map.on('load', function Both_Type() {
  // Get the checkbox
  var checkBox_bothtype = document.getElementById("Both_Type");


  // If the checkbox is checked, display the output text
  if (checkBox_bothtype.checked == true){
    var bothtype=[
        "all",
        ["in", "type", 'apartment','hall'],
    ]
    map.setFilter('Locations',bothtype)
  } else {
  }
});

map.on('load', function Low_Rise_Style() {
  // Get the checkbox
  var checkBox_lowrisestyle = document.getElementById("Low_Rise_Style");

  // If the checkbox is checked, display the output text
  if (checkBox_lowrisestyle.checked == true){
    map.setFilter('Locations', ['==', ['get', 'style'], 'low rise']);
  } else {
  }
});

map.on('load', function High_Rise_Style() {
  // Get the checkbox
  var checkBox_highrisestyle = document.getElementById("High_Rise_Style");

  // If the checkbox is checked, display the output text
  if (checkBox_highrisestyle.checked == true){
    map.setFilter('Locations', ['==', ['get', 'style'], 'high rise']);
  } else {
  }
});

map.on('load', function Apartment_Style() {
  // Get the checkbox
  var checkBox_apartmentstyle = document.getElementById("Apartment_Style");

  // If the checkbox is checked, display the output text
  if (checkBox_apartmentstyle.checked == true){
    map.setFilter('Locations', ['==', ['get', 'style'], 'apartment']);
  } else {
  }
});

map.on('load', function All_Style() {
  // Get the checkbox
  var checkBox_allstyle = document.getElementById("All_Style");

  // If the checkbox is checked, display the output text
  if (checkBox_allstyle.checked == true){
    var allstyle=[
        "all",
        ["in", "style", 'high rise','low rise','apartment'],
    ]
    map.setFilter('Locations',allstyle)
  } else {
  }
});

Answer 1

Got this working: HTML:

<div class="radio-toolbar">
  <p>Type</p>
  <input type="radio" id="Apartment_Type" name="type" value="apartment" onclick="ApplyFilters()">
  <label for="Apartment_Type">Apartment</label>


<input type="radio" id="Residence_Hall_Type" name="type" value="hall" onclick="ApplyFilters()">
  <label for="Residence_Hall_Type">Residence Hall</label>


  <input type="radio" id="Both_Type" name="type" value="both" onclick="ApplyFilters()" checked>
  <label for="Both_Type">Both</label>
  <br><br>
  <hr>
</div>

<div class="radio-toolbar">
  <p>Style <br> <span style="font-size: 10px;">(Residence Hall Only)</span></p>
  <input type="radio" id="Low_Rise_Style" name="style" value="low rise" onclick="ApplyFilters()">
  <label for="Low_Rise_Style">Traditional Style (Low Rise)</label>

  <br><br>

<input type="radio" id="High_Rise_Style" name="style" value="high rise" onclick="ApplyFilters()">
  <label for="High_Rise_Style">Suite Style (High Rise)</label>
  <br><br>

<input type="radio" id="Apartment_Style" name="style" value="apartment" onclick="ApplyFilters()">
  <label for="Apartment_Style">Apartment Style</label>

<input type="radio" id="All_Style" name="style" value="all" onclick="ApplyFilters()" checked>
  <label for="All_Style">All</label>
  <br><br>
  <hr>
</div>

JavaScript:

function ApplyFilters() {
 
        
var type = document.querySelector("input[type=radio][name=type]:checked").value;

if (type === 'both'){
var filtertype = ["in", "type", 'hall','apartment'];
}else{
var filtertype = ["in", "type", type];
}

var style = document.querySelector("input[type=radio][name=style]:checked").value;

if (style === 'all'){
var filterstyle = ["in", "style", 'low rise','high rise','apartment',''];
}else{
var filterstyle = ["in", "style", style];
}

var filters=[
      "all",
      filtertype,
      filterstyle,      
  ]
  map.setFilter('Locations',filters)
  
};