feat: add map provider w/ zoom effect on precision change

nezz0746 · Nov 13, 2023 · abb1481 · abb1481
1 parent 9b07d83
commit abb1481
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 23 deletions.
diff --git a/apps/web/components/Map/Map.tsx b/apps/web/components/Map/Map.tsx
@@ -1,31 +1,36 @@
-import Map from "react-map-gl";
+import Map, { MapProvider } from "react-map-gl";
 import { commonLocations } from "@/services/constants";
 import GeohashLayer from "./GeohashLayer";
 import AccountMarker from "./AccountMarker";
+import ZoomEffects from "./ZoomEffects";
 
 const token = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
 
 const AppMap = () => {
   return (
-    <Map
-      mapboxAccessToken={token}
-      projection={{ name: "globe" }}
-      initialViewState={commonLocations.paris}
-      style={{
-        width: "100%",
-        height: "100%",
-      }}
-      interactiveLayerIds={["data"]}
-      mapStyle="mapbox://styles/nezz0746/closnc6ke00qa01nz5uvf7yad"
-    >
-      <div className="bg-white flex flex-row gap-2 items-center p-2 absolute top-[6px] left-[6px] border">
-        <p className="font-display font-bold tracking-tight text-xl">
-          Ensemble
-        </p>
-      </div>
-      <AccountMarker />
-      <GeohashLayer />
-    </Map>
+    <MapProvider>
+      <Map
+        id="mainMap"
+        mapboxAccessToken={token}
+        projection={{ name: "globe" }}
+        initialViewState={commonLocations.paris}
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+        interactiveLayerIds={["data"]}
+        mapStyle="mapbox://styles/nezz0746/closnc6ke00qa01nz5uvf7yad"
+      >
+        <div className="bg-white flex flex-row gap-2 items-center p-2 absolute top-[6px] left-[6px] border">
+          <p className="font-display font-bold tracking-tight text-xl">
+            Ensemble
+          </p>
+        </div>
+        <AccountMarker />
+        <GeohashLayer />
+        <ZoomEffects />
+      </Map>
+    </MapProvider>
   );
 };
 

diff --git a/apps/web/components/Map/ZoomEffects.tsx b/apps/web/components/Map/ZoomEffects.tsx
@@ -0,0 +1,31 @@
+import { usePosition } from "@/hooks/usePosition";
+import { useEffect } from "react";
+import { useMap } from "react-map-gl";
+
+const ZoomEffects = () => {
+  const precisionToZoom: Record<number, number> = {
+    2: 4,
+    3: 7,
+    4: 9,
+    5: 12,
+    6: 14,
+  };
+
+  const {
+    position: { precision, latitude, longitude },
+  } = usePosition();
+  const { mainMap } = useMap();
+
+  useEffect(() => {
+    if (precision) {
+      mainMap?.flyTo({
+        center: [longitude, latitude],
+        zoom: precisionToZoom[precision],
+      });
+    }
+  }, [precision]);
+
+  return null;
+};
+
+export default ZoomEffects;
diff --git a/apps/web/services/constants.ts b/apps/web/services/constants.ts
@@ -1,17 +1,36 @@
+import { Feature, Polygon } from "@turf/turf";
+
 export const commonLocations = {
   toulouse: {
     longitude: 1.444209,
     latitude: 43.604652,
-    zoom: 12,
+    zoom: 0,
   },
   paris: {
     longitude: 2.3488,
     latitude: 48.8534,
-    zoom: 12,
+    zoom: 2,
   },
   lille: {
     longitude: 3.057256,
     latitude: 50.631813,
-    zoom: 12,
+    zoom: 0,
+  },
+};
+
+export const globeFeature: Feature<Polygon> = {
+  type: "Feature",
+  properties: {},
+  geometry: {
+    type: "Polygon",
+    coordinates: [
+      [
+        [-180.0, 90.0],
+        [180.0, 90.0],
+        [180.0, -90.0],
+        [-180.0, -90.0],
+        [-180.0, 90.0],
+      ],
+    ],
   },
 };