Dots on a shoestring

<!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' />

.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>

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="https://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('https://demographics.coopercenter.org/DotMap/tiles4/{z}/{x}/{y}.png', {
  attribution:'<a href="https://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('https://a.tile.stamen.com/toner-labels/{z}/{x}/{y}.png', {
  attribution:'Reference Data by <a href="https://maps.stamen.com/#toner/12/37.7706/-122.3782" target="_blank">Stamen</a>, &copy; <a href="https://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>

Modified http://asset.geosprocket.com/leaflet/leaflet-hash.js to a secure url

https://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.js

https://asset.geosprocket.com/leaflet/leaflet-hash.js