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.

1 Answer 1


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>' : '+');

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.