How to set zoom level in google map according to miles in react native?

Question

I have react native application using react-native-maps,in which there is a feature to display near by users based on radius chosen by user that works fine using geocode. but I am facing problem to set zoom level of Map based on user radius? if user selects maximum meter of radius then map should display whole world? How can I achieve this? to set zoom level dynamically based on radius chosen by user?

to set radius used react-native-slider, How can set zoom level on slide of slider?

score 0 · Answer 1 · answered May 09 '20 at 15:59

0

import { Dimensions} from 'react-native';
let {width, height} = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 1; //Increase or decrease the zoom level dynamically
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

<MapView
 region={{
  latitude: currentLocation.latitude,
  longitude: currentLocation.longitude,
  latitudeDelta: LATITUDE_DELTA,
  longitudeDelta: LONGITUDE_DELTA,
 }}>

answered May 09 '20 at 15:59

Ali Hayder

315
1
9

i don't think it is correct answer!, where is the radius ? – Sultan Ali Jan 01 '21 at 13:40

score 0 · Answer 2 · edited Jul 03 '21 at 06:00

0

      initialRegion:{
        latitude: parseFloat(28.999),
        longitude: parseFloat(28.999),
        latitudeDelta: 0.3822,
        longitudeDelta: Dimensions.get('window').width / Dimensions.get('window').height,
      }

edited Jul 03 '21 at 06:00

de.

7,068
3
40
69

answered Jun 21 '21 at 11:33

avantika bisht

1
1

2

Thank you for contributing an answer. Would you kindly edit your answer to to include an explanation of your code? That will help future readers better understand what is going on, and especially those members of the community who are new to the language and struggling to understand the concepts. – Jeremy Caney Jul 04 '21 at 23:42

score 0 · Answer 3 · answered Oct 03 '22 at 21:47

I searched around a lot for this and settled on this function which seems to work really well, if you know the radius of the center point you want to search in, it should generate an initial bounding box:

export const radiusToDelta = (radius: number, lat: number) => {
  // as described here: https://github.com/react-native-maps/react-native-maps/issues/505#issuecomment-354029449
  const oneDegreeOfLatitudeInMeters = 111.32 * 1000;
  const diameter = radius * 2;
  const delta =
    (diameter * 1609.34) /
    (oneDegreeOfLatitudeInMeters * Math.cos(lat * (Math.PI / 180)));

  return {
    latitudeDelta: delta,
    longitudeDelta: delta,
  };
};

How to set zoom level in google map according to miles in react native?

3 Answers3