How to calculate delta latitude and longitude for MapView component in React-Native?

Question

How can i calculate delta-latitude and delta-longitude values form latitude and longitude values for MapView component in React-Native. Thank You

Answer 1

longitudeDelta and latitudeDelta is described will in the source code MapView, where it says difference between the minimum and maximum points that you want displayed.

So, if you want to find the latitudeDelta then you should calculate the max difference between your latitudes and likewise for the longitude delta. You can look at Ryan H.'s answer to see an actual implementation.

Answer 2

If you have an array of coordinates and you want a region that will fit all these points, you can do something like this:

const regionContainingPoints = points => {
  let minLat, maxLat, minLng, maxLng;

  // init first point
  (point => {
    minLat = point.latitude;
    maxLat = point.latitude;
    minLng = point.longitude;
    maxLng = point.longitude;
  })(points[0]);

  // calculate rect
  points.forEach(point => {
    minLat = Math.min(minLat, point.latitude);
    maxLat = Math.max(maxLat, point.latitude);
    minLng = Math.min(minLng, point.longitude);
    maxLng = Math.max(maxLng, point.longitude);
  });

  const midLat = (minLat + maxLat) / 2;
  const midLng = (minLng + maxLng) / 2;

  const deltaLat = (maxLat - minLat);
  const deltaLng = (maxLng - minLng);

  return {
    latitude: midLat, longitude: midLng,
    latitudeDelta: deltaLat, longitudeDelta: deltaLng,
  };
}

// example region
const region = regionContainingPoints([
  {latitude: 47.12345, longitude: -124.12345},
  {latitude: 47.23456, longitude: -124.23456},
  {latitude: 47.34567, longitude: -124.34567},
]);

Then use region with react-native-maps.

Note: I do no error checking in my example.