legend.html

<div class='my-legend'>
  <div class='legend-title'>Population density<br/>per km<sup>2</sup> (2011)</div>
  <div class='legend-scale'>
    <ul class='legend-labels'>
      <li><span style='background:#FFFFFF;'></span>None</li>
      <li><span style='background:#FFFFE5;'></span>< 1</li>
      <li><span style='background:#FFF7BC;'></span>1 - 5</li>
      <li><span style='background:#FEE391;'></span>5 - 10</li>
      <li><span style='background:#FEC44F;'></span>10 - 50</li>
      <li><span style='background:#FE9929;'></span>50 - 100</li>
      <li><span style='background:#EC7014;'></span>100 - 250</li>
      <li><span style='background:#CC4C02;'></span>250 - 500</li>
      <li><span style='background:#993404;'></span>500 - 1000</li>
      <li><span style='background:#662506;'></span>1000 ></li>
    </ul>
  </div>
  <div class='legend-source'>Map: <a href="http://blog.thematicmapping.org">Bjørn Sandvik</a><br/>Data: <a href="http://www.stats.govt.nz/">Statistics New Zealand</a></div>
</div>