hotfix map page autozoom on preselection and site height

BesLogic · Nov 28, 2024 · 814606c · 814606c
1 parent 76e9895
commit 814606c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/canopeum_frontend/src/components/MainLayout.tsx b/canopeum_frontend/src/components/MainLayout.tsx
@@ -20,7 +20,7 @@ const NavbarLayout = () => (
   <div className='d-flex flex-column vh-100'>
     <Navbar />
     {/* TODO: Can we do better than hardcode a number relating to the expected header size here? */}
-    <div className='' style={{ height: 'calc(100vh - 48px)' }}>
+    <div className='' style={{ height: 'calc(100vh - 62px)' }}>
       <Outlet />
     </div>
   </div>

diff --git a/canopeum_frontend/src/pages/MapPage.scss b/canopeum_frontend/src/pages/MapPage.scss
@@ -18,7 +18,7 @@
 @media screen and (max-width: $large-width) {
   #map-sites-list-container,
   #map-container {
-    padding: 0 3rem;
+    padding: 0 2rem;
   }
 }
 

diff --git a/canopeum_frontend/src/pages/MapPage.tsx b/canopeum_frontend/src/pages/MapPage.tsx
@@ -18,9 +18,9 @@ const PIN_FOCUS_ZOOM_LEVEL = 15
 const MAP_DISTANCE_ZOOM_MULTIPLIER = 20
 
 /**
- * The initial map location if the user doesn't provide location
+ * The default initial map location if the user doesn't provide location
  */
-const initialMapLocation = (sites: SiteMap[]) => {
+const defaultMapLocation = (sites: SiteMap[]) => {
   // eslint-disable-next-line unicorn/no-array-reduce -- Find the middle point between all sites
   const { minLat, maxLat, minLong, maxLong } = sites.reduce(
     (previous, current) => {
@@ -115,21 +115,32 @@ const MapPage = () => {
           navigator.geolocation.getCurrentPosition(resolve, resolve)
         },
       ),
-    ]).then(([fetchedSites, position]) =>
-      'code' in position
+    ]).then(([fetchedSites, position]) => {
+      // If there's a pre-selected site-id (from URL), zoom on it
+      const preSelectedSiteId = Number(searchParams.get('site')) || null
+      const preSelectedSite = fetchedSites.find(site => site.id === preSelectedSiteId)
+      if (preSelectedSite?.coordinate.ddLatitude && preSelectedSite.coordinate.ddLongitude) {
+        setMapViewState({
+          latitude: preSelectedSite.coordinate.ddLatitude,
+          longitude: preSelectedSite.coordinate.ddLongitude,
+          zoom: PIN_FOCUS_ZOOM_LEVEL,
+        })
+      } else if ('code' in position) {
         // If there's an error obtaining the user position, use our default position instead
         // Note that getCurrentPosition always error code 2 in http
-        ? setMapViewState(mvs => ({
+        setMapViewState(mvs => ({
           ...mvs,
-          ...initialMapLocation(fetchedSites),
+          ...defaultMapLocation(fetchedSites),
         }))
+      } else {
         // Otherwise focus on the user's position
-        : setMapViewState(mvs => ({
+        setMapViewState(mvs => ({
           ...mvs,
           latitude: position.coords.latitude,
           longitude: position.coords.longitude,
         }))
-    ), [fetchData])
+      }
+    }), [fetchData, searchParams])
 
   return (
     <div className='container-fluid p-0 h-100'>