As to your code, sorry if it is kind of late just saw this about a year and some months later, I think a nice and simple way to do so is what is listed in this codepen example. Hope it helps.
Example:
https://codepen.io/apsolut/pen/rWGEWV
//k00rdinate http://www.mapcoordinates.net/en
//this is MAPbox
//also google API is here: https://appendto.com/2016/09/advanced-google-maps-with-javascript-filtering-and-displaying-information/
L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';
var map = L.mapbox.map('map', 'mapbox.light') .setView([45.2671352, 19.8335496], 6);;
var featureLayerGeoJSON = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"marker-color": "#dc1000",
"marker-size": "medium",
"marker-symbol": "heliport",
"CAT_CODE": "novisad"
},
"geometry": {
"type": "Point",
"coordinates": [
19.8335496,
45.2671352
]
}
},
{
"type": "Feature",
"properties": {
"marker-color": "#2095c8",
"marker-size": "large",
"marker-symbol": "1",
"CAT_CODE": "beograd"
},
"geometry": {
"type": "Point",
"coordinates": [
20.4589216,
44.786568
]
}
},
{
"type": "Feature",
"properties": {
"marker-color": "#dc0000",
"marker-size": "medium",
"marker-symbol": "",
"CAT_CODE": "beograd"
},
"geometry": {
"type": "Point",
"coordinates": [
20.5589216,
44.986568
]
}
},
{
"type": "Feature",
"properties": {
"marker-color": "#f19",
"marker-size": "medium",
"marker-symbol": "3",
"CAT_CODE": "sarajevo"
},
"geometry": {
"type": "Point",
"coordinates": [
18.4130763,
43.8562586
]
}
},
{
"type": "Feature",
"properties": {
"marker-color": "#3bd2d7",
"marker-size": "medium",
"marker-symbol": "2",
"CAT_CODE": "zagreb"
},
"geometry": {
"type": "Point",
"coordinates": [
15.981919,
45.8150108
]
}
},
{
"type": "Feature",
"properties": {
"marker-color": "#dc1000",
"marker-size": "medium",
"marker-symbol": "",
"CAT_CODE": "novisad",
"moj_filter": "mojfilter"
},
"geometry": {
"type": "Point",
"coordinates": [
19.8335496,
45.2671352
]
}
}
]
};
map.featureLayer.setGeoJSON(featureLayerGeoJSON);
// Find and store a variable reference to the list of filters.
var filters = document.getElementById('filters');
// Wait until the marker layer is loaded in order to build a list of possible
// types. If you are doing this with another featureLayer, you should change
// map.featureLayer to the variable you have assigned to your featureLayer.
var makeCheckboxes = function() {
// Collect the types of symbols in this layer. you can also just
// hardcode an array of types if you know what you want to filter on,
// like var types = ['foo', 'bar'];
var typesObj = {}, types = [];
map.featureLayer.eachLayer(function (entity) {
typesObj[entity.feature.properties['CAT_CODE']] = true;
})
for (var k in typesObj) types.push(k);
var checkboxes = [];
// Create a filter interface.
for (var i = 0; i < types.length; i++) {
// Create an an input checkbox and label inside.
var item = filters.appendChild(document.createElement('div'));
var checkbox = item.appendChild(document.createElement('input'));
var label = item.appendChild(document.createElement('label'));
checkbox.type = 'checkbox';
checkbox.id = types[i];
checkbox.checked = true;
// create a label to the right of the checkbox with explanatory text
label.innerHTML = types[i];
label.setAttribute('for', types[i]);
// Whenever a person clicks on this checkbox, call the update().
checkbox.addEventListener('change', update);
checkboxes.push(checkbox);
}
// This function is called whenever someone clicks on a checkbox and changes
// the selection of markers to be displayed.
function update() {
var enabled = {};
// Run through each checkbox and record whether it is checked. If it is,
// add it to the object of types to display, otherwise do not.
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
}
map.featureLayer.setFilter(function(feature) {
// If this symbol is in the list, return true. if not, return false.
// The 'in' operator in javascript does exactly that: given a string
// or number, it says if that is in a object.
// 2 in { 2: true } // true
// 2 in { } // false
return (feature.properties['CAT_CODE'] in enabled);
});
}
}
makeCheckboxes()
