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.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.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='fast-food' value='fast-food'/><label for='fast-food'>fast-food</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', 'mapbox.dc-markers');
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.
    map.featureLayer.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>
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