Layers

Toggling layers on and off
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Layers</title>
      <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
      <script src='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script>
      <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
      <!--[if lte IE 8]>
        <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'>
      <![endif]-->
      <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
      </style>
    </head>
    <body>
    
    <style>
    #map-ui {
        position: absolute;
        top: 75px;
        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 type='text/javascript'>
    var map = L.map('map').setView([38.902, -77.001], 13);
    var ui = document.getElementById('map-ui');
    
    addLayer(L.mapbox.tileLayer('examples.map-zgrqqx0w'), 'Base Map', 1);
    addLayer(L.mapbox.tileLayer('examples.bike-lanes'), 'Bike Lanes', 2);
    addLayer(L.mapbox.tileLayer('examples.bike-locations'), 'Bike Stations', 3);
    
    function addLayer(layer, name, zIndex) {
        layer
            .setZIndex(zIndex)
            .addTo(map);
    
        // Create a simple layer switcher that toggles layers on
        // and off.
        var item = document.createElement('li');
        var link = document.createElement('a');
    
        link.href = '#';
        link.className = 'active';
        link.innerHTML = name;
    
        link.onclick = function(e) {
            e.preventDefault();
            e.stopPropagation();
    
            if (map.hasLayer(layer)) {
                map.removeLayer(layer);
                this.className = '';
            } else {
                map.addLayer(layer);
                this.className = 'active';
            }
        };
    
        item.appendChild(link);
        ui.appendChild(item);
    }
    </script>
    
    The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.