obtain center map and fly to on utils

Vizzuality · Sep 18, 2023 · 5e945f9 · 5e945f9
1 parent 846cca0
commit 5e945f9
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 42 deletions.
diff --git a/app/layout/projects/new/map/component.tsx b/app/layout/projects/new/map/component.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useAppSelector } from 'store/hooks';
 
@@ -23,6 +23,7 @@ import LoadingControl from 'components/map/controls/loading';
 import ZoomControl from 'components/map/controls/zoom';
 import type { NewProjectFields } from 'layout/projects/new/form';
 import { MapProps } from 'types/map';
+import { centerMap } from 'utils/map';
 
 const minZoom = 2;
 const maxZoom = 20;
@@ -54,6 +55,8 @@ export const ProjectNewMap = ({
   const [mapInteractive, setMapInteractive] = useState(false);
   const [mapTilesLoaded, setMapTilesLoaded] = useState(false);
 
+  const mapRef = useRef<mapboxgl.Map | null>(null);
+
   const accessToken = useAccessToken();
 
   const LAYERS = [
@@ -104,11 +107,7 @@ export const ProjectNewMap = ({
   }, [BBOX]);
 
   useEffect(() => {
-    setBounds((prevState) => ({
-      ...prevState,
-      viewportOptions: { transitionDuration: 800 },
-      options: { padding: { top: 50, right: 50, bottom: 50, left: isSidebarOpen ? 575 : 50 } },
-    }));
+    centerMap({ ref: mapRef.current, isSidebarOpen });
   }, [isSidebarOpen]);
 
   const handleViewportChange = useCallback((vw) => {
@@ -159,7 +158,10 @@ export const ProjectNewMap = ({
         mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN}
         mapStyle="mapbox://styles/marxan/ckn4fr7d71qg817kgd9vuom4s"
         onMapViewportChange={handleViewportChange}
-        onMapLoad={() => setMapInteractive(true)}
+        onMapLoad={({ map }) => {
+          mapRef.current = map;
+          setMapInteractive(true);
+        }}
         onMapTilesLoaded={(loaded) => setMapTilesLoaded(loaded)}
         transformRequest={handleTransformRequest}
       >

diff --git a/app/layout/projects/show/map/index.tsx b/app/layout/projects/show/map/index.tsx
@@ -9,7 +9,6 @@ import PluginMapboxGl from '@vizzuality/layer-manager-plugin-mapboxgl';
 import { LayerManager, Layer } from '@vizzuality/layer-manager-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import pick from 'lodash/pick';
-import { Point } from 'mapbox-gl';
 
 import { useAccessToken } from 'hooks/auth';
 import { useProjectCostSurfaces } from 'hooks/cost-surface';
@@ -42,10 +41,10 @@ import LegendTypeChoropleth from 'components/map/legend/types/choropleth';
 import LegendTypeGradient from 'components/map/legend/types/gradient';
 import LegendTypeMatrix from 'components/map/legend/types/matrix';
 import HelpBeacon from 'layout/help/beacon';
-import { SIDEBAR_WIDTH } from 'layout/project/sidebar/constants';
 import { Scenario } from 'types/api/scenario';
 import { MapProps } from 'types/map';
 import { cn } from 'utils/cn';
+import { centerMap } from 'utils/map';
 
 import PRINT_SVG from 'svgs/ui/print.svg?sprite';
 
@@ -241,14 +240,7 @@ export const ProjectMap = (): JSX.Element => {
   }, [BBOX]);
 
   useEffect(() => {
-    if (mapRef.current) {
-      const { lat, lng } = mapRef.current?.getCenter();
-      const { x, y } = mapRef.current?.project([lng, lat]);
-      const sidebarX = isSidebarOpen ? -SIDEBAR_WIDTH / 2 : SIDEBAR_WIDTH / 2;
-      const centerPoint = new Point(x + sidebarX, y);
-      const latLng = mapRef.current?.unproject(centerPoint);
-      mapRef.current?.flyTo({ center: latLng });
-    }
+    centerMap({ ref: mapRef.current, isSidebarOpen });
   }, [isSidebarOpen]);
 
   const handleViewportChange = useCallback(

diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useState, useMemo, useRef } from 'react';
 
 import { useRouter } from 'next/router';
 
@@ -41,12 +41,15 @@ import LegendTypeMatrix from 'components/map/legend/types/matrix';
 import { TABS } from 'layout/project/navigation/constants';
 import ScenariosDrawingManager from 'layout/scenarios/edit/map/drawing-manager';
 import { MapProps } from 'types/map';
+import { centerMap } from 'utils/map';
 
 export const ScenariosEditMap = (): JSX.Element => {
   const [open, setOpen] = useState(true);
   const [mapInteractive, setMapInteractive] = useState(false);
   const [mapTilesLoaded, setMapTilesLoaded] = useState(false);
 
+  const mapRef = useRef<mapboxgl.Map | null>(null);
+
   const { isSidebarOpen } = useAppSelector((state) => state['/projects/[id]']);
 
   const accessToken = useAccessToken();
@@ -113,14 +116,6 @@ export const ScenariosEditMap = (): JSX.Element => {
 
   const { data: targetedFeaturesData } = useTargetedFeatures(sid, {});
 
-  useEffect(() => {
-    setBounds((prevState) => ({
-      ...prevState,
-      viewportOptions: { transitionDuration: 800 },
-      options: { padding: { top: 50, right: 50, bottom: 50, left: isSidebarOpen ? 575 : 50 } },
-    }));
-  }, [isSidebarOpen]);
-
   const previewFeatureIsSelected = useMemo(() => {
     if (tab === TABS['scenario-features']) {
       return (
@@ -439,11 +434,7 @@ export const ScenariosEditMap = (): JSX.Element => {
   }, [BBOX]);
 
   useEffect(() => {
-    setBounds((prevState) => ({
-      ...prevState,
-      viewportOptions: { transitionDuration: 800 },
-      options: { padding: { top: 50, right: 50, bottom: 50, left: isSidebarOpen ? 575 : 50 } },
-    }));
+    centerMap({ ref: mapRef.current, isSidebarOpen });
   }, [isSidebarOpen]);
 
   useEffect(() => {
@@ -645,7 +636,10 @@ export const ScenariosEditMap = (): JSX.Element => {
         mapStyle="mapbox://styles/marxan/ckn4fr7d71qg817kgd9vuom4s"
         onClick={handleClick}
         onMapViewportChange={handleViewportChange}
-        onMapLoad={() => setMapInteractive(true)}
+        onMapLoad={({ map }) => {
+          mapRef.current = map;
+          setMapInteractive(true);
+        }}
         onMapTilesLoaded={(loaded) => setMapTilesLoaded(loaded)}
         transformRequest={handleTransformRequest}
       >

diff --git a/app/layout/scenarios/new/map/component.tsx b/app/layout/scenarios/new/map/component.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useRouter } from 'next/router';
 
@@ -25,13 +25,14 @@ import LegendTypeGradient from 'components/map/legend/types/gradient';
 import LegendTypeMatrix from 'components/map/legend/types/matrix';
 import ScenariosDrawingManager from 'layout/scenarios/edit/map/drawing-manager';
 import { MapProps } from 'types/map';
+import { centerMap } from 'utils/map';
 
-export interface ScenarioNewMapProps {}
-
-export const ScenarioNewMap: React.FC<ScenarioNewMapProps> = () => {
+export const ScenarioNewMap = (): JSX.Element => {
   const [open, setOpen] = useState(true);
   const [mapInteractive, setMapInteractive] = useState(false);
 
+  const mapRef = useRef<mapboxgl.Map | null>(null);
+
   const accessToken = useAccessToken();
 
   const { query } = useRouter();
@@ -73,11 +74,7 @@ export const ScenarioNewMap: React.FC<ScenarioNewMapProps> = () => {
   }, [BBOX]);
 
   useEffect(() => {
-    setBounds((prevState) => ({
-      ...prevState,
-      viewportOptions: { transitionDuration: 800 },
-      options: { padding: { top: 50, right: 50, bottom: 50, left: isSidebarOpen ? 575 : 50 } },
-    }));
+    centerMap({ ref: mapRef.current, isSidebarOpen });
   }, [isSidebarOpen]);
 
   const handleViewportChange = useCallback((vw) => {
@@ -135,7 +132,10 @@ export const ScenarioNewMap: React.FC<ScenarioNewMapProps> = () => {
         mapStyle="mapbox://styles/marxan/ckn4fr7d71qg817kgd9vuom4s"
         onClick={handleClick}
         onMapViewportChange={handleViewportChange}
-        onMapLoad={() => setMapInteractive(true)}
+        onMapLoad={({ map }) => {
+          mapRef.current = map;
+          setMapInteractive(true);
+        }}
         onMapTilesLoaded={(loaded) => setMapTilesLoaded(loaded)}
         transformRequest={handleTransformRequest}
       >

diff --git a/app/package.json b/app/package.json
@@ -50,6 +50,7 @@
     "@tailwindcss/forms": "0.5.3",
     "@tanem/react-nprogress": "^4.0.8",
     "@tippyjs/react": "4.2.6",
+    "@turf/area": "6.5.0",
     "@vizzuality/layer-manager-plugin-mapboxgl": "2.0.3",
     "@vizzuality/layer-manager-provider-carto": "2.0.3",
     "@vizzuality/layer-manager-react": "2.0.3",

diff --git a/app/utils/map.ts b/app/utils/map.ts
@@ -0,0 +1,20 @@
+import { Point } from 'mapbox-gl';
+
+import { SIDEBAR_WIDTH } from 'layout/project/sidebar/constants';
+
+export const centerMap = ({
+  ref,
+  isSidebarOpen,
+}: {
+  ref: mapboxgl.Map;
+  isSidebarOpen: boolean;
+}) => {
+  if (ref) {
+    const { lat, lng } = ref?.getCenter();
+    const { x, y } = ref?.project([lng, lat]);
+    const sidebarX = isSidebarOpen ? -SIDEBAR_WIDTH / 2 : SIDEBAR_WIDTH / 2;
+    const centerPoint = new Point(x + sidebarX, y);
+    const latLng = ref?.unproject(centerPoint);
+    ref?.flyTo({ center: latLng });
+  }
+};
diff --git a/app/yarn.lock b/app/yarn.lock
@@ -5931,6 +5931,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@turf/area@npm:6.5.0":
+  version: 6.5.0
+  resolution: "@turf/area@npm:6.5.0"
+  dependencies:
+    "@turf/helpers": ^6.5.0
+    "@turf/meta": ^6.5.0
+  checksum: 4b62c6874f65bd477483ef259fa0fd34dc745a672a7544f5fbaba4a2b06a6b542edef8de786f907348594d847b38f82f22998534747d2810d2d0ed4587bf6e92
+  languageName: node
+  linkType: hard
+
 "@turf/bbox-polygon@npm:>=4.0.0":
   version: 6.3.0
   resolution: "@turf/bbox-polygon@npm:6.3.0"
@@ -6084,6 +6094,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@turf/helpers@npm:^6.5.0":
+  version: 6.5.0
+  resolution: "@turf/helpers@npm:6.5.0"
+  checksum: d57f746351357838c654e0a9b98be3285a14b447504fd6d59753d90c6d437410bb24805d61c65b612827f07f6c2ade823bb7e56e41a1a946217abccfbd64c117
+  languageName: node
+  linkType: hard
+
 "@turf/intersect@npm:>=4.0.0":
   version: 6.3.0
   resolution: "@turf/intersect@npm:6.3.0"
@@ -6137,6 +6154,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@turf/meta@npm:^6.5.0":
+  version: 6.5.0
+  resolution: "@turf/meta@npm:6.5.0"
+  dependencies:
+    "@turf/helpers": ^6.5.0
+  checksum: c6bb936aa92bf3365e87a50dc65f248e070c5767a36fac390754c00c89bf2d1583418686ab19a10332bfa9340b8cac6aaf2c55dad7f5fcf77f1a2dda75ccf363
+  languageName: node
+  linkType: hard
+
 "@turf/nearest-point-on-line@npm:>=4.0.0":
   version: 6.3.0
   resolution: "@turf/nearest-point-on-line@npm:6.3.0"
@@ -7901,6 +7927,7 @@ __metadata:
     "@tailwindcss/forms": 0.5.3
     "@tanem/react-nprogress": ^4.0.8
     "@tippyjs/react": 4.2.6
+    "@turf/area": 6.5.0
     "@types/d3": ^6.3.0
     "@types/lodash": 4.14.192
     "@types/node": 18.15.11