React native MapView: what is latitudeDelta longitudeDelta

Question

In the example from react native mapview they have latitudeDelta and longitudeDelta. Is it equal to the height and width? And in what unit? Accoring to their github comment , it says

Distance between the minimum and the maximum latitude/longitude to be displayed.

But that doesn't help me out. I want to know what the user see on the map.

Foreandafter

Possible duplicate of How to zoom in/out in react-native-map? – Corunna

This was the best explanation so far for me: #36685872 – Funds

Latitude and longitude define the center of the map, and latitude delta and longitude delta define how much content besides the center will be visible (it indirectly sets the zoom level of the map). – Thorwald

Answer 1

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.

1. The map is sized according to the width and height specified in the styles and/or calculated by react-native.
2. The map computes two values, longitudeDelta/width and latitudeDelta/height, compares those 2 computed values, and takes the larger of the two.
3. 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 is longitude - longitudeDelta and the right edge is longitude + 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 is latitude - latitudeDelta and the top edge is latitude + latitudeDelta. The left and right are whatever values are needed to fill the width without stretching the map.

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,
  }}
/>

Lithe

Answer 2

You need

"centroid": {
    "latitude": "24.2472",
    "longitude": "89.920914"
},
"boundingBox": {
    "southWest": {
        "latitude": "24.234631",
        "longitude": "89.907127"
    },
    "northEast": {
        "latitude": "24.259769",
        "longitude": "89.934692"
    }
}

or similar data to calculate latitudeDelta and longitudeDelta properly.

Below is a demo code for react/react-native.

componentDidMount() {
    const { width, height } = Dimensions.get('window');
    const ASPECT_RATIO = width / height;

    const lat = parseFloat(centroid.latitude);
    const lng = parseFloat(centroid.longitude);
    const northeastLat = parseFloat(boundingBox.northEast.latitude);
    const southwestLat = parseFloat(boundingBox.southWest.latitude);
    const latDelta = northeastLat - southwestLat;
    const lngDelta = latDelta * ASPECT_RATIO;

    this.setState({
      region: {
        latitude: lat,
        longitude: lng,
        latitudeDelta: latDelta,
        longitudeDelta: lngDelta
      }
    })     
}

Vilipend

I've spent two hours searching for this answer. Taking the northeastLat minus the southwestLat worked perfectly. This needs to be shared more across the web! Thank you so much. – Desrosiers

Answer 3

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

Selfreproach

Answer 4

If you, like me, want to open google maps with a fixed width of x kilometeres then Nima's comment is very useful :)

Latitude Deltas for 1km are consistent wherever you are on the earth (1 degree of Latitude is ~110.574km)

But 1km requires a different londitude delta depending on how far you are from the equator. Basically, 1 degree of londitude covers ~111km on the equator, but isnt very far at all in the arctic as this image illustrates:

So I took my learning from other StackOverflow posts and wanted to share my simple conversions for km<-->latitude and km<-->londitude that are as accurate as can be without getting into funky geophysics about the earth not being an exact sphere.

The following should be more than sufficient for most people's needs!:

function radiansToDegrees(angle) {
  return angle * (180 / Math.PI);
}

function degreesToRadians(angle) {
  return angle * (Math.PI / 180);
}

function latitudesToKM(latitudes) {
  return latitudes * 110.574;
}

function kMToLatitudes(km) {
  return km / 110.574;
}

function longitudesToKM(longitudes, atLatitude) {
  return longitudes * 111.32 * Math.cos(degreesToRadians(atLatitude));
}

function kMToLongitudes(km, atLatitude) {
  return km * 0.0089831 / Math.cos(degreesToRadians(atLatitude));
}

So to open a react-native-maps view at point [-0.056809, 51.588491] with width 1km, you just need to do:

<MapView
  region={{
  latitude: 51.588491,
  latitudeDelta: 0.00001, //any number significantly smaller than longitudeDelta
  longitude: -0.056809,
  longitudeDelta: kMToLongitudes(1.0, 51.588491),
          }}
  ...

All this info is already out there in other StackOverflow posts but i wanted to share this all in one place in case it saves some people some time!

Aggressor