I have points like this in a leaflet map.
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:
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:
Then add the circle class to the color block when you create the marker: