Search code examples
androidiosreact-nativereact-native-maps

Zoom In/Out react-native-maps based on radius in km/miles

I have a requirement in my react-native app where in which if the user provides a number which will be the number of kilometres or miles (like 5 or 10), the map should zoom in/out showing the area with radius as the input number.

How can I change the latitudeDelta and longitudeDelta values based on those input numbers.

Please help me out. Thanks in advance.

Solution

  • latitudeDelta is the amount of degrees that are visible on the screen. Approx 111.045 KM is always equal to 1 degree, so you can calculate the latitudeDelta of the currently visible area in KM with this

    latitudeDelta = diameter (UserEntered) / 111.045

    This is assuming the screen is in portrait mode and, therefore, latitudeDelta is the larger value. If not, use longitudeDelta instead.

    for updating map you can set state variables for longitudeDelta and latitudeDelta and when user enters value you can do calculation from the above formula and update these state variables and map will eventually also update.