title: How can i add labels in terms of range to my Leaflet map
body: <p>I have been following the leaflets <a href="https://leafletjs.com/examples/choropleth/" rel="nofollow noreferrer">tutorial</a> where it is guiding on how to build an Interactive Choropleth map. Not all things are entirely included and once in a while I have to go online in an attempt to tweak things to get the to work. I got this point where I was labeling the population density of the states and my legend does not show a range in the labels like in this <a href="https://leafletjs.com/examples/choropleth/" rel="nofollow noreferrer">map</a> and instead looks like this (in photo below).</p>
  <p><a href="https://i.stack.imgur.com/seE7M.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/seE7M.jpg" alt="The leaflet map I am building displaying how the labels are. They do not show the ranges" /></a></p>
  <p>Below is my code that gives the legend above</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getColor(d){
              return d &gt; 1000 ? '#800026' :
                      d &gt; 500  ? '#BD0026' :
                      d &gt; 200  ? '#E31A1C' :
                      d &gt; 100  ? '#FC4E2A' :
                      d &gt; 50   ? '#FD8D3C' :
                      d &gt; 20   ? '#FEB24C' :
                      d &gt; 10   ? '#FED976' :
                                  '#FFEDA0';
                      
          }
  
  // Creating a legend
      var legend = L.control({position: 'bottomright'});
  
      legend.onAdd = function (mymap) {
          var div = L.DomUtil.create('div', 'info-legend'), grades = [ 0, 10, 20, 50, 100, 200, 500, 1000], labels = [];
  
          // Loop through our density intervals and generate a label with a coloured square for each interval
          for (var i = 0; i &lt; grades.length; i++) {
              div.innerHTML += '&lt;i style="background:' + getColor(grades[i] + 1) + '"&gt;&lt;/i&gt; ' + (grades[i] + grades[i + 1] ? '&amp;ndash;' + grades[i + 1] + '&lt;br&gt;' : '+');
          }
  
          return div;
      };
      legend.addTo(mymap)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.info-legend {
      line-height: 18px;
      color: #555;
  }
  .info-legend i {
      width: 24px;
      height: 18px;
      float: left;
      margin-right: 8px;
      opacity: 0.7;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I do think there is a problem with the <em>for loop</em> but I can't figure out exactly where. I will appreciate any help.</p>