CODEWITHSUNDEEP
javascriptleaflet
Trygve
Trygve

Reputation: 621

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

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?

Upvotes: 2

Views: 380

Answers (2)

IvanSanchez
IvanSanchez

Reputation: 19069

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.

Upvotes: 3

fishergis
fishergis

Reputation: 1

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

Upvotes: -1

Related Questions