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.

Answer 1

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

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