rsanchez/filterable-cluster.html

## filterable-cluster.html
<!DOCTYPE html>
<html>
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src='./mapbox.js'></script>
  <script src='./leaflet.markercluster-src.js'></script>
  <link href='./mapbox.css' rel='stylesheet' />
  <link href='./MarkerCluster.css' rel='stylesheet' />
  <link href='./MarkerCluster.Default.css' rel='stylesheet' />
  <!--[if lte IE 8]>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.2.0/mapbox.ie.css' rel='stylesheet' >
  <![endif]-->
  <script src='./matdata.js'></script>
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>

<style>
    #map-ui {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 100;
    }

    #map-ui ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #map-ui a {
        font-size: 13px;
        background: #FFF;
        color: #3C4E5A;
        display: block;
        margin: 0;
        padding: 0;
        border: 1px solid #BBB;
        border-bottom-width: 0;
        min-width: 138px;
        padding: 10px;
        text-decoration: none;
    }

    #map-ui a:hover {
        background: #ECF5FA;
    }

    #map-ui li:last-child a {
        border-bottom-width: 1px;
        -webkit-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
    }

    #map-ui li:first-child a {
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
    }

    #map-ui a.active {
        background: #3887BE;
        border-color: #3887BE;
        color: #FFF;
    }
</style>
<div id='map-ui'>
    <ul>
        <li><a href='#' id='filter-food'>show only food events</a></li>
        <li><a href='#' class='active' id='filter-all'>show all events</a></li>
    </ul>
</div>
<div id='map'></div>
<script type='text/javascript'>
    L.MarkerClusterGroup.include({
        fromGeoJSON: function (geojson) {
            this._geojson = geojson;
            this.filter();
        },

        filter: function (f) {
            f = f || function (m) { return true; }
            var markers = Array();
            for (var i = 0; i < this._geojson.features.length; i++) {
                var a = this._geojson.features[i];
                if (!f(a)) { continue; }
                var title = a.properties['title'];
                var marker = L.marker(new L.LatLng(a.geometry.coordinates[1], a.geometry.coordinates[0]), {
                    icon: L.mapbox.marker.icon({'marker-symbol': a.properties['marker-symbol'], 'marker-color': a.properties['marker-color']}),
                    title: title
                });
                marker.bindPopup(title);
                markers.push(marker);
            }
            this.clearLayers();
            this.addLayers(markers);
        }
    });


    var map = L.mapbox.map('map', 'examples.map-zr0njcqy',  {markerLayer: false});
    map.on('error', function (e) {
        console.log(e);
    })
    var cluster = new L.MarkerClusterGroup();
    map.addLayer(cluster);
    cluster.fromGeoJSON(dataFromMapbox);
    map.addLayer(cluster);
    var food = L.DomUtil.get('filter-food');
    var all = L.DomUtil.get('filter-all');

    L.DomEvent.on(food, 'click', function (e) {
        cluster.filter(function (m) {
            return m.properties['marker-symbol'] === "fast-food";
        });
    })
    L.DomEvent.on(all, 'click', function (e) {
        cluster.filter();
    })

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<script src='./mapbox.js'></script>
	<script src='./leaflet.markercluster-src.js'></script>
	<link href='./mapbox.css' rel='stylesheet' />
	<link href='./MarkerCluster.css' rel='stylesheet' />
	<link href='./MarkerCluster.Default.css' rel='stylesheet' />
	<!--[if lte IE 8]>
	<link href='//api.tiles.mapbox.com/mapbox.js/v1.2.0/mapbox.ie.css' rel='stylesheet' >
	<![endif]-->
	<script src='./matdata.js'></script>
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<style>
	#map-ui {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 100;
	}

	#map-ui ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	#map-ui a {
	font-size: 13px;
	background: #FFF;
	color: #3C4E5A;
	display: block;
	margin: 0;
	padding: 0;
	border: 1px solid #BBB;
	border-bottom-width: 0;
	min-width: 138px;
	padding: 10px;
	text-decoration: none;
	}

	#map-ui a:hover {
	background: #ECF5FA;
	}

	#map-ui li:last-child a {
	border-bottom-width: 1px;
	-webkit-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
	}

	#map-ui li:first-child a {
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
	}

	#map-ui a.active {
	background: #3887BE;
	border-color: #3887BE;
	color: #FFF;
	}
	</style>
	<div id='map-ui'>
	<ul>
	<li><a href='#' id='filter-food'>show only food events</a></li>
	<li><a href='#' class='active' id='filter-all'>show all events</a></li>
	</ul>
	</div>
	<div id='map'></div>
	<script type='text/javascript'>
	L.MarkerClusterGroup.include({
	fromGeoJSON: function (geojson) {
	this._geojson = geojson;
	this.filter();
	},

	filter: function (f) {
	f = f \|\| function (m) { return true; }
	var markers = Array();
	for (var i = 0; i < this._geojson.features.length; i++) {
	var a = this._geojson.features[i];
	if (!f(a)) { continue; }
	var title = a.properties['title'];
	var marker = L.marker(new L.LatLng(a.geometry.coordinates[1], a.geometry.coordinates[0]), {
	icon: L.mapbox.marker.icon({'marker-symbol': a.properties['marker-symbol'], 'marker-color': a.properties['marker-color']}),
	title: title
	});
	marker.bindPopup(title);
	markers.push(marker);
	}
	this.clearLayers();
	this.addLayers(markers);
	}
	});


	var map = L.mapbox.map('map', 'examples.map-zr0njcqy', {markerLayer: false});
	map.on('error', function (e) {
	console.log(e);
	})
	var cluster = new L.MarkerClusterGroup();
	map.addLayer(cluster);
	cluster.fromGeoJSON(dataFromMapbox);
	map.addLayer(cluster);
	var food = L.DomUtil.get('filter-food');
	var all = L.DomUtil.get('filter-all');

	L.DomEvent.on(food, 'click', function (e) {
	cluster.filter(function (m) {
	return m.properties['marker-symbol'] === "fast-food";
	});
	})
	L.DomEvent.on(all, 'click', function (e) {
	cluster.filter();
	})

	</script>

	</body>
	</html>