fix(feed): boundaries and zoom for map feed (#1399)

Signed-off-by: clegirar <[email protected]> Co-authored-by: clegirar <[email protected]> Co-authored-by: clegirar <[email protected]>
TERITORI · Dec 6, 2024 · fb82523 · fb82523
1 parent 49cccf4
commit fb82523
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/packages/components/socialFeed/Map/Map.web.tsx b/packages/components/socialFeed/Map/Map.web.tsx
@@ -30,6 +30,7 @@ import {
   getMapPostIconColorRgba,
   getMapPostIconSVGString,
   MAP_LAYER_URL,
+  MAP_MAX_BOUND,
 } from "@/utils/feed/map";
 import { zodTryParseJSON } from "@/utils/sanitize";
 import {
@@ -49,16 +50,28 @@ interface MapManagerProps {
   setBounds: Dispatch<SetStateAction<LatLngBounds | null>>;
   creatingPostLocation?: CustomLatLngExpression;
   consultedPostLocation?: CustomLatLngExpression;
+  setMinZoom: Dispatch<SetStateAction<number>>;
 }
 const MapManager = ({
   setBounds,
   creatingPostLocation,
   consultedPostLocation,
+  setMinZoom,
 }: MapManagerProps) => {
   const map = useMap();
   const [isMapReady, setMapReady] = useState(false);
   const [isConsultedPostConsulted, setConsultedPostConsulted] = useState(false);
 
+  const postLocationZoom = 12;
+
+  useEffect(() => {
+    // Calculate and set minimal zoom
+    const calculatedMinZoom = map.getBoundsZoom(MAP_MAX_BOUND, true);
+    setMinZoom(calculatedMinZoom);
+    map.setMinZoom(calculatedMinZoom);
+    map.setZoom(calculatedMinZoom);
+  }, [map, setMinZoom]);
+
   useEffect(() => {
     const updateBounds = () => {
       setBounds(map.getBounds());
@@ -78,11 +91,11 @@ const MapManager = ({
 
     // Center to creatingPostLocation when it's updated
     if (creatingPostLocation) {
-      map.setView(creatingPostLocation);
+      map.setView(creatingPostLocation, postLocationZoom);
     }
     // Center to consultedPostLocation when it's updated (Once)
     if (consultedPostLocation && !isConsultedPostConsulted) {
-      map.setView(consultedPostLocation);
+      map.setView(consultedPostLocation, postLocationZoom);
       setConsultedPostConsulted(true);
     }
 
@@ -111,6 +124,7 @@ export const Map: FC<MapProps> = ({
 }) => {
   const selectedNetworkId = useSelectedNetworkId();
   const [bounds, setBounds] = useState<LatLngBounds | null>(null);
+  const [minZoom, setMinZoom] = useState(2.15);
 
   // Fetch the consulted post
   const { post: consultedPost } = usePost(consultedPostId);
@@ -197,6 +211,7 @@ export const Map: FC<MapProps> = ({
           width: "100%",
           height: "100%",
           alignSelf: "center",
+          maxHeight: 1000,
         },
         style,
       ]}
@@ -205,8 +220,13 @@ export const Map: FC<MapProps> = ({
         center={
           consultedPostLocation || creatingPostLocation || DEFAULT_MAP_POSITION
         }
-        zoom={12}
+        zoom={minZoom}
+        minZoom={minZoom}
+        zoomSnap={0.5}
         attributionControl={false}
+        maxBounds={MAP_MAX_BOUND}
+        maxBoundsViscosity={1.0}
+        style={{ width: "100%", height: "100%" }}
       >
         {/*----Loads and displays tiles on the map*/}
         <TileLayer noWrap attribution="" url={MAP_LAYER_URL} />
@@ -279,6 +299,7 @@ export const Map: FC<MapProps> = ({
           setBounds={setBounds}
           creatingPostLocation={creatingPostLocation}
           consultedPostLocation={consultedPostLocation}
+          setMinZoom={setMinZoom}
         />
       </MapContainer>
     </View>

diff --git a/packages/utils/feed/map.ts b/packages/utils/feed/map.ts
@@ -1,3 +1,4 @@
+import { LatLngBoundsLiteral } from "leaflet";
 import { FunctionComponent } from "react";
 
 import unknownSvg from "@/assets/icons/question-gray.svg";
@@ -12,8 +13,12 @@ import { CustomLatLngExpression, PostCategory } from "@/utils/types/feed";
 
 export const MAP_LAYER_URL = `https://{s}.tile.jawg.io/jawg-dark/{z}/{x}/{y}{r}.png?access-token=${process.env.EXPO_PUBLIC_LEAFLET_MAP_TOKEN}`;
 
-// Paris baguette
-export const DEFAULT_MAP_POSITION: CustomLatLngExpression = [48.8566, 2.3522];
+// Center of the map
+export const DEFAULT_MAP_POSITION: CustomLatLngExpression = [0, 0];
+export const MAP_MAX_BOUND: LatLngBoundsLiteral = [
+  [-90, -180], // South-West corner
+  [90, 180], // North-East corner
+];
 
 const musicPostSvgString = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g filter="url(#filter0_di_22136_173395)">