Mapbox.js Layers + Bootstrap.js by wboykinm

index.html

<!DOCTYPE html>
<html>
<head>
  <script src='//api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
  <script src='//geosprocket.com/assets/bootstrap/js/bootstrap.min.js'></script>
  <link href='//geosprocket.com/assets/bootstrap/css/bootstrap-spruce.css' rel='stylesheet' />
  <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;
    list-style:none;
    margin:0;padding:0;
    z-index:100;
    }
    
</style>
<ul id='map-ui'></ul>
<div id='map'></div>
<script>
  var map = mapbox.map('map');
  var layers = document.getElementById('map-ui');

  map.addLayer(mapbox.layer().id('landplanner.map-a0wbwf43').named('Satellite').composite(false));
  map.addLayer(mapbox.layer().id('landplanner.map-gu4g9lsb').named('Terrain').composite(false));
  map.addLayer(mapbox.layer().id('landplanner.blackmarble2').named('Nighttime Lights').composite(false));
  map.addLayer(mapbox.layer().id('landplanner.map-6loa9k8g').named('Reference').composite(false));
  map.zoom(5).center({ lat: 42, lon: -100 });
  map.ui.zoomer.add();
  map.ui.hash.add();
  

  // Create a simple layer switcher that toggles layers on
  // and off.
  for (var i = 0; i < map.getLayers().length; i++) {
      var n = map.getLayerAt(i).name;
      var item = document.createElement('li');
      var layer = document.createElement('a');
          layer.href = '#';
          layer.id = n; 
          layer.className = 'active btn btn-large btn-info'; 
          layer.innerHTML = n;

      layer.onclick = function(e) {
          e.preventDefault();
          e.stopPropagation();
          map.getLayer(this.id).enabled ? map.getLayer(this.id).disable() : map.getLayer(this.id).enable();
          this.className = map.getLayer(this.id).enabled ? 'active btn btn-large btn-info' : 'btn btn-large';
      };
      item.appendChild(layer);
      layers.appendChild(item);
  }

  // Attribute map
  map.ui.attribution.add()
      .content('<a href="//mapbox.com/about/maps">Terms &amp; Feedback</a>');
</script>
</body>
</html>