Get latitudeDelta and longitudeDelta from viewport in React Native

Question

I have this data and I want to get latitudeDelta/longitudeDelta too

geometry:{
    location:{
        lat:35.7212504,
        lng:51.36276979999999
    },
    viewport:{
        northeast:{lat: 35.7290254, lng: 51.380868},
        southwest:{lat: 35.7004529, lng: 51.3492823},
    }
}

I'm going to get latitudeDelta/longitudeDelta with this data Of course, I would say that I use react-native-google-places-autocomplete and this data is output

Mahdi Bashirpour · Accepted Answer · 2020-12-15T11:00:22.453

4

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.0922;

const lat = details.geometry.location.lat;
const lng = details.geometry.location.lng;
const latDelta = details.geometry.viewport.northeast.lat - details.geometry.viewport.southwest.lat;
const lngDelta = latDelta * ASPECT_RATIO;

let coordinate = {
    latitude: lat,
    longitude: lng,
    latitudeDelta: latDelta,
    longitudeDelta: lngDelta
};

edited Dec 15 '20 at 11:00

answered Jun 30 '18 at 19:44

Mahdi Bashirpour

17,147
12
117
144

These links helped me a lot https://stackoverflow.com/questions/36685372/how-to-zoom-in-out-in-react-native-map/36688156#36688156 AND http://troybrant.net/blog/2010/01/mkmapview-and-zoom-levels-a-visual-guide/ AND https://github.com/react-community/react-native-maps/blob/master/example/examples/DisplayLatLng.js#L41 – Mahdi Bashirpour Jun 30 '18 at 19:46

Filip Savic · Answer 2 · 2020-12-15T20:05:20.880

If by "from viewport" you mean "what the map is currently showing at it's latitude-longitude position and current zoom level (latitude and longitude deltas)", you can:

As Exilz said in his comment on a github issue

...the region value can be acquired with the event onRegionChangeComplete.

If you want to zoom programmatically on anything, you can use the method animateToRegion and pass the coords, and the deltas you got from onRegionChangeComplete. You just have to find your desired "zoom" by pinching the map, and note down these values.

Here's his sample of code to center / zoom the map on one of his markers :

onPressMarker (markerData) {
    this.setState({ openedMarker: markerData });
    this.refs.map.animateToRegion({
        latitude: parseFloat(markerData.latitude),
        longitude: parseFloat(markerData.longitude),
        latitudeDelta: 0.0043,
        longitudeDelta: 0.0034
    });
}

I mostly copied his content, so I urge you go to the github issue and like his comment.

Get latitudeDelta and longitudeDelta from viewport in React Native

2 Answers2