Skip to content

Instantly share code, notes, and snippets.

@mick

mick/index.html

Created June 5, 2015 22:18
Show Gist options
  • Save mick/216190241b115f1eb435 to your computer and use it in GitHub Desktop.
Save mick/216190241b115f1eb435 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Toggling layers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.menu-ui {
background:#fff;
position:absolute;
top:10px;right:10px;
z-index:1;
border-radius:3px;
width:120px;
border:1px solid rgba(0,0,0,0.4);
}
.menu-ui a {
font-size:13px;
color:#404040;
display:block;
margin:0;padding:0;
padding:10px;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,0.25);
text-align:center;
}
.menu-ui a:first-child {
border-radius:3px 3px 0 0;
}
.menu-ui a:last-child {
border:none;
border-radius:0 0 3px 3px;
}
.menu-ui a:hover {
background:#f8f8f8;
color:#404040;
}
.menu-ui a.active {
background:#3887BE;
color:#FFF;
}
.menu-ui a.active:hover {
background:#3074a4;
}
</style>
<nav id='menu-ui' class='menu-ui'></nav>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWlja3QiLCJhIjoiLXJIRS1NbyJ9.EfVT76g4A5dyuApW_zuIFQ';
var map = L.mapbox.map('map').setView([37.770154, -122.438881], 12);
var layers = document.getElementById('menu-ui');
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var topLayer = L.mapbox.tileLayer('mickt.049ccbf5').addTo(map);
topPane.appendChild(topLayer.getContainer());
topLayer.setZIndex(7);
addLayer(L.mapbox.tileLayer('mickt.ef3da45b'), 'Base Map', 1);
addLayer(L.mapbox.featureLayer(null), 'Zones', null, 'https://rawgit.com/codeforamerica/click_that_hood/master/public/data/san-francisco.geojson');
function addLayer(layer, name, zIndex, geojsonUrl) {
layer.setZIndex(zIndex);
if (geojsonUrl) layer.loadURL(geojsonUrl);
layer.addTo(map);
// Create a simple layer switcher that
// toggles layers on and off.
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';
}
};
layers.appendChild(link);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment