Dynamic Lat Lang inside a MapView in react-native

Issue

Am using expo MapView.and i'm searching solution for How to find lat and land with respect to the phone's height and width .Ex : [ [lat, lang],[lat, lang],[lat, lang],[lat, lang] ] .

Can someone help/clarify me pls .

Solution

When you get a region object from MapView via onRegionChange or any other similar event, that object contains 4 properties.

Example

const region = {
  latitude: 37.78825,
  longitude: -122.4324,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
}

Delta values are for difference between the minimum and maximum points that you want displayed.

(Image from MKMapView and Zoom Levels: A Visual Guide)

With this information you can calculate the 4 corners of the MapView (map bounds) or you can use them to set the level of zoom.

Example (Not tested so there might be some error on calculation)

If we set our MapView on region given in the example below, our four corners will be the positions calculated below.

const leftTopLongitude = region.longitude - (region.longitudeDelta / 2);
const rightTopLongitude = region.longitude + (region.longitudeDelta / 2);
const leftTopLatitude = region.latitude + (region.latitudeDelta / 2);
const rightTopLatitude = region.latitude + (region.latitudeDelta / 2);

const leftBottomLongitude = region.longitude - (region.longitudeDelta / 2);
const rightBottomLongitude = region.longitude + (region.longitudeDelta / 2);
const leftBottomLatitude = region.latitude - (region.latitudeDelta / 2);
const rightBottomLatitude = region.latitude - (region.latitudeDelta / 2);

Answered By - bennygenel