bsudekum · March 26, 2014 00:29
diff --git a/index.html b/index.html
 <!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='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
    <style>
    body {
        margin:0;
        padding:0;
    }
    #map {
        position:absolute;
        top:0;
        bottom:0;
        width:100%;
    }
    #map-ui {
        position: absolute;
        top: 10px;
        right: 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;
        color: #FFF;
    }
    </style>
 </head>
 <body>

 <ul id='map-ui'></ul>
 <div id='map'></div>
 <script>

    //
    // EDIT HERE
    // Follow pattern
    // Add as many maps as you would like
    // Each map must contain a date
    //
    var mapLayers = [{
        mapid: 'bobbysud.fwhwu3di',
        title: 'May 20, 2013'
    }, {
        mapid: 'bobbysud.3dexample',
        title: 'August 12, 2013'
    }, {
        mapid: 'bobbysud.98eka9k9',
        title: 'October 23, 2013'
    }];

    // Specifcy default basemap, initial latitude and longitude, and zoom level
    var baseMap = 'bobbysud.map-ddwpawil';
    var latlng = [48.85910, 2.19560];
    var zoom = 15;
    // Finish editing here
    // No need to change 

    var map = L.mapbox.map('map', baseMap).setView(latlng, zoom);
    var ui = document.getElementById('map-ui');
    var hash = L.hash(map);

    function addMapLayers(layer) {
        for (var i = 0; i < layer.length; i++) {
            var item = document.createElement('li');
            var link = document.createElement('a');
            link.href = '#';
            link.className = 'map-layer'
            link.data = layer[i].mapid;
            link.innerHTML = layer[i].title;
            link.onclick = function(e) {
                e.preventDefault();
                e.stopPropagation();
                reset();
                this.className = 'map-layer active';
                L.mapbox.tileLayer(e.target.data).addTo(map);
            };
            item.appendChild(link);
            ui.appendChild(item);

            if(i == 0){
    			L.mapbox.tileLayer(mapLayers[0].mapid).addTo(map);
    			link.className = 'map-layer active';
            }
        }
    }

    function reset() {
        for (var i = 0; i < document.querySelectorAll('.map-layer').length; i++) {
            document.querySelectorAll('.map-layer')[i].className = 'map-layer';
        }
        for (var i = 0; i < map._layers.length; i++) {
            if (map._layers[i]._tiles !== undefined) {
                map.removeLayer(map._layers[i]);
            }
        }
    }
    addMapLayers(mapLayers);

 </script>
 </body>
 </html>
	<!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='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
	<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
	<style>
	body {
	margin:0;
	padding:0;
	}
	#map {
	position:absolute;
	top:0;
	bottom:0;
	width:100%;
	}
	#map-ui {
	position: absolute;
	top: 10px;
	right: 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;
	color: #FFF;
	}
	</style>
	</head>
	<body>

	<ul id='map-ui'></ul>
	<div id='map'></div>
	<script>

	//
	// EDIT HERE
	// Follow pattern
	// Add as many maps as you would like
	// Each map must contain a date
	//
	var mapLayers = [{
	mapid: 'bobbysud.fwhwu3di',
	title: 'May 20, 2013'
	}, {
	mapid: 'bobbysud.3dexample',
	title: 'August 12, 2013'
	}, {
	mapid: 'bobbysud.98eka9k9',
	title: 'October 23, 2013'
	}];

	// Specifcy default basemap, initial latitude and longitude, and zoom level
	var baseMap = 'bobbysud.map-ddwpawil';
	var latlng = [48.85910, 2.19560];
	var zoom = 15;
	// Finish editing here
	// No need to change

	var map = L.mapbox.map('map', baseMap).setView(latlng, zoom);
	var ui = document.getElementById('map-ui');
	var hash = L.hash(map);

	function addMapLayers(layer) {
	for (var i = 0; i < layer.length; i++) {
	var item = document.createElement('li');
	var link = document.createElement('a');
	link.href = '#';
	link.className = 'map-layer'
	link.data = layer[i].mapid;
	link.innerHTML = layer[i].title;
	link.onclick = function(e) {
	e.preventDefault();
	e.stopPropagation();
	reset();
	this.className = 'map-layer active';
	L.mapbox.tileLayer(e.target.data).addTo(map);
	};
	item.appendChild(link);
	ui.appendChild(item);

	if(i == 0){
	L.mapbox.tileLayer(mapLayers[0].mapid).addTo(map);
	link.className = 'map-layer active';
	}
	}
	}

	function reset() {
	for (var i = 0; i < document.querySelectorAll('.map-layer').length; i++) {
	document.querySelectorAll('.map-layer')[i].className = 'map-layer';
	}
	for (var i = 0; i < map._layers.length; i++) {
	if (map._layers[i]._tiles !== undefined) {
	map.removeLayer(map._layers[i]);
	}
	}
	}
	addMapLayers(mapLayers);

	</script>
	</body>
	</html>