Last active
December 20, 2015 23:19
-
-
Save wboykinm/6211413 to your computer and use it in GitHub Desktop.
Dots on a shoestring
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment