<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#layers {
background: #fff;
position:absolute;
top:20px;
left:20px;
z-index: 1000;
padding: 10px;
}
</style>
<div id='layers'></div>
<div id='map'></div>
<script>
var map = mapbox.map('map');
var layers = document.getElementById('layers');
map.addLayer(mapbox.layer().id('tmcw.map-rep59d6x').named('MapBox Streets').composite(false));
map.addLayer(mapbox.layer().id('tmcw.newruns').named('My Runs').composite(false));
map.zoom(12).center({ lat: 38.9, lon: -77 });
// 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 container = document.createElement('div');
var input = document.createElement('input');
var label = document.createElement('label');
input.type = 'button';
input.id = input.value = n;
input.checked = 'checked';
input.onchange = function() {
map.getLayer(this.value).enabled ?
map.getLayer(this.value).disable() :
map.getLayer(this.value).enable();
};
label.innerHTML = n;
label.setAttribute('for', n);
container.appendChild(input);
container.appendChild(label);
layers.appendChild(container);
}
</script>
</body>
</html>