Filtering marker cluster groups

Show only filtered markers in marker clusters

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Filtering marker cluster groups</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />

<style>
#colors {
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    width: 150px;
    padding:5px;
}
</style>
<div id='map'></div>
<form id='colors'>
  <div><input type='checkbox' name='filters' onclick='showStations();' value='red' checked> red</div>
  <div><input type='checkbox' name='filters' onclick='showStations();' value='green' checked> green</div>
  <div><input type='checkbox' name='filters' onclick='showStations();' value='orange' checked> orange</div>
  <div><input type='checkbox' name='filters' onclick='showStations();' value='yellow' checked> yellow</div>
  <div><input type='checkbox' name='filters' onclick='showStations();' value='blue' checked> blue</div>
</form>

<script>
L.mapbox.accessToken = '<your access token here>';
// Here we don't use the second argument to map, since that would automatically
// load in non-clustered markers from the layer. Instead we add just the
// backing tileLayer, and then use the featureLayer only for its data.
var map = L.mapbox.map('map')
    .setView([38.9, -77], 13)
    .addLayer(L.mapbox.tileLayer('mapbox.streets'));

var overlays = L.layerGroup().addTo(map);

// we create the 'layers' variable outside of the on('ready' callback
// so that it can be accessible in the showStations function. Otherwise,
// JavaScript scope would prevent you from accessing it.
var layers;

// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.
L.mapbox.featureLayer()
    .loadURL('/mapbox.js/assets/data/stations.geojson')
    .on('ready', function(e) {
        layers = e.target;
        showStations();
    });

var filters = document.getElementById('colors').filters;

// There are many ways to filter data. Mapbox.js has the .setFilter method,
// but it only applies to L.mapbox.featureLayer layers, and that isn't what
// we're creating - we're making marker groups in a MarkerClusterGroup layer.
// Thus we distill filtering down to its essential part: an 'if' statement
// in a loop.
function showStations() {
    // first collect all of the checked boxes and create an array of strings
    // like ['green', 'blue']
    var list = [];
    for (var i = 0; i < filters.length; i++) {
        if (filters[i].checked) list.push(filters[i].value);
    }
    // then remove any previously-displayed marker groups
    overlays.clearLayers();
    // create a new marker group
    var clusterGroup = new L.MarkerClusterGroup().addTo(overlays);
    // and add any markers that fit the filtered criteria to that group.
    layers.eachLayer(function(layer) {
        if (list.indexOf(layer.feature.properties.line) !== -1) {
            clusterGroup.addLayer(layer);
        }
    });
}
</script>
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example