chore: Update Hero Map component zoom levels

Adjust the zoom levels for the Hero Map component in the Climatemapped Africa app based on the device type on payloadcms. On desktop, set the zoom level to 3, and on mobile, set it to 2. This ensures that the map appears correctly on different devices.
CodeForAfrica · Nov 12, 2024 · 66e4386 · 66e4386
1 parent 92065e2
commit 66e4386
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 4 deletions.
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -24,12 +24,12 @@ function Hero({
   level,
   explorePageSlug,
   averageTemperature,
+  zoom: zoomProp,
   ...props
 }) {
   const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
-  const continentLevelZoom = isUpLg ? 3.05 : 2.1; // We have to reduce the zoom level for continent so that all countries(Including islands) are visible within the designs
-  const countryLevelZoom = isUpLg ? 6 : 5.25;
-  const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom;
+  const { desktop, mobile } = zoomProp;
+  const zoom = isUpLg ? desktop : mobile;
   return (
     <Box
       sx={{

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.test.js b/apps/climatemappedafrica/src/components/Hero/Hero.test.js
@@ -57,6 +57,10 @@ const defaultProps = {
     { min: 25, max: 28, color: "#F96264" },
     { min: 28, max: 31, color: "#F80701" },
   ],
+  zoom: {
+    desktop: 3,
+    mobile: 2,
+  },
 };
 
 describe("<Hero />", () => {

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -13,7 +13,7 @@ import {
 export default async function hero(block, _api, _context, { hurumap }) {
   const {
     profilePage,
-    rootGeography: { center, code, hasData: pinRootGeography },
+    rootGeography: { center, code, hasData: pinRootGeography, zoom },
     profile: hurumapProfile,
   } = hurumap ?? { rootGeography: {} };
   const { geometries } = await fetchProfileGeography(code.toLowerCase());
@@ -51,5 +51,6 @@ export default async function hero(block, _api, _context, { hurumap }) {
     slug: "hero",
     choropleth,
     legend,
+    zoom,
   };
 }
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
@@ -44,6 +44,42 @@ const RootGeography = {
               "Indicates whether the root geography itself has data that can be used for comparison with its children",
           },
         },
+        {
+          name: "zoom",
+          type: "group",
+          fields: [
+            {
+              type: "row",
+              fields: [
+                {
+                  name: "desktop",
+                  label: "Zoom Level for Desktop",
+                  type: "number",
+                  defaultValue: 3.05,
+                  required: true,
+                  admin: {
+                    description:
+                      "Indicates how the map should appear on desktop devices",
+                  },
+                },
+                {
+                  name: "mobile",
+                  label: "Zoom Level for Mobile",
+                  type: "number",
+                  required: true,
+                  defaultValue: 2.7,
+                  admin: {
+                    description:
+                      "Indicates how the map should appear on small devices",
+                  },
+                },
+              ],
+            },
+          ],
+          admin: {
+            hideGutter: true,
+          },
+        },
       ],
     },
   ],