Leaflet – How to Create a Legend for Points

leafletlegend

I have points like this in a leaflet map.

enter image description here

The points come originally from a GeoJSON file and I used L.circleMarker to convert them to circles. How can I create a legend for these points? Based on the Interactive Choropleth Map Example I was able to generate a legend like this:

enter image description here

The code I used is this:

var legend = L.control({position: 'bottomleft'});

legend.onAdd = function (map) {

  var div = L.DomUtil.create('div', 'info legend');



    categories = ['STX','HHX','HF','STX/HF'];

    for (var i = 0; i < categories.length; i++) {
        div.innerHTML +=
            '<i style="background:' + getColor(categories[i]) + '"></i> ' +
             (categories[i] ? categories[i] + '<br>' : '+');
    }

    return div;

But I like to also match the form (circles) to the legend, and not only the color.

Best Answer

You can use CSS border-radius to create circles.

For example, put this in your stylesheet/style tag:

.legend .circle {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 8px;
}

Then add the circle class to the color block when you create the marker:

    div.innerHTML +=
        '<i class="circle" style="background:' + getColor(categories[i]) + '"></i> ' +
         (categories[i] ? categories[i] + '<br>' : '+');
Related Question