Leaflet Legend showing - Javascript Leaflet

Javascript examples for Leaflet:Legend

  1. HOME
  2. Javascript
  3. Leaflet
  4. Legend

Description

Leaflet Legend showing

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css"> 
      <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script> 
      <style id="compiled-css" type="text/css">

#map {/*  w ww. ja  va 2  s .c  om*/
   height: 500px;
}
.info.legend {
   background-color: white;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);
map.setView([48.85, 2.35], 12);
function getColor(d) {
    return d > 2 ? '#800026' :
           d > 1.5  ? '#BD0026' :
           d > 1.2  ? '#E31A1C' :
           d > 1.1  ? '#FC4E2A' :
           d > 1.5   ? '#FD8D3C' :
           d > 1.2   ? '#FEB24C' :
           d > 1.1   ? '#FED976' :
                      '#FFEDA0';
}
var legend = L.control({
  position: 'bottomleft'
});
legend.onAdd = function(map) {
  var div = L.DomUtil.create('div', 'info legend'),
    grades = [0.2, 0.26, 0.32, 0.38, 0.44, 0.5, 0.56, 0.62, 0.68, 0.74, 0.8, 0.86, 0.92, 0.98, 1.04, 1.1],
    labels = [],
    from, to;
  for (var i = 0; i < grades.length; i++) {
    from = grades[i];
    to = grades[i + 1];
    labels.push(
      '<i style="background:' + getColor(from + 1) + '">[color]</i> ' +
      from + (to ? '&ndash;' + to : '+'));
  }
  div.innerHTML = labels.join('<br>');
  return div;
};
legend.addTo(map);
    }

      </script> 
   </head> 
   <body> 
      <div id="map"></div>  
   </body>
</html>

Related Tutorials