JSFiddle - React, Tailwind, and code Playground

by kodisha

HTML

<pre id="res"></pre>

JavaScript

// ----------------------------------------
// Calculate new Lat/Lng from original points
// on a distance and bearing (angle)
// ----------------------------------------
let llFromDistance = function(latitude, longitude, distance, bearing) {
		// taken from: https://stackoverflow.com/a/46410871/13549	
    // distance in KM, bearing in degrees

    const R 		= 6378.1;                         // Radius of the Earth
    const brng	= bearing  	* Math.PI / 180;     // Convert bearing to radian
    let lat 		= latitude	* Math.PI / 180;      // Current coords to radians
    let lon 		= longitude	* Math.PI / 180;

    // Do the math magic
    lat = Math.asin(Math.sin(lat) * Math.cos(distance / R) + Math.cos(lat) * Math.sin(distance / R) * Math.cos(brng));
    lon += Math.atan2(Math.sin(brng) * Math.sin(distance / R) * Math.cos(lat), Math.cos(distance/R)-Math.sin(lat)*Math.sin(lat));

    // Coords back to degrees and return
    return [ (lat  * 180 / Math.PI), (lon  * 180 / Math.PI) ];

}

let pointsOnMapCircle = function(latitude, longitude, distance, numPoints) {
	const points = [];
  for (let i=0; i <= numPoints - 1; i++) {
  	const bearing = Math.round((360 / numPoints) * i);
    console.log(bearing, i);
  	const newPoints = llFromDistance(latitude, longitude, distance, bearing);
    points.push(newPoints);
  }
 return points;
}

// Generate 8 points on a 200 meter radius from a center of a Colloseum in Rome.
const points = pointsOnMapCircle(41.890242042122836, 12.492358982563019, 0.2, 8);


let geoJSON =  {
  "type": "FeatureCollection",
  "features": []
};
points.forEach((p) => {
	geoJSON.features.push({
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          p[1],
          p[0]
        ]
      }
    });
});


   
document.getElementById('res').innerHTML = JSON.stringify(geoJSON, true, 2);