wboykinm/index.html

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