3

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?

Working example

Not working example

0

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.

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.