Leaflet.js Circle to Polygon Conversion

Question

I'm using Leaflet.js to save coverage maps and am giving the user the option of using polygons or circles.

To keep all objects in the same format, I'm converting the circle to a polygon before saving.

However, when I then reload the circle it is oval-shaped.

I know that this is due to the earth's curve but I'm unsure how to correct my method to take this into account? (I've looked but can't find anything that gives the solution I'm after).

The main issue is the javascript method I'm using below as that doesn't take into account the earth's curve.

 // GenerateCirlcePolygon - Creates Circle from 360 line Segments 
 function GenerateCirlcePolygon(origin, radius) {
     var earthRadius = 6371;

     //latitude in radians
     var lat = (origin.Latitude * Math.PI) / 180;

     //longitude in radians 
     var lon = (origin.Longitude * Math.PI) / 180;
     //angular distance covered on earth's surface
     var d = parseFloat(radius) / earthRadius;
     polyPoints = new Array();

     for (i = 0; i <= 360; i++) {
         var point = new VELatLong(0, 0)
         var bearing = i * Math.PI / 180; //rad
         point.Latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(bearing));
         point.Longitude = ((lon + Math.atan2(Math.sin(bearing) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(point.Latitude))) * 180) / Math.PI;
         point.Latitude = (point.Latitude * 180) / Math.PI;
         polyPoints.push(point);
     }

Any advice at all would be great.

Why you don't store the layers as geojson? Then you will always be right — Falke Design, Mar 19 '21 at 12:17

score 2 · Accepted Answer · answered Mar 19 '21 at 12:45

2

You can use the built in function from leaflet-geoman: L.PM.Utils.circleToPolygon(circle, sides)

L.PM.Utils.circleToPolygon(circle, 60).addTo(map)

answered Mar 19 '21 at 12:45

Falke Design

10,635
3
15
30

Thanks for the reply, I can't see that function in the documentation. Is it an undocumented function or does it require another library? – Jon Martin Mar 22 '21 at 10:53
It is not documentent, but can used without problems. I'm one of the maintainer of Geoman. If you don't want to use this built-in function, you can copy it: [PolyToCircly](https://github.com/geoman-io/leaflet-geoman/blob/master/src/js/L.PM.Utils.js#L34) and the [wrapping calculation](https://github.com/geoman-io/leaflet-geoman/blob/25911084c4c93598b5d936bd85392432efc65532/src/js/helpers/index.js#L88) – Falke Design Mar 22 '21 at 11:10
Oh that's awesome thank you! I'll definitely use the built-in one and will let you know how I get on. Really appreciate the help! Also geoman is great so thank you for that too – Jon Martin Mar 22 '21 at 11:27
@JonMartin do u have an example of how u do it ? – user10863293 Jul 25 '22 at 15:42

Leaflet.js Circle to Polygon Conversion

1 Answers1