Created
December 18, 2012 16:07
-
-
Save wboykinm/4329282 to your computer and use it in GitHub Desktop.
Mapbox Basemap Switcher per @jkeefe's WNYC example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/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: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; | |
border-top-color:#FFF; | |
color:#FFF; | |
} | |
</style> | |
<ul id='map-ui'></ul> | |
<div id='map'></div> | |
<!-- WNYC Version - one-at-a-time logic --> | |
<script> | |
mapbox.load(['landplanner.map-a0wbwf43', 'landplanner.blackmarble2', 'landplanner.map-6loa9k8g'], function(data) { | |
map = mapbox.map('map'); | |
var layers = document.getElementById('map-ui'); | |
// add +/- zoom buttons | |
map.ui.zoomer.add(); | |
// After specifying multiple ids to mapbox.load, you'll get an array | |
// of data objects back, with pre-initialized layer and markers members | |
// placing the third layer [2] on "top" as the streets TileLayer | |
// also changed the opacity for the streets layer using mapbox | |
// add the first base layer to the map | |
map.addLayer(data[0].layer); | |
// add the second base layer to the map | |
map.addLayer(data[1].layer); | |
// add the reference layer on top | |
map.addTileLayer(data[2].layer); | |
// Tooltips ... | |
// Which I decided not to activate for this map | |
// var interaction = mapbox.interaction() | |
// .map(map) | |
// .auto(); | |
// Hide legend key until zones layer is shown | |
//$('#key_legend').hide(); | |
// hide the second base layer for now (will toggle on with function below) | |
map.disableLayerAt(1); | |
// Zoom and center the map | |
map.zoom(5).center({ lat: 42, lon: -100 }); | |
// Disable the mousewheel | |
//map.eventHandlers[3].remove(); | |
// Allow for map URL to retain location | |
map.ui.hash.add(); | |
// Create a simple layer switcher that toggles layers on | |
// and off. | |
// There's a more elegant way to do this, but I made it just address layers 0 & 1, ignoring 2 | |
for (var i = 0; i < map.getLayers().length -1; i++) { | |
// assign name array | |
var fullname = ['Satellite', 'Nighttime Lights']; | |
var n = map.getLayerAt(i).name; | |
var item = document.createElement('li'); | |
var layer = document.createElement('a'); | |
layer.href = '#'; | |
layer.id = "layerid" + i; | |
// if the layer is enabled above, make its class 'active' otherwise '' | |
layer.className = map.getLayerAt(i).enabled ? 'active' : ''; | |
layer.innerHTML = fullname[i]; | |
// The code below is toggling between two layers at positions 0 and 1, not toucing the baselayer at 2 | |
// Manually crafted for this map to hide the tooltips when the flooding layer is shown, | |
// but show them when the evac-layer is shown | |
layer.onclick = function(e) { | |
if (map.getLayerAt(1).enabled) { | |
map.disableLayerAt(1); | |
map.enableLayerAt(0); | |
//$('#key_legend').hide('fast'); | |
$('#layerid1').removeClass('active'); | |
$('#layerid0').addClass('active'); | |
} else { | |
map.disableLayerAt(0); | |
map.enableLayerAt(1); | |
//$('#key_legend').show('fast'); | |
$('#layerid0').removeClass('active'); | |
$('#layerid1').addClass('active'); | |
} | |
}; | |
layer.addEventListener('touchstart', layer.onclick); | |
item.appendChild(layer); | |
layers.appendChild(item); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment