Viewing an older version of mapbox.js. Check out v1.4.0 for the latest.

Layers

Switch between different layers on a map
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Layers</title>
      <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
      <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.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;left:10px;
        list-style:none;
        margin:0;padding:0;
        z-index:100;
        }
        #map-ui a {
          font:normal 13px/18px 'Helvetica Neue',Helvetica,sans-serif;
          background:#FFF;
          color:#3C4E5A;
          display:block;
          margin:0;padding:0;
          border:1px solid #BBB;
          border-bottom-width:0;
          min-width:138px;
          padding:10px;
          text-decoration:none;
          }
        #map-ui a:hover { background:#ECF5FA; }
        #map-ui li:last-child a {
          border-bottom-width:1px;
          -webkit-border-radius:0 0 3px 3px;
                  border-radius:0 0 3px 3px;
          }
        #map-ui li:first-child a {
          -webkit-border-radius:3px 3px 0 0;
                  border-radius:3px 3px 0 0;
                }
        #map-ui a.active {
          background:#3887BE;
          border-color:#3887BE;
          border-top-color:#FFF;
          color:#FFF;
          }
    </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('examples.map-zgrqqx0w'));
      map.addLayer(mapbox.layer().id('examples.bike-lanes'));
      map.zoom(11).center({ lat: 38.9, lon: -77.1 });
    
      // 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';
              layer.innerHTML = 'Layer ' + (i + 1);
    
          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' : '';
          };
          item.appendChild(layer);
          layers.appendChild(item);
      }
    
      // Attribute map
      map.ui.attribution.add()
          .content('<a href="http://mapbox.com/about/maps">Terms &amp; Feedback</a>');
    </script>
    
    The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.