diff --git a/src/components/LocationPicker/LocationPickerContainer.js b/src/components/LocationPicker/LocationPickerContainer.js index c1cb26d99..8b3455620 100644 --- a/src/components/LocationPicker/LocationPickerContainer.js +++ b/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, } ); }; diff --git a/src/components/LocationPicker/LocationSearch.tsx b/src/components/LocationPicker/LocationSearch.tsx index de3f2feef..3325b257c 100644 --- a/src/components/LocationPicker/LocationSearch.tsx +++ b/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 ), );