feat: configure reactive map zoom with out without address

delta10 · Dec 27, 2024 · 3b95239 · 3b95239
1 parent d7a9c3a
commit 3b95239
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/config.json b/config.json
@@ -28,7 +28,8 @@
       "maxBounds": [
         [3.31497114423, 50.803721015],
         [7.09205325687, 53.5104033474]
-      ]
+      ],
+      "default_zoom": 12
     },
     "links": {
       "about": "https://signalen.org",

diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx
@@ -62,7 +62,6 @@ import {
 } from '@/lib/utils/address'
 import MapExplainerAccordion from './questions/MapExplainerAccordion'
 import { useWindowSize } from 'usehooks-ts'
-import { string } from 'zod'
 
 type MapDialogProps = {
   trigger: React.ReactElement
@@ -110,7 +109,9 @@ const MapDialog = ({
   const [viewState, setViewState] = useState<ViewState>({
     latitude: 0,
     longitude: 0,
-    zoom: 18,
+    zoom: formState.address
+      ? config?.base.map.minimal_zoom || 17
+      : config?.base.map.default_zoom || 12,
     bearing: 0,
     padding: {
       top: 0,
@@ -171,10 +172,20 @@ const MapDialog = ({
     }
   }, [features, field])
 
+  useEffect(() => {
+    setViewState((state) => ({
+      ...state,
+      zoom: formState.address
+        ? config?.base.map.minimal_zoom || 17
+        : config?.base.map.default_zoom || 12,
+    }))
+  }, [config, formState])
+
   // memoize list of features to show in left sidebar
   const featureList = useMemo(() => {
     if (config && dialogMap) {
-      const mapFeaturesToShow = mapFeatures ? mapFeatures.features : []
+      const mapFeaturesToShow =
+        mapFeatures && formState.address ? mapFeatures.features : []
 
       const features =
         dialogMap?.getZoom() > config.base.map.minimal_zoom
@@ -185,14 +196,14 @@ const MapDialog = ({
     }
 
     return []
-  }, [config, dialogMap, formState.selectedFeatures, mapFeatures])
+  }, [config, dialogMap, formState, mapFeatures])
 
   // Update position, flyTo position, after this set the marker position
   const updatePosition = (lat: number, lng: number) => {
     if (dialogMap) {
       dialogMap.flyTo({
         center: [lng, lat],
-        zoom: 18,
+        zoom: config?.base.map.minimal_zoom || 17,
       })
     }
 
@@ -563,6 +574,7 @@ const MapDialog = ({
                 {onMapReady &&
                   dialogMap &&
                   dialogMap.getZoom() > config.base.map.minimal_zoom &&
+                  formState.address &&
                   mapFeatures?.features.map((feature) => {
                     const id = feature.id as number
 

diff --git a/src/components/ui/LocationMap.tsx b/src/components/ui/LocationMap.tsx
@@ -13,7 +13,9 @@ const LocationMap = () => {
   const [viewState, setViewState] = useState<ViewState>({
     latitude: 0,
     longitude: 0,
-    zoom: 14,
+    zoom: formState.address
+      ? config?.base.map.minimal_zoom || 17
+      : config?.base.map.default_zoom || 12,
     bearing: 0,
     padding: {
       top: 0,
@@ -48,13 +50,22 @@ const LocationMap = () => {
 
   // Update viewState, to move map view with marker
   useEffect(() => {
-    setViewState({
-      ...viewState,
+    setViewState((state) => ({
+      ...state,
       latitude: marker[0],
       longitude: marker[1],
-    })
+    }))
   }, [marker])
 
+  useEffect(() => {
+    setViewState((state) => ({
+      ...state,
+      zoom: formState.address
+        ? config?.base.map.minimal_zoom || 17
+        : config?.base.map.default_zoom || 12,
+    }))
+  }, [config, formState])
+
   const mapStyle = isDarkMode
     ? `${process.env.NEXT_PUBLIC_MAPTILER_MAP_DARK_MODE}/style.json?key=${process.env.NEXT_PUBLIC_MAPTILER_API_KEY}`
     : `${process.env.NEXT_PUBLIC_MAPTILER_MAP}/style.json?key=${process.env.NEXT_PUBLIC_MAPTILER_API_KEY}`

diff --git a/src/types/config.ts b/src/types/config.ts
@@ -26,6 +26,7 @@ export type AppConfig = {
     map: {
       find_address_in_distance: number
       minimal_zoom: number
+      default_zoom: number
       center: number[]
       maxBounds: number[][]
     }