feat(website): enable mouse wheel zooming when embedded

Keep it disabled when the app is loaded on its own. Closes #130
agrc · Feb 11, 2025 · 0672090 · 0672090
1 parent 5ec739f
commit 0672090
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/salesforce/force-app/main/default/lwc/spills/spills.js b/salesforce/force-app/main/default/lwc/spills/spills.js
@@ -51,9 +51,9 @@ export default class Spills extends LightningElement {
   get iframeSrc() {
     console.log("wc(spills): isSandbox", this.isSandbox);
     if (this.isSandbox) {
-      return "https://deqspills.dev.utah.gov"; // staging
+      return "https://deqspills.dev.utah.gov?embedded=true"; // staging
     } else if (this.isSandbox === false) {
-      return "https://deqspills.ugrc.utah.gov"; // prod
+      return "https://deqspills.ugrc.utah.gov?embedded=true"; // prod
     }
 
     return null;

diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -27,6 +27,10 @@ const links = [
   },
 ];
 
+// get url query params
+const urlParams = new URLSearchParams(window.location.search);
+const isEmbedded = urlParams.get('embedded') === 'true';
+
 export default function App() {
   const app = useFirebaseApp();
 
@@ -47,19 +51,21 @@ export default function App() {
   return (
     <>
       <main className="flex h-screen flex-col md:gap-2">
-        <Header links={links}>
-          <div className="flex h-full grow items-center gap-3">
-            <img src="deq_logo.png" alt="DEQ Logo" className="h-12 w-12" />
-            <h2 className="font-heading text-3xl font-black text-zinc-600 sm:text-5xl dark:text-zinc-100">
-              DEQ Spills
-            </h2>
-          </div>
-        </Header>
+        {!isEmbedded ? (
+          <Header links={links}>
+            <div className="flex h-full grow items-center gap-3">
+              <img src="deq_logo.png" alt="DEQ Logo" className="h-12 w-12" />
+              <h2 className="font-heading text-3xl font-black text-zinc-600 sm:text-5xl dark:text-zinc-100">
+                DEQ Spills
+              </h2>
+            </div>
+          </Header>
+        ) : null}
         <section className="relative flex min-h-0 flex-1 overflow-x-hidden md:mr-2">
           <div className="relative flex flex-1 flex-col rounded border border-b-0 border-zinc-200 dark:border-0 dark:border-zinc-700">
             <div className="relative flex-1 overflow-hidden dark:rounded">
               <ErrorBoundary FallbackComponent={ErrorFallback}>
-                <MapContainer onClick={onClick} />
+                <MapContainer onClick={onClick} isEmbedded={isEmbedded} />
               </ErrorBoundary>
             </div>
           </div>

diff --git a/website/src/components/MapContainer.tsx b/website/src/components/MapContainer.tsx
@@ -29,7 +29,12 @@ type SelectorOptions = {
   position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 
-export default function MapContainer({ onClick }: { onClick?: __esri.ViewImmediateClickEventHandler }) {
+type MapContainerProps = {
+  onClick?: __esri.ViewImmediateClickEventHandler;
+  isEmbedded?: boolean;
+};
+
+export default function MapContainer({ onClick, isEmbedded }: MapContainerProps) {
   const mapNode = useRef<HTMLDivElement | null>(null);
   const mapComponent = useRef<EsriMap | null>(null);
   const mapView = useRef<MapView>(null);
@@ -49,6 +54,9 @@ export default function MapContainer({ onClick }: { onClick?: __esri.ViewImmedia
       container: mapNode.current,
       map: mapComponent.current,
       extent: utahMercatorExtent,
+      navigation: {
+        mouseWheelZoomEnabled: isEmbedded,
+      },
     });
 
     setMapView(mapView.current);