title: Create legend with different circle sizes in Leaflet
body: <p>Good afternoon,</p>
  
  <p>I am fighting with the leaflet legend dependant on the circle radius. Because I am going to have the values with the same colour, but different size. I would like to create legend appropriate to them.</p>
  
  <p>I tried this example:</p>
  
  <p><a href="http://jsfiddle.net/nathansnider/o563bg44/5/" rel="nofollow noreferrer">http://jsfiddle.net/nathansnider/o563bg44/5/</a></p>
  
  <p>to implement into my map.</p>
  
  <p>For this purpose I used the following code:</p>
  
  <pre><code>   function getRadius(r) {
  //r = Math.sqrt(y / Math.PI)
  //return r;
  return r &gt; 100 ? 15 :
         r &gt; 50 ? 10 :
         r &gt; 20 ? 6 :
         r &gt; 10 ? 3 :
         0;
   }
  
  
   var legend = L.control({position: 'bottomright'});
  legend.onAdd = function (map) {
  
  var div = L.DomUtil.create('div', 'info legend');
  grades = [0, 10, 20, 50, 100],
  labels = ['&lt;strong&gt;Amount of units&lt;/strong&gt;'],
  categories = ['&gt; 100','50-100','1-50','N/A'];
  
  for (var i = 0; i &lt; grades.length; i++) {
      labels.push(
          '&lt;i class="circlepadding" style="width: '+Math.max(0,(19-1.8*getRadius))+'px;"&gt;&lt;/i&gt; &lt;i 
   style="background: #8080A0; width: '+getRadius*2+'px; height: '+getRadius*2+'px; border-radius: 
   50%; margin-top: '+Math.max(0,(9-getRadius))+'px;"&gt;&lt;/i&gt; ');
  }
  div.innerHTML = labels.join('&lt;br&gt;');
  return div;
   };
    legend.addTo(map);
  </code></pre>
  
  <p>but finally I got a poor result as per in the picture below:</p>
  
  <p><a href="https://i.stack.imgur.com/K0YV0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K0YV0.png" alt="enter image description here"></a></p>
  
  <p>Could someone help me with this problem?</p>