How do I get the latitude and longitude of a rectangle if I know the center and top left GPS positions?

Question

Background:

I'm trying to use a Google maps ground overlay but we are missing GPS positions.

We have a map to overlay that was drawn over a Google Maps screenshot. From this screenshot we recorded the Top Left and Center Center position.

We require the bottom right position to accurately overlay these images. See below:

The intial thinking is finding the difference between the two points and adding that onto the center point.

Attempted logic:

In JavaScript:

var topLeft      = [-32.8830055, 151.686214];
var centerCenter = [-32.9293803, 151.756686];

var difference1 = centerCenter[0] - ( (topLeft[0] - centerCenter[0] ) ) ;
var difference2 = centerCenter[1] - ( (topLeft[1] - centerCenter[1] ) ) ;

// being bottom right this should be "bigger" than above values
// outputs [-32.97575509999999, 151.827158];
var bottomRight  = [difference1 , difference2];

Problem:

However it appears this is where the curve of the earth throws that simple maths out the door. I'm guessing that what is happening below is why.

So given I have a rectangle overlay and I know the top left point and the center point can I work out the latitude and longitude of the bottom right point I.e X in the above diagram. Note I do not know the real world distances of this rectangle.

Note: I also know that I will have to change these to NW / SE to use ground overlays.

Answer 1

Approach(using the geometry-library):

1. calculate the heading from northwest to center

   google.maps.geometry.spherical.computeHeading(northwest, center);
   

2. calculate the distance from northwest to center

   google.maps.geometry.spherical.computeDistanceBetween(northwest, center);
   

3. calculate southeast by using

   google.maps.geometry.spherical.computeOffset(center,
                                                calculatedDistance,
                                                calculatedHeading);
   

function initialize() {

  var nw = new google.maps.LatLng(62.400471, -150.287132),
    center = new google.maps.LatLng(62.341145, -150.14637),
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 9,
      center: center
    }),
    heading, distance, se;

  heading = google.maps.geometry.spherical.computeHeading(nw, center);
  distance = google.maps.geometry.spherical.computeDistanceBetween(nw, center);
  se = google.maps.geometry.spherical.computeOffset(center, distance, heading);

  new google.maps.Marker({
    map: map,
    position: center
  });
  new google.maps.Marker({
    map: map,
    position: nw
  });
  new google.maps.Marker({
    map: map,
    position: se
  });

  new google.maps.GroundOverlay(
    'https://developers.google.com/maps/documentation/' +
    'javascript/examples/full/images/talkeetna.png', {
      north: nw.lat(),
      south: se.lat(),
      west: nw.lng(),
      east: se.lng()
    }, {
      map: map
    });


}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>

Answer 2

Use the below javascript function for getting lat/long list of the rectangle based on center and distance.latLngArr is a list of rectangle points.

Number.prototype.degreeToRadius = function () {
    return this * (Math.PI / 180);
};

Number.prototype.radiusToDegree = function () {
    return (180 * this) / Math.PI;
};

function getBoundingBox(fsLatitude, fsLongitude, fiDistanceInKM) {

    if (fiDistanceInKM == null || fiDistanceInKM == undefined || fiDistanceInKM == 0)
        fiDistanceInKM = 1;
    
    var MIN_LAT, MAX_LAT, MIN_LON, MAX_LON, ldEarthRadius, ldDistanceInRadius, lsLatitudeInDegree, lsLongitudeInDegree,
        lsLatitudeInRadius, lsLongitudeInRadius, lsMinLatitude, lsMaxLatitude, lsMinLongitude, lsMaxLongitude, deltaLon;
    
    // coordinate limits
    MIN_LAT = (-90).degreeToRadius();
    MAX_LAT = (90).degreeToRadius();
    MIN_LON = (-180).degreeToRadius();
    MAX_LON = (180).degreeToRadius();

    // Earth's radius (km)
    ldEarthRadius = 6378.1;

    // angular distance in radians on a great circle
    ldDistanceInRadius = fiDistanceInKM / ldEarthRadius;

    // center point coordinates (deg)
    lsLatitudeInDegree = fsLatitude;
    lsLongitudeInDegree = fsLongitude;

    // center point coordinates (rad)
    lsLatitudeInRadius = lsLatitudeInDegree.degreeToRadius();
    lsLongitudeInRadius = lsLongitudeInDegree.degreeToRadius();

    // minimum and maximum latitudes for given distance
    lsMinLatitude = lsLatitudeInRadius - ldDistanceInRadius;
    lsMaxLatitude = lsLatitudeInRadius + ldDistanceInRadius;

    // minimum and maximum longitudes for given distance
    lsMinLongitude = void 0;
    lsMaxLongitude = void 0;

    // define deltaLon to help determine min and max longitudes
    deltaLon = Math.asin(Math.sin(ldDistanceInRadius) / Math.cos(lsLatitudeInRadius));

    if (lsMinLatitude > MIN_LAT && lsMaxLatitude < MAX_LAT) {
        lsMinLongitude = lsLongitudeInRadius - deltaLon;
        lsMaxLongitude = lsLongitudeInRadius + deltaLon;
        if (lsMinLongitude < MIN_LON) {
            lsMinLongitude = lsMinLongitude + 2 * Math.PI;
        }
        if (lsMaxLongitude > MAX_LON) {
            lsMaxLongitude = lsMaxLongitude - 2 * Math.PI;
        }
    }

    // a pole is within the given distance
    else {
        lsMinLatitude = Math.max(lsMinLatitude, MIN_LAT);
        lsMaxLatitude = Math.min(lsMaxLatitude, MAX_LAT);
        lsMinLongitude = MIN_LON;
        lsMaxLongitude = MAX_LON;
    }

    return [
        lsMinLatitude.radiusToDegree(),
        lsMinLongitude.radiusToDegree(),
        lsMaxLatitude.radiusToDegree(),
        lsMaxLongitude.radiusToDegree()
    ];
};

use the below code to generate a lat/long array of rectanlge.

var lsRectangleLatLong = getBoundingBox(parseFloat(latitude), parseFloat(longitude), lsDistance);
            if (lsRectangleLatLong != null && lsRectangleLatLong != undefined) {
                latLngArr.push({ lat: lsRectangleLatLong[0], lng: lsRectangleLatLong[1] });
                latLngArr.push({ lat: lsRectangleLatLong[0], lng: lsRectangleLatLong[3] });
                latLngArr.push({ lat: lsRectangleLatLong[2], lng: lsRectangleLatLong[3] });
                latLngArr.push({ lat: lsRectangleLatLong[2], lng: lsRectangleLatLong[1] });
            }

Answer 3

lest start from beginning of your query. you have two latlng and now you want to get the latlng of the rectangle.

we will go with the calculation part first and then to the programming part. the assumptions are-

center point = e

top left = A

top right = B

bottom right = C

bottom left = D

mid point of AD=f

mid point of AB=g

Calculation Part

location g parameters- lat-A.lat, long-e.long

location f parameters- lat-e.lat, long-A.long

distance of A to g is = A.distanceTo(g)

distance of A to f is = A.distanceTo(f)

point B = 2Ag from A

point C = 2Af from B

point D = 2Af from A

Programming Part

LatLng A = null, B = null, C = null, D = null, e = null, f = null, g = null,temp=null;

e.latitude = your center latitude value;
e.longitude = your center longitude value;

A.latitude=your top left point latitude value;
A.longitude=your top left point longitude value;

f.latitude = e.latitude;
f.longitude = A.longitude;

g.latitude = A.latitude;
g.longitude = e.longitude;

double[] Ag = new double[1];
double[] Af = new double[1];

Location.distanceBetween(A.latitude, A.longitude, g.latitude, g.longitude, Ag);
Location.distanceBetween(A.latitude, A.longitude, f.latitude, f.longitude, Af);

temp=getDestinationPoint(A,90,(2*Ag));
B.latitude=temp.latitude;
B.longitude=temp.longitude;

temp=getDestinationPoint(B,180,(2*Af));
C.latitude=temp.latitude;
C.longitude=temp.longitude;

temp=getDestinationPoint(A,180,(2*Af));
D.latitude=temp.latitude;
D.longitude=temp.longitude;

private LatLng getDestinationPoint (LatLng source,double brng, double dist){
            dist = dist / 6371;
            brng = Math.toRadians(brng);

            double lat1 = Math.toRadians(source.latitude), lon1 = Math.toRadians(source.longitude);
            double lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
                    Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
            double lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
                            Math.cos(lat1),
                    Math.cos(dist) - Math.sin(lat1) *
                            Math.sin(lat2));
            if (Double.isNaN(lat2) || Double.isNaN(lon2)) {
                return null;
            }
            return new LatLng(Math.toDegrees(lat2), Math.toDegrees(lon2));
        }

Explanation

the point f and g are the mid points of the line AD and AB respectively. we can get it by altering the lat and long value of A and e points. and by these two lengths (Af and Ag) we can get the four latlng points of the rectangle as you require.

thank you

Answer 4

Are you averse to using a library that already has support for Haversine calculation of center points? (With tests to boot)

Check out Geolib: https://github.com/manuelbieh/Geolib

var center = geolib.getCenter([
    {latitude: 52.516272, longitude: 13.377722},
    {latitude: 51.515, longitude: 7.453619},
    {latitude: 51.503333, longitude: -0.119722}
]);

console.log(center);

// Output:
//
// {
//     "latitude": "52.009802",
//     "longitude": "6.629000",
//     "distance": 932.209
// }

A codepen demo you can play with: http://codepen.io/anon/pen/grbGrz/?editors=1010

You can always pare it down to just the function you need.

Answer 5

You'll likely require the Haversine formula for such a calculation. The math involved is obviously at a higher level than is typical for SO answers though so your question might actually belong on gis or math stack exchanges where some more experienced SO users might be able to give you a more detailed answer / example.