Toggle marker categories
Show and hide different categories of markers.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Toggle marker categories</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.ui-select {
background:#fff;
position:absolute;
top:10px;
right:10px;
z-index:100;
padding:10px;
border-radius:3px;
}
</style>
<div id='filters' class='ui-select'>
<div><input type='checkbox' checked=checked class='filter'
name='filter' id='restaurant' value='restaurant'/><label for='restaurant'>restaurant</label></div>
<div><input type='checkbox' checked=checked class='filter'
name='filter' id='bicycle' value='bicycle'/><label for='bicycle'>bicycle</label></div>
<div><input type='checkbox' checked=checked class='filter'
name='filter' id='bar' value='bar'/><label for='bar'>bar</label></div>
</div>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map')
.setView([37.77396, -122.4366], 12)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
var myFeatureLayer = L.mapbox.featureLayer('/mapbox.js/assets/data/sf_locations.geojson')
.addTo(map);
var filters = document.getElementById('filters');
var checkboxes = document.getElementsByClassName('filter');
function change() {
// Find all checkboxes that are checked and build a list of their values
var on = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) on.push(checkboxes[i].value);
}
// The filter function takes a GeoJSON feature object
// and returns true to show it or false to hide it.
myFeatureLayer.setFilter(function (f) {
// check each marker's symbol to see if its value is in the list
// of symbols that should be on, stored in the 'on' array
return on.indexOf(f.properties['marker-symbol']) !== -1;
});
return false;
}
// When the form is touched, re-filter markers
filters.onchange = change;
// Initially filter the markers
change();
</script>
Get a free Mapbox account 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.