CircleMarker
Quick answer
L.circleMarker renders a vector dot whose radius is given in pixels, so it keeps a constant screen size at every zoom level. It is the usual choice for large point datasets and classification symbols. Colors, strokes and fill follow the standard Path options.
L.circleMarker( latlng , options ) → CircleMarker
Key points
- radius defaults to 10 and is always measured in screen pixels.
- fillColor falls back to color when you leave the fill option unset.
- Switch to preferCanvas or a shared L.canvas renderer beyond a few thousand dots.
Example
var dots = [];
function render(list) {
dots.forEach(function (d) { map.removeLayer(d); });
dots = list.map(function (item) {
return L.circleMarker([item.lat, item.lng], {
radius: 4 + item.value * 0.25,
color: '#ffffff',
weight: 1,
fillColor: item.value > 60 ? '#c2410c' : '#1f5fd0',
fillOpacity: 0.85
}).bindTooltip(item.name + '：' + item.value).addTo(map);
});
}
Notes
- Using circleMarker for real area coverage is wrong because its radius never scales with zoom.
- Thousands of SVG circle markers create matching DOM nodes and make dragging sluggish.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). CircleMarker. https://www.jingweizhi.com/en/leaflet/api/circle-marker.html (accessed 2026-11-03).