CODEWITHSUNDEEP
google-mapsreact-nativeandroid-mapviewexpo
Beckham_Vinoth
Beckham_Vinoth

Reputation: 721

Dynamic Lat Lang inside a MapView in react-native

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] ] . here i attached the screenshot

Can someone help/clarify me pls .

Upvotes: 0

Views: 1247

Answers (1)

bennygenel
bennygenel

Reputation: 24660

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)

example of delta points

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);

Upvotes: 2

Related Questions