<!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='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/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'>The Title or Explanation of your Map</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#F1EEF6;'></span>0 - 20%</li>
<li><span style='background:#BDC9E1;'></span>40%</li>
<li><span style='background:#74A9CF;'></span>60%</li>
<li><span style='background:#2B8CBE;'></span>80%</li>
<li><span style='background:#045A8D;'></span>100%</li>
</ul>
</div>
<div class='legend-source'>Source: <a href="#link to source">Name of source</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', 'examples.map-y7l23tes');
map.legendControl.addLegend(document.getElementById('legend-content').innerHTML);
</script>