Skip to content

Instantly share code, notes, and snippets.

@smit1678

smit1678/index.html

Last active December 17, 2015 01:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smit1678/5530068 to your computer and use it in GitHub Desktop.
Save smit1678/5530068 to your computer and use it in GitHub Desktop.
Download ZIP
simple malaria map
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.ie.css' rel='stylesheet' >
<![endif]-->
<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'>P. falciparum Parasite Rate (PfPR2-10)</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:rgb(146,221,221);'></span>0.1 - 10%</li>
<li><span style='background:rgb(129,210,208);'></span>10%</li>
<li><span style='background:rgb(77,182,181);'></span>20%</li>
<li><span style='background:rgb(60,145,144);'></span>30%</li>
<li><span style='background:rgb(46,107,107);'></span>40%</li>
<li><span style='background:rgb(255,255,252);'></span>50%</li>
<li><span style='background:rgb(254,253,217);'></span>60%</li>
<li><span style='background:rgb(250,238,52);'></span>70%</li>
</ul>
</div>
<div class='legend-source'>Source: <a href="#link to source">Malaria Atlas Project</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 type='text/javascript'>
var map = L.mapbox.map('map', 'nate.malaria-raster-pr2010,nate.map-juyfwocl,nate.malaria-contour-tooltip').setView([10.337, 9.426], 3);
map.legendControl.addLegend(document.getElementById('legend-content').innerHTML);
map.gridControl.options.follow = true;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment