11

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

Chethan Pasupuleti
  • 111
  • 1
  • 1
  • 4

2 Answers2

22

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.

Ryan H.
  • 7,374
  • 4
  • 39
  • 46
  • How add some padding while bound marker by this way? – Nisarg Thakkar Jun 20 '17 at 10:19
  • 2
    Just increase `deltaX` and `deltaY`. So, in the example given, just below the `deltaX` and `deltaY` calculations, add something like `deltaX += 0.02; deltaY += 0.02`. If you need this to be variable, pass in `inset` as a parameter, then `deltaX += inset`, etc. – Ryan H. Jun 22 '17 at 16:09
  • 1
    I just added multiplied the deltas by 1.25. So, everything the same but `var deltaX = (maxX - minX) * 1.25; var deltaY = (maxY - minY) * 1.25;` – sigmapi13 Jul 25 '19 at 10:01
  • Thank you so much Ryan H. You have solved my problem on uber like the app. – sadiq Dec 14 '19 at 22:02
  • Please use : let minLat = Math.min(...points.map(p => p.latitude)); let minLon = Math.min(...points.map(p => p.longitude)); 18 lines of code => 2 lines, clearer, faster. – Hugo Bounoua Oct 11 '21 at 23:01
0

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.

CallMeNorm
  • 2,299
  • 1
  • 16
  • 23