wboykinm/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
  <script src="http://zeptojs.com/zepto.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>
	<!DOCTYPE html>
	<html>
	<head>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
	<script src="http://zeptojs.com/zepto.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>