index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Forest Cover, South Sudan</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; font-family: 'Noto Sans', sans-serif; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(100,100,100,0.8);
z-index: 999;
overflow: auto;
padding: 5px;
opacity: 0.95;
color: #fff;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: #FFF;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
</style>
</head>
<body>
<div id='map'></div>
<div id="footer">
<div class="container" style="padding-left:20px;">
<h2>Forest Cover Change, 2000-2012</h2>
<h4>Forest Cover change in South Sudan from pre-independence to 2012 - <br />as reported by <a href="//www.sciencemag.org/lookup/doi/10.1126/science.1244693" target="_blank">Hansen et al. 2013</a></h4>
</div>
</div>
<script>
var map = L.map('map', {maxZoom: 12}).setView([7, 30], 7);
L.mapbox.tileLayer('landplanner.map-sa4pz9ny').addTo(map);
L.control.layers({
'% Forest Cover 2010': L.tileLayer('//earthengine.google.org/static/hansen_2013/tree_alpha/{z}/{x}/{y}.png').addTo(map),
'Loss/Extent/Gain (Red/Green/Blue)': L.tileLayer('//earthengine.google.org/static/hansen_2013/loss_forest_gain/{z}/{x}/{y}.png'),
'Loss': L.tileLayer('//earthengine.google.org/static/hansen_2013/loss/{z}/{x}/{y}.png'),
'Gain': L.tileLayer('//earthengine.google.org/static/hansen_2013/gain/{z}/{x}/{y}.png')
}, {
}).addTo(map);
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var topLayer = new L.mapbox.tileLayer('landplanner.map-0wnm9063', {
maxZoom: 17
}).addTo(map);
topPane.appendChild(topLayer.getContainer());
topLayer.setZIndex(7);
</script>
</body>
</html>