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

Mair

Answer 1

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.

Qualifier

How add some padding while bound marker by this way? – Okubo

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. – Qualifier

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; – Floatable

Thank you so much Ryan H. You have solved my problem on uber like the app. – Karmen

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. – Chessboard

Answer 2

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.

Savoirvivre