title: Mapbox: How to filter markers by category?
body: <p>I am creating my first map using Mapbox and I want to be able to filter markers by category. I am following this example on the mapbox doc page: </p>
  
  <p><a href="https://www.mapbox.com/mapbox.js/example/v1.0.0/multiple-marker-filters/" rel="nofollow">https://www.mapbox.com/mapbox.js/example/v1.0.0/multiple-marker-filters/</a></p>
  
  <p>I have a property for each marker with the following key: CAT_CODE. I can't seem to get my legend to appear so I can toggle the markers off and on. </p>
  
  <p>Anyone have any clues?</p>
  
  <p><a href="https://jsfiddle.net/c72sq71d/15/" rel="nofollow"><strong>JSFIDDLE</strong></a> </p>
  
  <pre><code>L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';
  var map = L.mapbox.map('map', 'mapbox.light');
  
  var featureLayer = {
   "type": "FeatureCollection",
   "features": [
    {
    "type": "Feature",
    "properties": {
      "marker-color": "#7e7e7e",
      "marker-size": "medium",
      "marker-symbol": "heliport",
      "CAT_CODE": "12311"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        46.40625,
        53.54030739150022
      ]
    }
  },
  {
    "type": "Feature",
    "properties": {
      "marker-color": "#7e7e7e",
      "marker-size": "medium",
      "marker-symbol": "",
      "CAT_CODE": "1231566"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        58.00781249999999,
        55.97379820507658
      ]
    }
  },
  {
    "type": "Feature",
    "properties": {
      "marker-color": "#7e7e7e",
      "marker-size": "medium",
      "marker-symbol": "",
      "CAT_CODE": "12311"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        45.3515625,
        62.431074232920906
      ]
    }
   }
   ]
  };
  
  // Find and store a variable reference to the list of filters.
  var filters = document.getElementById('filters');
  
   // Wait until the marker layer is loaded in order to build a list of  possible
  // types. If you are doing this with another featureLayer, you should change
  // map.featureLayer to the variable you have assigned to your  featureLayer.
  map.featureLayer.on('ready', function() {
  // Collect the types of symbols in this layer. you can also just
  // hardcode an array of types if you know what you want to filter on,
  // like var types = ['foo', 'bar'];
  var typesObj = {}, types = [];
  var features = map.featureLayer.getGeoJSON().features;
  for (var i = 0; i &lt; features.length; i++) {
  typesObj[features[i].properties['CAT_CODE']] = true;
  }
  for (var k in typesObj) types.push(k);
  
  var checkboxes = [];
  // Create a filter interface.
  for (var i = 0; i &lt; types.length; i++) {
  // Create an an input checkbox and label inside.
  var item = filters.appendChild(document.createElement('div'));
  var checkbox = item.appendChild(document.createElement('input'));
  var label = item.appendChild(document.createElement('label'));
  checkbox.type = 'checkbox';
  checkbox.id = types[i];
  checkbox.checked = true;
  // create a label to the right of the checkbox with explanatory text
  label.innerHTML = types[i];
  label.setAttribute('for', types[i]);
  // Whenever a person clicks on this checkbox, call the update().
  checkbox.addEventListener('change', update);
  checkboxes.push(checkbox);
  }
  
  // This function is called whenever someone clicks on a checkbox and changes
  // the selection of markers to be displayed.
  function update() {
  var enabled = {};
  // Run through each checkbox and record whether it is checked. If it is,
  // add it to the object of types to display, otherwise do not.
  for (var i = 0; i &lt; checkboxes.length; i++) {
    if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
  }
  map.pois.setFilter(function(feature) {
    // If this symbol is in the list, return true. if not, return false.
    // The 'in' operator in javascript does exactly that: given a string
    // or number, it says if that is in a object.
    // 2 in { 2: true } // true
    // 2 in { } // false
    return (feature.properties['CAT_CODE'] in enabled);
  });
  }
  });
  </code></pre>