A simple map

HTML

<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css">
<script src="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js"></script>
<nav id='filters' class='filter-ui'>result</nav>
<div id='map'></div>

CSS

body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
.filter-ui {
  background:#fff;
  position:absolute;
  top:10px;
  right:10px;
  z-index:100;
  padding:10px;
  border-radius:3px;
  }

JavaScript

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 < features.length; i++) {
    typesObj[features[i].properties['CAT_CODE']] = true;
  }
  for (var k...