Can I avoid distorted circles at high zoom levels in Leaflet?

user_890132 0
Viewed 120

I'm making a garden planning app. I'd like to use satellite imagery for context, thus the choice of Leaflet. Now I'd like to plot out individual plant locations with circles around each plant to show the recommended planting radii. Compared to the typical features displayed by Leaflet these circles are very small, on the order of 0.1m radii or even smaller. I'm finding that circles render distorted at these small sizes, and that the direction of the distortion changes varies with the circle's location. Here's a fiddle:

https://jsfiddle.net/d2ncr6vq/1/

L.circle([-33.865002, 151.2094], {radius: 0.1}).addTo(map);
L.circle([-33.865004, 151.2094], {radius: 0.1}).addTo(map);
L.circle([-33.865006, 151.2094], {radius: 0.1}).addTo(map);
L.circle([-33.865008, 151.2094], {radius: 0.1}).addTo(map);

and a screenshot

nested circles, smallest distorted

Is this a sign that I should be using a different tool to draw at these small sizes, or is there a way to fix this?

leaflet javascript
2 Answers

This is a side effect of the geodetic approximation of circles to ellipses since #2345, and floating point arithmetic. Internally, Leaflet unprojects and reprojects the circle's center and topmost point to calculate the aspect ratio of the ellipses, and with such a small radius and non-trivial math being performed, the code is hitting the precision limits of floating-point numbers. The errors you see are, in fact, rounding errors.

The only approach to this is to work with (projected) coordinates closer to the (projected) origin of coordinates. Consider using a custom (local) CRS for this task.

user_47685020

I think you just want a circle with out distorted.you can try ‘CircleMarker’ in Leaflet ,and it's radius unit is in pixels

user_147321690
Related