How to create a square polygon with knowing single coordinate, angle and distance?

Question

How can I create a polygon(square) with only knowing coordinate of single point with distance of each side (3km) and angle which is 90 degree using javascript. if I will have the coordinate of all 4 point then i can draw a rectangle.. Any suggestion will be of great help.

Answer 1

Mathematically, you cannot draw a square on a sphere, but we'll assume that:

1. the distance is small enough compared to the Earth that it doesn't matter and we can approximate a flat surface
2. it's not in the polar regions, as that messes with the maths.

From what I understood of your question, your start with Point 1 and the angle alpha which is the direction to the north (heading). If you define your angle differently, you'll have to adapt.

So we start with the following (I put the angle at 30 so it's more visible):

The first point is defined by lat1,lng1

var alpha = 30;
var dist=3;
var Rearth=6371.0

let cosa=Math.cos(alpha* Math.PI/180);
let sina=Math.sin(alpha* Math.PI/180);
let dlng=Rearth*Math.cos(lat1* Math.PI/180)

( dlng is the correction factor as the longitude dimensions gets smaller as the latitude goes from the equator to the poles. As the square is small, we can assume that the difference of latitude between the sides of the square doesn't really matter)

and to get to point 2 (as the angle between the centre of the earth and the side of the square is very small, there's no need to add a asin() function, as beta ~ sin(beta) in radians )

let lat2 = lat1 + (dist*cosa/Rearth*180/Math.PI);
let lng2 = lng1 + (dist*sina/(dlng)*180/Math.PI);

then we can find points 3 and 4 in a similar way:

let lat3 = lat2 - (dist*sina/Rearth*180/Math.PI);
let lng3 = lng2 + (dist*cosa/(dlng)*180/Math.PI);

let lat4=lat1 - dist*sina/Rearth*180/Math.PI;
let lng4=lng1 + dist*cosa   /(dlng)*180/Math.PI;

and then you can use the lat,lng pairs to create a polygon:

var latlngs = [[lat1, lng1],[lat2, lng2],[lat3,lng3],[lat43,lng43],[lat4,lng4]];
L.polygon(latlngs, {color: 'blue'}).addTo(map);

For example, with dist=16km and alpha=45, you can draw a square that fits over the boundaries of Washington DC: