2

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
  • 17,147
  • 12
  • 117
  • 144

2 Answers2

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
};
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
1

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.

Filip Savic
  • 2,737
  • 1
  • 29
  • 34