Is there any difference between Circle and CircleMaker on leaflet? On example the only difference looks like one might have a children, though, on docs, both allow children. So whats the difference?
<Circle center={center} pathOptions={fillBlueOptions} radius={200} />
<CircleMarker center={[51.51, -0.12]} pathOptions={redOptions} radius={20}>
<Popup>Popup in CircleMarker</Popup>
</CircleMarker>
Thank you.
A CircleMarker will stay always on the same pixel size / radius, a Circle has always the same meter size / radius.
So when you zoom, you will see that the CircleMarker is not changing the size.
Simple Vanilla example:
L.circle([0,0], {radius: 200000}).addTo(map)
L.circleMarker([0,2], {radius: 20, color: 'red'}).addTo(map)
Consider CircleMarker to be what its name clearly states, a marker. Radius property exists for display purpose and is calculated in pixels, not in a metric unit of length (e.g. meters). Its geometry is a point.
On the other hand, a Circle is actually a circular geometry with a radius in a metric unit of length. Its geometry is a circular area.
For example, you could use a CircleMarker (just like any other marker) for displaying a communication antenna. You could use a Circle to display the coverage of the communication antenna.
It is strange,
"A CircleMarker will stay always on the same pixel size / radius, a Circle has always the same meter size / radius. So when you zoom, you will see that the CircleMarker is not changing the size."
L.circle([0,0], {radius: 100000}).addTo(map)
L.circleMarker([0,2], {radius: 50}).addTo(map)
https://jsfiddle.net/falkedesign/7tfbv1w5/
But it actually seems like CircleMarker is the one that is scaling together with zoom out, and Circle is the one that is not changing the size, and stay the same.