From f36fcb5b53e52bb0a90a0a60866e349407d7fd85 Mon Sep 17 00:00:00 2001
From: Wayne Carter <wayne@ednastreet.nz>
Date: Sat, 30 Nov 2024 01:11:26 +1300
Subject: [PATCH] FE CCCV Zoom out to printable zoom on click

---
 packages/cccv/src/lib/useMapFocus.tsx       | 1 +
 packages/cccv/src/lib/zoomIntoFeatures.ts   | 3 ++-
 packages/cccv/src/pages/MapPage/MapPage.tsx | 8 +++++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/cccv/src/lib/useMapFocus.tsx b/packages/cccv/src/lib/useMapFocus.tsx
index a2a95731..fb3ac894 100644
--- a/packages/cccv/src/lib/useMapFocus.tsx
+++ b/packages/cccv/src/lib/useMapFocus.tsx
@@ -38,6 +38,7 @@ const useMapFocus = (
         if (location.description) {
             pin.setPopup(new mapboxgl.Popup({ closeButton: false }).setLngLat([location.longitude!, location.latitude!]).setHTML(location.description || '<></>'))
         }
+
         setFocusPin(pin)
     }
 
diff --git a/packages/cccv/src/lib/zoomIntoFeatures.ts b/packages/cccv/src/lib/zoomIntoFeatures.ts
index d1e05628..b1a89986 100644
--- a/packages/cccv/src/lib/zoomIntoFeatures.ts
+++ b/packages/cccv/src/lib/zoomIntoFeatures.ts
@@ -13,7 +13,8 @@ export default function zoomIntoFeatures(
     padding: number = 200,
     maxZoom: number = 20
 ) {
-    if (!focus) return
+    if (!focus)
+        return
 
     const featureOrCollection =
         (isFeatureCollection(focus) || isFeature(focus)) ? focus :
diff --git a/packages/cccv/src/pages/MapPage/MapPage.tsx b/packages/cccv/src/pages/MapPage/MapPage.tsx
index 35df6685..783ce01d 100644
--- a/packages/cccv/src/pages/MapPage/MapPage.tsx
+++ b/packages/cccv/src/pages/MapPage/MapPage.tsx
@@ -237,9 +237,15 @@ export default function MapPage() {
         clearErrors()
         const clickedFeatures = getFeaturesUnderMouse(mapRef, e, BOUNDARY_LINES_LAYER)
         if (clickedFeatures) {
+            if (mapRef.current?.getMap()?.getZoom() !== DEFAULT_ZOOM)
+                mapRef.current?.getMap().flyTo({
+                    center: e.lngLat,
+                    zoom: DEFAULT_ZOOM,
+                })
             setSelectedLocation({
                 longitude: e.lngLat.lng, latitude: e.lngLat.lat,
-                boundary: clickedFeatures[0]
+                boundary: clickedFeatures[0],
+                zoom: DEFAULT_ZOOM,
             })
         }
     }