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.
You can use the built in function from leaflet-geoman
: L.PM.Utils.circleToPolygon(circle, sides)
L.PM.Utils.circleToPolygon(circle, 60).addTo(map)