How to get count of active markers on mapbox map

Question

I've created a map of filterable locations using MapBoxGL. I'd like to include an active count of markers visible to the end user, but don't know where to start to make this happen. Is it possible to call the active markers visible using JavaScript?

Demo

I've attached my HTML and Javascript code below. Any help is appreciated.Thanks in advance.

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 gender = document.querySelector("input[type=radio][name=gender]:checked").value;

   if (gender === 'all') {
      var filtergender = ["in", "gender", 'womens', 'mens', 'co-ed', ''];
   } else {
      var filtergender = ["in", "gender", gender];
   }


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

   if (dining === 'both') {
      var filterdining = ["in", "dining-center", 'yes', 'no'];
   } else {
      var filterdining = ["in", "dining-center", dining];
   }


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

   if (AC === 'both') {
      var filterAC = ["in", "air", 'yes', 'no'];
   } else {
      var filterAC = ["in", "air", AC];
   }


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

   if (upperdivision === 'both') {
      var filterupperdivision = ["in", "upper-division", 'yes', 'no'];
   } else {
      var filterupperdivision = ["in", "upper-division", upperdivision];
   }


   var filters = [
      "all",
      filtertype,
      filterstyle,
      filtergender,
      filterdining,
      filterAC,
      filterupperdivision,


   ]
   map.setFilter('Locations', filters)
}

<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>
<div class="radio-toolbar">
   <p>Gender <br> <span style="font-size: 10px;">(Residence Hall Only)</span></p>
   <input type="radio" id="Womens_Gender" name="gender" value="womens" onclick="ApplyFilters()">
   <label for="Womens_Gender">Womens</label>
   <input type="radio" id="Mens_Gender" name="gender" value="mens" onclick="ApplyFilters()">
   <label for="Mens_Gender">Mens</label>
   <input type="radio" id="Coed_Gender" name="gender" value="co-ed" onclick="ApplyFilters()">
   <label for="Coed_Gender">Co-Ed</label>
   <input type="radio" id="All_Gender" name="gender" value="all" onclick="ApplyFilters()" checked>
   <label for="All_Gender">All</label>
   <br><br>
   <hr>
</div>
<div class="radio-toolbar">
   <p>Connected to Dining Center <br> <span style="font-size: 10px;">(Residence Hall Only)</span></p>
   <input type="radio" id="Yes_Dining" name="dining" value="yes" onclick="ApplyFilters()">
   <label for="Yes_Dining">Yes</label>
   <input type="radio" id="No_Dining" name="dining" value="no" onclick="ApplyFilters()">
   <label for="No_Dining">No</label>
   <input type="radio" id="Both_Dining" name="dining" value="both" onclick="ApplyFilters()" checked>
   <label for="Both_Dining">Both</label>
   <br><br>
   <hr>
</div>
<div class="radio-toolbar">
   <p>Air Conditioning</p>
   <input type="radio" id="Yes_AC" name="AC" value="yes" onclick="ApplyFilters()">
   <label for="Yes_AC">Yes</label>
   <input type="radio" id="No_AC" name="AC" value="no" onclick="ApplyFilters()">
   <label for="No_AC">No</label>
   <input type="radio" id="Both_AC" name="AC" value="both" onclick="ApplyFilters()" checked>
   <label for="Both_AC">Both</label>
   <br><br>
   <hr>
</div>
<div class="radio-toolbar">
   <p>Upper-Division <br> <span style="font-size: 10px;">(Non-First Year Students Only)</span></p>
   <input type="radio" id="Yes_Upper_Division" name="upperdivision" value="yes" onclick="ApplyFilters()">
   <label for="Yes_Upper_Division">Yes</label>
   <input type="radio" id="No_Upper_Division" name="upperdivision" value="no" onclick="ApplyFilters()">
   <label for="No_Upper_Division">No</label>
   <input type="radio" id="Both_Upper_Division" name="upperdivision" value="both" onclick="ApplyFilters()" checked>
   <label for="Both_Upper_Division">Both</label>
   <br><br>
</div>
<hr>

I was able to get a current count by adding this to the end of the Javascript function noted:

var filteredcount = map.queryRenderedFeatures({layers: ['Locations']}).length;

document.getElementById('outputcount').innerHTML = filteredcount + " Results";

The number initially appeared to be incorrect. However, it just appears to be calling early. If I call the function twice it appears to be accurate. Perhaps, there is something I'm missing?

Answer 1

This worked for me:

map.on('render', function() {
    var filteredcount = map.queryRenderedFeatures({ layers: ['Locations'] }).length;
    if(filteredcount == 0){
      document.getElementById('outputcount').innerHTML = "<span style='color:red;'>0 Results <br> Please Adjust Filters</span>";
    } else{
      document.getElementById('outputcount').innerHTML = filteredcount + " Results";
    }


    });