CODEWITHSUNDEEP
react-nativereact-native-maps
Graig Peru
Graig Peru

Reputation: 117

Map Zoom level base off radius React Native maps

I am using the expo react native map in my application. How can I set the zoom level of the map base off a given radius. For example I have a Mapview.circle that spans across a 10 miles radius, how can I get the map to zoom to level that shows the makers within the given radius of 10. I tried using using the longitude and latitude delata however not sure how this could be implemented.

Upvotes: 0

Views: 2277

Answers (1)

HungrySoul
HungrySoul

Reputation: 1231

Here is a snippet of the code i use to zoom in and out of maps for given radius. I might not be accurate but you can modify them accordingly.

// Define the const outside the class
const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = (Platform.OS === global.platformIOS ? 1.5 : 0.5);
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

// Use the below code to zoom to particular location with radius.
this.map.animateToRegion({ latitude: latitude, longitude: longitude, latitudeDelta: LATITUDE_DELTA * Number(radius/15), longitudeDelta: LONGITUDE_DELTA * Number(radius/15) }, 2000);

Finally, dont forget to add the ref in the 

ref={ref => { this.map = ref; }}

Upvotes: 2

Related Questions