[GIS] Leaflet make legend with different circle sizes

Question

I would like to make the legend with different circle sizes in Leaflet.

I found one examples:

https://stackoverflow.com/questions/37446283/creating-legend-with-circles-leaflet-r

https://stackoverflow.com/questions/58505589/circles-in-legend-for-leaflet-map-with-addcirclemarkers-in-r-without-shiny

https://gist.github.com/BobTheScientist/2ea0e0258d98380337524a633039385e

But it looks like the code comes from R language instead of JavaScript, hance I have no clue how to input it into my map.

I found also a different example:

http://jsfiddle.net/nathansnider/o563bg44/5/

which is exactly what I need

Unfortunately the incorporation into my map wasn't successful. I have made something like this:

  var legend = L.control({position: 'bottomright'});
    legend.onAdd = function (map) {

     var div = L.DomUtil.create('div', 'info legend');
     grades = [0, 10, 20, 50, 100, 200, 500, 1000],
     labels = ['<strong>Amount of units</strong>'],
     from, to;
//iterate through grades and create a scaled circle and label for each
    for (var i = 0; i < grades.length; i++) {
      from = grades[i];
       to = grades[i + 1];
        labels.push(
        '<i class="circlepadding" style="width: '+Math.max(0,(19-1.8*getRadius(from)))+'px;"></i> <i style="background: #8080A0; width: '+getRadius(from)*2+'px; height: '+getRadius(from)*2+'px; border-radius: 50%; margin-top: '+Math.max(0,(9-getRadius(from)))+'px;"></i> ' + from);
    }
    div.innerHTML = labels.join('<br>');
    return div;
 };
  legend.addTo(map);

and there is nothing on my map.

The console says, that:

Uncaught ReferenceError: from is not defined
at NewClass.legend.onAdd ((index):709)
at NewClass.addTo (Control.js:70)
at (index):720

For this purpose I was searching through the web how to fix this and I found an example here:

https://tommcfarlin.com/javascript-reference-error-is-not-defined/

where as an additional part of the code I added:

 function acmeReferenceError( valueExists ) {

'use strict';

 if ( undefined === valueExists ) {

/* If this is hit, then the function is being invoked
 * before the variable in question has been defined.
 */

} else {

/* If this particular conditional is hit, then the function
 * is being invoked after the value in question has
 * been defined.
 */

 }

}

but without the result either.

COnsole states the same.

Can anyone help me?

Answer 1

According to this duplicate query posted here:

https://stackoverflow.com/questions/58917855/create-legend-with-different-circle-sizes-in-leaflet/58918645#58918645

I solved this issue this way:

My JS code looks as follows:

 function getRadius(r) {
return  r > 100 ? 12 :
        r > 50 ? 9 :
        r > 20 ? 6 :
        r > 10 ? 4 :
        0;
}

 var legend = L.control({position: 'bottomright'});
 legend.onAdd = function (map) {

 var div = L.DomUtil.create('div', 'info legend');
 grades = [15, 40, 80, 400],
 labels = ['<strong>Amount of units</strong>'],
 categories = ['N/A','<50','51-100', '>100'];

 for (var i = 0; i < grades.length; i++) {
        var grade = grades[i];//*0.5;
   labels.push(
        '<i class="circlepadding" style="width: '+Math.max(8,(7-2.2*getRadius(grade)))+'px;"></i> <i style="background: #8080A0; width: '+getRadius(grade)*2+'px; height: '+getRadius(grade)*2+'px; border-radius: 50%; margin-top: '+Math.max(0,(9-getRadius(grade)))+'px;"></i><i class="circlepadding" style="width: '+Math.max(2,(25-2*getRadius(grade)))+'px;"></i> ' + categories[i]);
   }
 div.innerHTML = labels.join('<br>');
 return div;
 };
 legend.addTo(map);

and the CSS section looks as follows:

  .info
  {
        padding: 6px 8px;
        font: 13px/16px Verdana, Geneva, sans-serif;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 10px;
    }

   .legend {
        line-height: 19px;
        padding:7px;
        color: #555;
       }

   .legend i {
        width: 15px;
        height: 15px;
        float: left;
        margin-right: 8px;
        opacity: 0.7;
      }

    .circle
 {
float: left;
border: 1px solid #222;
border-radius: 50%;
 }

 .legend .colorcircle {
border-radius: 50%;
width: 15px;
height: 15px;
margin-top: 0px;
 }
.legend .circlepadding {
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
}

which made me satisfied.

Alternatively you can remove the getRadius(r) function and set your grades (circlesize) manually.