feat(carto): gestion zoom + refacto (#718)

front/constants/aroundMe.constants.ts

@@ -4,14 +4,20 @@ export const COORDINATE_PARIS = {
   longitude: 2.342685107141733,
 };
 
-export const DEFAULT_LATITUDE_DELTA = 0.2;
-export const DEFAULT_LONGITUDE_DELTA = 0.2;
+export const POPULATION_STEP_TWO_MILLION = 2000000;
+export const POPULATION_STEP_EIGHT_HUNDRED_THOUSAND = 800000;
+export const POPULATION_STEP_THREE_HUNDRED_THOUSAND = 300000;
+
+export const DEFAULT_DELTA = 0.1;
+export const DELTA_HIGH = 0.01;
+export const DELTA_MIDDLE = 0.02;
+export const DELTA_LOW = 0.03;
 
 export const INITIAL_REGION = {
   latitude: COORDINATE_PARIS.latitude,
-  latitudeDelta: DEFAULT_LATITUDE_DELTA,
+  latitudeDelta: DEFAULT_DELTA,
   longitude: COORDINATE_PARIS.longitude,
-  longitudeDelta: DEFAULT_LONGITUDE_DELTA,
+  longitudeDelta: DEFAULT_DELTA,
 };
 
 export const POSTAL_CODE_MAX_LENGTH = 5;
@@ -21,6 +27,12 @@ export const MAX_NUMBER_POI_WITHOUT_FILTER = 20;
 export const getApiUrlWithParam = (postalCode: string): string =>
   `https://api-adresse.data.gouv.fr/search/?q=${postalCode}&type=municipality&limit=1`;
 
+export const getApiGouvUrlForPopulation = (
+  lat: number,
+  long: number
+): string => `https://geo.api.gouv.fr/communes?lat=${lat}&lon=${long}&fields=&format=json&geometry=centre
+`;
+
 export enum LatLngPointType {
   topLeft = "topLeft",
   bottomRight = "bottomRight",
@@ -52,7 +64,7 @@ export enum CartoFilterEnum {
   etape = "etape",
 }
 
-export const MAPVIEW_MIN_ZOOM_LEVEL = 10;
+export const MAPVIEW_MIN_ZOOM_LEVEL = 13;
 
 export const ERROR_LOCATION_PROVIDER_UNAVAILABLE_MESSAGE =
   "Location provider is unavailable. Make sure that location services are enabled.";

front/screens/aroundMe/searchByPostalCode.component.tsx

@@ -32,7 +32,7 @@ interface Props {
   setAndGoToNewRegion: (region: Region) => void;
   showSnackBarWithMessage: (message: string) => void;
   setIsLoading: (value: boolean) => void;
-  updateUserLocation: (coordinates: LatLng | undefined) => void;
+  updateUserLocation: (region: Region | undefined) => void;
   setSearchIsReady: (value: boolean) => void;
   setLocationPermissionIsGranted: (value: boolean) => void;
 }
@@ -93,7 +93,19 @@ const SearchByPostalCode: React.FC<Props> = ({
           }
         }
       }
-      updateUserLocation(currentLocation ? currentLocation.coords : undefined);
+      if (currentLocation) {
+        const newDelta = await AroundMeUtils.adaptZoomAccordingToRegion(
+          currentLocation.coords.latitude,
+          currentLocation.coords.longitude
+        );
+
+        updateUserLocation({
+          latitude: currentLocation.coords.latitude,
+          latitudeDelta: newDelta,
+          longitude: currentLocation.coords.longitude,
+          longitudeDelta: newDelta,
+        });
+      } else updateUserLocation(undefined);
     } catch {
       updateUserLocation(undefined);
     }
@@ -127,6 +139,12 @@ const SearchByPostalCode: React.FC<Props> = ({
     );
 
     if (newRegion) {
+      const newDelta = await AroundMeUtils.adaptZoomAccordingToRegion(
+        newRegion.latitude,
+        newRegion.longitude
+      );
+      newRegion.latitudeDelta = newDelta;
+      newRegion.longitudeDelta = newDelta;
       setAndGoToNewRegion(newRegion);
     } else {
       showSnackBarWithMessage(Labels.aroundMe.postalCodeNotFound);

front/screens/aroundMe/tabAroundMeScreen.component.tsx

@@ -242,11 +242,15 @@ const TabAroundMeScreen: React.FC = () => {
         }}
         showSnackBarWithMessage={showSnackBarWithMessage}
         setIsLoading={setIsLoading}
-        updateUserLocation={async (coordinates: LatLng | undefined) => {
-          if (coordinates) {
+        updateUserLocation={async (newRegion: Region | undefined) => {
+          if (newRegion) {
             setSelectedPoiIndex(-1);
-            setCurrentUserLocation(coordinates);
-            moveMapToCoordinates(coordinates.latitude, coordinates.longitude);
+            setCurrentUserLocation({
+              latitude: newRegion.latitude,
+              longitude: newRegion.longitude,
+            });
+            setRegion(newRegion);
+            mapRef.current?.animateToRegion(newRegion);
           } else {
             const savedRegion: Region | undefined =
               await StorageUtils.getObjectValue(

front/screens/epdsSurvey/beContacted.component.tsx

@@ -274,7 +274,6 @@ const BeContacted: React.FC<Props> = ({ visible, hideModal }) => {
                   selectedValue={numberOfChildren}
                   style={{ height: 30, width: 100 }}
                   onValueChange={(itemValue) => {
-                    console.log(Number(itemValue));
                     setNumberOfChildren(Number(itemValue));
                   }}
                 >

front/utils/aroundMe.util.ts

@@ -35,9 +35,9 @@ export const searchRegionByPostalCode = async (
     const coordinates: string[] = json.features[0].geometry.coordinates;
     newRegion = {
       latitude: Number(coordinates[1]),
-      latitudeDelta: AroundMeConstants.DEFAULT_LATITUDE_DELTA,
+      latitudeDelta: AroundMeConstants.DEFAULT_DELTA,
       longitude: Number(coordinates[0]),
-      longitudeDelta: AroundMeConstants.DEFAULT_LONGITUDE_DELTA,
+      longitudeDelta: AroundMeConstants.DEFAULT_DELTA,
     };
   }
 
@@ -69,3 +69,24 @@ export const getLatLngPoint = (
       };
   }
 };
+
+export const adaptZoomAccordingToRegion = async (
+  lat: number,
+  long: number
+): Promise<number> => {
+  const response = await fetch(
+    AroundMeConstants.getApiGouvUrlForPopulation(lat, long) as RequestInfo
+  );
+  const json = await response.json();
+  if (json[0].population) {
+    const population = json[0].population;
+    if (population > AroundMeConstants.POPULATION_STEP_TWO_MILLION)
+      return AroundMeConstants.DELTA_HIGH;
+    if (population > AroundMeConstants.POPULATION_STEP_EIGHT_HUNDRED_THOUSAND)
+      return AroundMeConstants.DELTA_MIDDLE;
+    if (population > AroundMeConstants.POPULATION_STEP_THREE_HUNDRED_THOUSAND)
+      return AroundMeConstants.DELTA_LOW;
+  }
+
+  return AroundMeConstants.DEFAULT_DELTA;
+};