71 Square Miles by wboykinm

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>71 Square Miles</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.8/mapbox.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.css' rel='stylesheet' />
<link href='//fonts.googleapis.com/css?family=PT+Serif:400,700' rel='stylesheet' type='text/css'>
<style>
  body { margin:0; padding:0; font-family: 'PT Serif', serif;}
  #map { position:absolute; top:0; bottom:0; width:100%; }
  #sideBar {
    color: #333333;
    position:absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    background: rgba(255,255,255,0.7);
    overflow: auto;
    z-index: 4;
  }
  #container {
    padding: 15px;
    margin-top: 0px;
  }
</style>
</head>
<body>


<style>
.menu-ui {
  background:#fff;
  position:absolute;
  top:160px;right:10px;
  z-index:8;
  border-radius:3px;
  width:260px;
  border:1px solid rgba(0,0,0,0.4);
  }
  .menu-ui a {
    font-size:15px;
    color:#333333;
    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:#777777;
      color:#ffffff;
      }
      .menu-ui a.active:hover {
        background:#e2e3e3;
        }
</style>
<div id='sideBar'>
  <nav id='menu-ui' class='menu-ui'></nav>
  <div id='container'>
    <h1><a style='text-decoration:none;' href='//71squaremiles.com/' target ='_blank'>71 Square Miles</a></h1>
    <p>A block-by-block survey of Brooklyn, by Jennifer Maravillas<p> 
  </div>
</div>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
var map = L.mapbox.map('map').setView([40.67818, -73.94416], 14);
var layers = document.getElementById('menu-ui');

addLayer(L.mapbox.tileLayer('maravillas.9e9afw29'), 'Block Map', 1);
addLayer(L.mapbox.tileLayer('landplanner.5e661b4a'), 'Reference Labels', 2);
//addLayer(L.mapbox.tileLayer('examples.bike-locations'), 'Bike Stations', 3);

function addLayer(layer, name, zIndex) {
    layer
        .setZIndex(zIndex)
        .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);
}
var hash = L.hash(map);
</script>


</body>
</html>