Dots on a shoestring by wboykinm

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Racial Dotmap Sites</title>
  
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />

  <link href='//api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.css' rel='stylesheet' />
  <link href="//netdna.bootstrapcdn.com/bootswatch/3.0.3/readable/bootstrap.min.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.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: 15px;
    right: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 100;
}

.legend {
    text-align: left;
    line-height: 18px;
    color: #fff;
    background-color:rgba(119,119,119,0.7);
  }
  
.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity:0.9;
}
</style>
<div class="btn-group-vertical" id='map-ui'></div>
<div id='map'></div>


<script src='//api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.js'></script>
<script src='//asset.geosprocket.com/leaflet/leaflet-hash.js'></script>

<script>
var map = L.map('map', {
  maxZoom: 13
}).setView([38.902, -77.001], 12);
var ui = document.getElementById('map-ui');

var hash = new L.Hash(map);

// ADD A LEGEND HERE
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');

    div.innerHTML +=
    '<img src="//farm4.staticflickr.com/3782/11950959236_91305a6e61_o.png" alt="legend" width="222" height="220">';

return div;
};
legend.addTo(map);

addLayer(L.mapbox.tileLayer('landplanner.map-dsn5dtki'), '<i class="fa fa-globe"></i>  Basemap', 1);
addLayer(L.tileLayer('//demographics.coopercenter.org/DotMap/tiles4/{z}/{x}/{y}.png', {
  attribution:'<a href="//www.coopercenter.org/demographics/Racial-Dot-Map" target="_blank" >Weldon Cooper Center for Public Service, University of Virginia (Dustin A. Cable, author, 2013)</a> '})
  .setOpacity(0.9), '<i class="fa fa-users"></i>  People', 2);
addLayer(L.tileLayer('//a.tile.stamen.com/toner-labels/{z}/{x}/{y}.png', {
  attribution:'Reference Data by <a href="//maps.stamen.com/#toner/12/37.7706/-122.3782" target="_blank">Stamen</a>, &copy; <a href="//osm.org" target="_blank">Openstreetmap</a> Contributors'}).setOpacity(0.5), '<i class="fa fa-map-marker"></i>  Places', 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 = 'btn btn-info active';
    link.innerHTML = name;

    link.onclick = function(e) {
        e.preventDefault();
        e.stopPropagation();

        if (map.hasLayer(layer)) {
            map.removeLayer(layer);
            this.className = 'btn btn-info';
        } else {
            map.addLayer(layer);
            this.className = 'btn btn-info active';
        }
    };

    ui.appendChild(link);
}
</script>
  
</body>
</html>