JSFiddle - React, Tailwind, and code Playground
HTML
<pre id="res"></pre>
JavaScript
function toRadians(angleInDegrees) {
return angleInDegrees * Math.PI / 180;
}
function toDegrees(angleInRadians) {
return angleInRadians * 180 / Math.PI;
}
function offset(c1, distance, bearing) {
var lat1 = toRadians(c1[1]);
var lon1 = toRadians(c1[0]);
var dByR = distance / 6378137; // distance divided by 6378137 (radius of the earth) wgs84
var lat = Math.asin(
Math.sin(lat1) * Math.cos(dByR) +
Math.cos(lat1) * Math.sin(dByR) * Math.cos(bearing));
var lon = lon1 + Math.atan2(
Math.sin(bearing) * Math.sin(dByR) * Math.cos(lat1),
Math.cos(dByR) - Math.sin(lat1) * Math.sin(lat));
return [toDegrees(lon), toDegrees(lat)];
}
function circleToPolygon(center, radius, numberOfSegments) {
var n = numberOfSegments ? numberOfSegments : 32;
var flatCoordinates = [];
var coordinates = [];
for (var i = 0; i < n; ++i) {
flatCoordinates.push.apply(flatCoordinates, offset(center, radius, 2 * Math.PI * i / n));
}
flatCoordinates.push(flatCoordinates[0], flatCoordinates[1]);
for (var i = 0, j = 0; j < flatCoordinates.length; j += 2) {
coordinates[i++] = flatCoordinates.slice(j, j + 2);
}
return {
type: 'Polygon',
coordinates: [coordinates.reverse()]
};
};
// ----------------------------------------
// 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));
...