Skip to content

Instantly share code, notes, and snippets.

@jameslaneconkling

jameslaneconkling/mb_grid-tile_control

Last active August 29, 2015 14:00
Show Gist options
  • Save jameslaneconkling/1fb18a115b6a66a8242d to your computer and use it in GitHub Desktop.
Save jameslaneconkling/1fb18a115b6a66a8242d to your computer and use it in GitHub Desktop.
Download ZIP
function to toggle layers and grid on/off [modified from https://www.mapbox.com/mapbox.js/example/v1.0.0/layers/]
Raw
mb_grid-tile_control
<!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>
<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%; }
</style>
</head>
<body>
<style>
#map-ui {
position: absolute;
top: 75px;
left: 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;
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);
addLayer('examples.map-zgrqqx0w', 'Base Map', 1);
addLayer('examples.bike-lanes', 'Bike Lanes', 2);
addLayer('examples.bike-locations', 'Bike Stations', 3);
function addLayer(layer_id, name, zIndex) {
var layer = L.mapbox.tileLayer(layer_id);
var grid = L.mapbox.gridLayer(layer_id);
var gridControl = L.mapbox.gridControl(grid);
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 = '';
//JLC - add grid and grid control
map.removeLayer(grid);
map.removeControl(gridControl)
} else {
map.addLayer(layer);
this.className = 'active';
//JLC - add grid and grid control
map.addLayer(grid);
map.addControl(gridControl)
}
};
item.appendChild(link);
ui.appendChild(item);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment