React native MapView: what is latitudeDelta longitudeDelta
I also came here because I couldn't find any good documentation and Googling didn't help. The following is from my own research:
Only one of either latitudeDelta
or longitudeDelta
is ever used for calculating the size of the map. It takes the larger of the two according to the following formula and ignores the other. This is done to avoid stretching the map.
- The map is sized according to the width and height specified in the styles and/or calculated by react-native.
- The map computes two values,
longitudeDelta/width
andlatitudeDelta/height
, compares those 2 computed values, and takes the larger of the two. - The map is zoomed according to the value chosen in step 2 and the other value is ignored.
- If the chosen value is
longitudeDelta
, then the left edge islongitude - longitudeDelta
and the right edge islongitude + longitudeDelta
. The top and bottom are whatever values are needed to fill the height without stretching the map. - If the chosen value is
latitudeDelta
, then the bottom edge islatitude - latitudeDelta
and the top edge islatitude + latitudeDelta
. The left and right are whatever values are needed to fill the width without stretching the map.
- If the chosen value is
Here are some examples:
// this uses latitudeDelta because 0.04/300 > 0.05/600
<MapView
style={{width: 600, height: 300}}
region={{
latitude: 31.776685,
longitude: 35.234491,
latitudeDelta: 0.04,
longitudeDelta: 0.05,
}}
/>
// this uses longitudeDelta because 0.05/600 > 0/myVar when myVar > 0
<MapView
style={{width: 600, height: myVar}}
region={{
latitude: 40.689220,
longitude: -74.044502,
latitudeDelta: 0,
longitudeDelta: 0.05,
}}
/>
i found this in apple developer guide
The amount of east-to-west distance (measured in degrees) to display for the map region. The number of kilometers spanned by a longitude range varies based on the current latitude. For example, one degree of longitude spans a distance of approximately 111 kilometers (69 miles) at the equator but shrinks to 0 kilometers at the poles.
😀 there have an issue in GitHub too for that library that have been resolved
https://github.com/react-community/react-native-maps/issues/637
this visual explanation also help stackoverflow.com
in this Wikipedia article it shows how to calculate exact value
https://en.wikipedia.org/wiki/Latitude#Length_of_a_degree_of_latitude