I am working on leaflet project, where more than 50 markers on the map need to be filtered with ~ 10 checkboxes. The filters will control the visibility of the markers.

Right now, my approach is to add a corresponding class name to each marker for each filter criteria. I am worried assigning 10 class names for more than 50 markers in the script will slow the loading time. 

Here is the link 
<http://jbk1109.github.io/hiking-info.html>

Here is my code: the markers are created based on the geojson data, and class names are added in style function

```
<div id="distanceFilterContainer">

<input type="checkbox" name="checkboxField" class ="distanceFilter" id="short">
<label> Under 3 miles </label>

<input type="checkbox" name="checkboxField" class ="distanceFilter" id="medium">
<label> 3-8 miles </label>

<input type="checkbox" name="checkboxField" class ="distanceFilter" id="long">
<label> 8-12 miles </label>

</div>

geojson = L.geoJson(data,{
    onEachFeature: featureEvent,
    pointToLayer:function(feature, latlng){
        // console.log(latlng.lat)
        return L.circleMarker(latlng, geojsonMarkerOptions);
    },
    style: style
}).addTo(mymap)

function style(feature){
    console.log(feature)
    var length;
    if (feature.properties.Length <= 3.0){
        length = " short"
    }
    else if (feature.properties.Length > 3 && feature.properties.Length < 8)
    {
        length = " medium"
    }
    else if (feature.properties.Length >= 8.0){
        length =" long"
    }
    console.log(feature.properties.Name + length)
    return {className : feature.properties.Name + length}

}

document.getElementById("short").addEventListener("change",handleDistanceFilter)
    document.getElementById("medium").addEventListener("change",handleDistanceFilter)
    document.getElementById("long").addEventListener("change",handleDistanceFilter)

function handleDistanceFilter(e){
    var x = e.target.id
    console.log(x)
    if (!e.target.checked){
        var filtered = document.getElementsByClassName(x)
        console.log(x)
        for (var i =0; i< filtered.length; i++){
            filtered[i].classList.remove("hide")
            // filtered[i].style.visibility = 'visible';
        }
    }
    else{
        var filtered = document.getElementsByClassName(x)
        for (var i =0; i< filtered.length; i++){
            console.log(x)
            filtered[i].classList.add("hide")
            // console.log(filtered)
            // filtered[i].style.visibility = 'hidden';
        }
    }
    // console.log(e.target.checked)

}

```