Plugging in zepto as a jquery sub for light mapping by wboykinm

index.html

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