0

I am trying to create a Legend in Leaflet that contains the circles in the map. But, the size in the legend should the same size that it is in the map.

My code is next.

function getRadius(pop) {
  var maxSymbolsize = 20; // maximum symbol size
  var maxValue = 37393129; // highest population value in the dataset
  r = maxSymbolsize * Math.sqrt(pop/maxValue); // proportional by area
  return r;
}

function getColor(d) {
return d > 10000000  ? '#d7301f' :
       d > 5000000   ? '#fc8d59' :
       d > 1000000   ? '#fdcc8a' :
                       '#fef0d9' ;
}


var legendcolor = L.control({position: 'bottomright'});
 legendcolor.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend'),
        grades = [0, 1000000, 5000000, 10000000],
        labels = [];

    for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
        '<i class ="circle" style="background:' + getColor(grades[i] + 1) + '"></i> ' +
        grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
          }    return div;
   };
  legendcolor.addTo(map);

So, it gives me as a result: enter image description here

As you see, it has circles but I want the sizes both the same in legend and map.

Here you see the CSS if can be involved in the solution. Where can I inclue the function GetRadius to make possible in legend. Thanks.

.legend .circle {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin-top: 8px;
}
  • This is not really a GIS question but pure HTML. One possible solution is to have as many circle styles as there are grade ranges in the legend and then in the legend creation associate each grade range with corresponding style. – TomazicM Jul 9 at 5:15

Your Answer

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

Browse other questions tagged or ask your own question.