Skip to content

Instantly share code, notes, and snippets.

@smit1678

smit1678/index.html

Last active August 29, 2015 13:56
Show Gist options
  • Save smit1678/8872246 to your computer and use it in GitHub Desktop.
Save smit1678/8872246 to your computer and use it in GitHub Desktop.
Download ZIP
Global Access Map
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Custom Legend</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<div id='legend-content' style='display: none;'>
<div class='my-legend'>
<div class='legend-title'>Global Accessibility: Travel time to nearest settlement >50,000 people in year 2000</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#FFF5EF;'></span>0</li>
<li><span style='background:#FFE4D6;'></span>1hr</li>
<li><span style='background:#F4C8B5;'></span>2hr</li>
<li><span style='background:#EDB09C;'></span>3hr</li>
<li><span style='background:#E89681;'></span>4hr</li>
<li><span style='background:#E07764;'></span>6hr</li>
<li><span style='background:#D85B4E;'></span>8hr</li>
<li><span style='background:#CE433B;'></span>12hr</li>
<li><span style='background:#B72D2D;'></span>18hr</li>
<li><span style='background:#9E2721;'></span>24hr</li>
<li><span style='background:#872318;'></span>2days</li>
<li><span style='background:#701D0E;'></span>3days</li>
<li><span style='background:#561707;'></span>4days</li>
<li><span style='background:#3F1507;'></span>5days</li>
<li><span style='background:#280E03;'></span>10days</li>
</ul>
</div>
<div class='legend-source'>Source: <a href="http://bioval.jrc.ec.europa.eu/products/gam/download.htm">Global Environment Monitoring Unit, Joint Research Centre of the European Commission</a></div>
</div>
<style type='text/css'>
.my-legend .legend-title {
text-align: left;
margin-bottom: 8px;
font-weight: bold;
font-size: 90%;
}
.my-legend .legend-scale ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
display: block;
float: left;
width: 50px;
margin-bottom: 6px;
text-align: center;
font-size: 80%;
list-style: none;
}
.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 15px;
width: 50px;
}
.my-legend .legend-source {
font-size: 70%;
color: #999;
clear: both;
}
.my-legend a {
color: #777;
}
</style>
</div>
<script>
var map = L.mapbox.map('map', 'nate.global-access-map,nate.map-kyk9nx21');
map.legendControl.addLegend(document.getElementById('legend-content').innerHTML);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment