Skip to content

Instantly share code, notes, and snippets.

@bsudekum

bsudekum/index.html

Created March 26, 2014 00:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bsudekum/9774515 to your computer and use it in GitHub Desktop.
Save bsudekum/9774515 to your computer and use it in GitHub Desktop.
Download ZIP
Layer switcher
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment