Merge pull request #3703 from inaturalist/mob-1437-location-picker-map-should-zoom-to-fill-location-when

Mob 1437 location picker map should zoom to fill location when

src/components/LocationPicker/LocationPickerContainer.js

@@ -2,6 +2,7 @@
 
 import { useNavigation } from "@react-navigation/native";
 import {
+  getMapRegion,
   latitudeDeltaToMeters,
   metersToLatitudeDelta,
 } from "components/SharedComponents/Map/helpers/mapHelpers";
@@ -201,19 +202,33 @@ const LocationPickerContainer = ( ): Node => {
 
   const selectPlaceResult = place => {
     const { coordinates } = place.point_geojson;
+    let newRegion = {
+      ...region,
+      latitude: coordinates[1],
+      longitude: coordinates[0],
+    };
+
+    if ( place.bounding_box_geojson?.coordinates?.[0] ) {
+      // bbox is a 5-point clockwise rectangle starting from SW (5th === 1st),
+      // so the 1st and 3rd points give us the SW and NE corners.
+      const [
+        [swlng, swlat],
+        _nwPoint,
+        [nelng, nelat],
+      ] = place.bounding_box_geojson.coordinates[0];
+      // Take only the deltas from getMapRegion and keep the place's point_geojson as the center
+      // this gives us a more helpfully placed crosshair
+      const { latitudeDelta, longitudeDelta } = getMapRegion( {
+        swlng, swlat, nelng, nelat,
+      } );
+      newRegion = { ...newRegion, latitudeDelta, longitudeDelta };
+    }
+
     dispatch( {
       type: "SELECT_PLACE_RESULT",
       locationName: place.display_name,
-      region: {
-        ...region,
-        latitude: coordinates[1],
-        longitude: coordinates[0],
-      },
-      regionToAnimate: {
-        ...region,
-        latitude: coordinates[1],
-        longitude: coordinates[0],
-      },
+      region: newRegion,
+      regionToAnimate: newRegion,
     } );
   };
 

src/components/LocationPicker/LocationSearch.tsx

@@ -20,6 +20,9 @@ interface Place {
   point_geojson: {
     coordinates: [number, number];
   };
+  bounding_box_geojson?: {
+    coordinates: [number, number][][];
+  };
 }
 interface Props {
   locationName: string;
@@ -44,7 +47,7 @@ const LocationSearch = ( {
     ( optsWithAuth: ApiOpts ) => fetchSearchResults( {
       q: locationName,
       sources: "places",
-      fields: "place,place.display_name,place.point_geojson",
+      fields: "place,place.display_name,place.point_geojson,place.bounding_box_geojson",
     }, optsWithAuth ),
   );