layers example

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layers</title>

#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 = 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>

</body>
</html>

https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js