Filtering marker cluster groups

by sduermael78

HTML

<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css">
<div id='map'></div>
<form id='TYPE_UNITE'>
  <div><input type='checkbox' name='filters' onclick='TYPE_UNITE();' value='UMR' checked> UMR </div>
  <div><input type='checkbox' name='filters' onclick='TYPE_UNITE();' value='USR' checked> USR </div>
  <div><input type='checkbox' name='filters' onclick='TYPE_UNITE();' value='UMI' checked> UMI </div>
  <div><input type='checkbox' name='filters' onclick='TYPE_UNITE();' value='FRE' checked> FRE </div>
  <div><input type='checkbox' name='filters' onclick='TYPE_UNITE();' value='UMS' checked> UMS </div>
  <div><input type='checkbox' name='filters' onclick='TYPE_UNITE();' value='UPR' checked> UPR </div>
  <div><input type='checkbox' name='filters' onclick='TYPE_UNITE();' value='UPS' checked> UPS </div>
  <div><input type='checkbox' name='filters' onclick='TYPE_UNITE();' value='FR' checked> FR </div>
</form>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

#TYPE_UNITE {
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    width: 100px;
    padding:5px;
}

JavaScript

L.mapbox.accessToken = 'pk.eyJ1IjoiZHVlcm1hZWwiLCJhIjoiNTRmNjc2MjYzN2Y0NDk5ZjRjMTM1MDA2YjQzYTY4NjUifQ.zdJRPPXa8WvpcMZC1_RAyw';
// 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([31.728, 3.691], 0)
    .addLayer(L.mapbox.tileLayer('mapbox.emerald'));

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('https://gist.githubusercontent.com/Duermael/4127d4b3f6e2319030cd53fe796682d2/raw/a103cfc5ce99bded33d4f93b9e7176165eb0a820/map.geojson')
    .on('ready', function(e) {
        layers = e.target;
        TYPE_UNITE();
    });

var filters = document.getElementById('TYPE_UNITE').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 TYPE_UNITE() {
    // 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...