From 97f0cd8d5b9714d4b67ab8437977230a3156d48b Mon Sep 17 00:00:00 2001
From: Anthony Castronova <castronova.anthony@gmail.com>
Date: Wed, 15 Apr 2026 14:56:03 -0400
Subject: [PATCH 1/7] moved perceptual models logic from theleafmap component
 into the mapview view

---
 frontend/src/components/TheLeafletMap.vue | 206 +---------------------
 frontend/src/views/MapView.vue            | 204 ++++++++++++++++++++-
 2 files changed, 203 insertions(+), 207 deletions(-)

diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
index 1a94353..0c17027 100644
--- a/frontend/src/components/TheLeafletMap.vue
+++ b/frontend/src/components/TheLeafletMap.vue
@@ -11,7 +11,6 @@
 import L from 'leaflet'
 import 'leaflet-draw'
 import 'leaflet.markercluster'
-import { storeToRefs } from 'pinia'
 import * as esriLeaflet from 'esri-leaflet'
 import { onMounted, onUpdated } from 'vue'
 import { useMapStore } from '@/stores/map'
@@ -21,24 +20,13 @@ import 'leaflet-draw/dist/leaflet.draw.css'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 
-const emit = defineEmits(['onFilter'])
-
 const mapStore = useMapStore()
-const {
-  mapLoaded,
-  userTouchedFilter,
-  currentFilteredData,
-  selectedSpatialZones,
-  selectedTemporalZones,
-  selectedProcesses,
-  searchTerm
-} = storeToRefs(mapStore)
 
 onUpdated(() => {
   mapStore.leaflet.invalidateSize()
 })
 
-onMounted(async () => {
+onMounted(() => {
   mapStore.leaflet = L.map('mapContainer', { minZoom: 2 }).setView([0, 11], 2)
   mapStore.layerGroup = new L.LayerGroup()
   mapStore.layerGroup.addTo(mapStore.leaflet)
@@ -77,198 +65,8 @@ onMounted(async () => {
   Esri_WorldImagery.addTo(mapStore.leaflet)
   Esri_Hydro_Reference_Overlay.addTo(mapStore.leaflet)
 
-  await mapStore.fetchPerceptualModelsGeojson()
-  const bounds = L.latLngBounds(mapStore.allAvailableCoordinates)
-  mapStore.leaflet.setMaxBounds(bounds)
-
-  const mixed = {
-    'Perceptual Models': mapStore.layerGroup,
-    'Esri Hydro Reference Overlay': Esri_Hydro_Reference_Overlay
-  }
-  L.control.layers(baselayers, mixed).addTo(mapStore.leaflet)
-
-  const drawnItems = new L.FeatureGroup()
-  mapStore.drawnItems = drawnItems
-  mapStore.leaflet.addLayer(drawnItems)
-  drawnItems.setZIndex(1000)
-
-  let currentRectangle = null
-
-  L.Control.RectangleToggle = L.Control.extend({
-    options: { position: 'topleft' },
-    onAdd: function () {
-      const container = L.DomUtil.create(
-        'div',
-        'leaflet-bar leaflet-control leaflet-control-custom draw-toggle-btn'
-      )
-      updateDrawButton(container)
-      let drawer = null
-      L.DomEvent.on(container, 'click', () => {
-        if (currentRectangle || drawer) {
-          drawnItems.clearLayers()
-          currentRectangle = null
-          mapStore.filterFeatures(
-            (feature) => {
-              if (feature.geometry.type === 'Point') {
-                const [lng, lat] = feature.geometry.coordinates
-                return currentRectangle.getBounds().contains([lat, lng])
-              }
-              return false
-            },
-            'remove',
-            'rectangle'
-          )
-          userTouchedFilter.value = false
-          emit('onFilter', {
-            selectedSpatialZones,
-            selectedTemporalZones,
-            selectedProcesses,
-            searchTerm,
-            filteredFeatures: currentFilteredData.value
-          })
-          updateDrawButton(container)
-        } else {
-          const drawer = new L.Draw.Rectangle(mapStore.leaflet, {
-            shapeOptions: {
-              color: '#3388ff',
-              weight: 2,
-              opacity: 0.8,
-              fillOpacity: 0.3
-            },
-            showArea: false
-          })
-          drawer.enable()
-          currentRectangle = {}
-          updateDrawButton(container)
-
-          const drawHandler = (e) => {
-            mapStore.leaflet.off(L.Draw.Event.CREATED, drawHandler)
-            drawnItems.clearLayers()
-            currentRectangle = e.layer
-            currentRectangle.feature = {
-              type: 'Feature',
-              geometry: {
-                type: 'Polygon',
-                coordinates: [
-                  currentRectangle.getLatLngs()[0].map((latLng) => [latLng.lng, latLng.lat])
-                ]
-              },
-              properties: {}
-            }
-            drawnItems.addLayer(currentRectangle)
-            mapStore.leaflet.fitBounds(currentRectangle.getBounds())
-
-            mapStore.filterFeatures(
-              (feature) => {
-                if (feature.geometry.type === 'Point') {
-                  const [lng, lat] = feature.geometry.coordinates
-                  return currentRectangle.getBounds().contains([lat, lng])
-                }
-                return false
-              },
-              'add',
-              'rectangle'
-            )
-
-            userTouchedFilter.value = true
-            emit('onFilter', {
-              selectedSpatialZones,
-              selectedTemporalZones,
-              selectedProcesses,
-              searchTerm,
-              filteredFeatures: currentFilteredData.value
-            })
-
-            updateDrawButton(container)
-          }
-
-          mapStore.leaflet.on(L.Draw.Event.CREATED, drawHandler)
-          mapStore.leaflet.once('draw:drawstop', () => {
-            // If no rectangle was drawn, reset the toggle state
-            if (!drawnItems.getLayers().length) {
-              currentRectangle = null
-              updateDrawButton(container)
-              mapStore.leaflet.off(L.Draw.Event.CREATED, drawHandler)
-            }
-          })
-        }
-      })
-
-      return container
-    }
-  })
-  mapStore.leaflet.addControl(new L.Control.RectangleToggle())
-
-  function updateDrawButton(container) {
-    if (currentRectangle) {
-      container.innerHTML = '<span class="material-icons">close</span>'
-      container.style.background = 'white'
-      container.title = 'Clear box'
-    } else {
-      container.style.backgroundImage = "url('/DrawIcon.ico')"
-      container.innerHTML = ''
-      container.title = 'Draw a box'
-    }
-    container.style.backgroundRepeat = 'no-repeat'
-    container.style.backgroundSize = '60% 60%'
-    container.style.backgroundPosition = 'center'
-    container.style.borderRadius = '4px'
-    container.style.width = '34px'
-    container.style.height = '34px'
-    container.style.cursor = 'pointer'
-    container.style.display = 'flex'
-    container.style.alignItems = 'center'
-    container.style.justifyContent = 'center'
-  }
-  L.drawLocal.draw.handlers.rectangle.tooltip.start = 'Click and drag to draw a box'
-  L.Control.ClearFilters = L.Control.extend({
-    options: { position: 'topleft' },
-    onAdd: function () {
-      const container = L.DomUtil.create(
-        'div',
-        'leaflet-bar leaflet-control leaflet-control-custom'
-      )
-      container.title = 'Reset Filters'
-
-      container.style.backgroundImage = "url('/ClearFilter.ico')"
-      container.style.backgroundRepeat = 'no-repeat'
-      container.style.backgroundSize = '60% 60%'
-      container.style.backgroundColor = 'white'
-      container.style.backgroundPosition = 'center'
-      container.style.borderRadius = '4px'
-      container.style.width = '34px'
-      container.style.height = '34px'
-      container.style.cursor = 'pointer'
-      container.style.display = 'flex'
-      container.style.alignItems = 'center'
-      container.style.justifyContent = 'center'
-
-      L.DomEvent.on(container, 'click', () => {
-        mapStore.clearAllFilters()
-        emit('onFilter', {
-          selectedSpatialZones,
-          selectedTemporalZones,
-          selectedProcesses,
-          searchTerm,
-          filteredFeatures: currentFilteredData.value
-        })
-      })
-
-      return container
-    }
-  })
-  mapStore.leaflet.addControl(new L.Control.ClearFilters())
-
-  mapStore.leaflet.on('click', function (e) {
-    mapClick(e)
-  })
-
-  mapLoaded.value = true
+  L.control.layers(baselayers).addTo(mapStore.leaflet)
 })
-
-async function mapClick() {
-  return
-}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 0efeb40..3fe6748 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -59,9 +59,22 @@ import TheLeafletMap from '@/components/TheLeafletMap.vue'
 import { mdiChevronRight, mdiChevronLeft, mdiInformationOutline } from '@mdi/js'
 import { useMapStore } from '@/stores/map'
 import { useDisplay } from 'vuetify'
+import { storeToRefs } from 'pinia'
+import L from 'leaflet'
 
-const { mdAndDown } = useDisplay()
+const emit = defineEmits(['onFilter'])
 const mapStore = useMapStore()
+const {
+  mapLoaded,
+  userTouchedFilter,
+  currentFilteredData,
+  selectedSpatialZones,
+  selectedTemporalZones,
+  selectedProcesses,
+  searchTerm
+} = storeToRefs(mapStore)
+
+const { mdAndDown } = useDisplay()
 
 const showFilterDrawer = ref(true)
 const dataDrawerRef = ref(null)
@@ -72,8 +85,193 @@ watch(mdAndDown, (val) => {
   showDataDrawer.value = !val
 })
 
-onMounted(() => {
-  showFilterDrawer.value = !mdAndDown.value
+showFilterDrawer.value = !mdAndDown.value
+
+onMounted(async () => {
+  await mapStore.fetchPerceptualModelsGeojson()
+  const bounds = L.latLngBounds(mapStore.allAvailableCoordinates)
+  mapStore.leaflet.setMaxBounds(bounds)
+
+  const drawnItems = new L.FeatureGroup()
+  mapStore.drawnItems = drawnItems
+  mapStore.leaflet.addLayer(drawnItems)
+  drawnItems.setZIndex(1000)
+
+  let currentRectangle = null
+
+  L.Control.RectangleToggle = L.Control.extend({
+    options: { position: 'topleft' },
+    onAdd: function () {
+      const container = L.DomUtil.create(
+        'div',
+        'leaflet-bar leaflet-control leaflet-control-custom draw-toggle-btn'
+      )
+      updateDrawButton(container)
+      let drawer = null
+      L.DomEvent.on(container, 'click', () => {
+        if (currentRectangle || drawer) {
+          drawnItems.clearLayers()
+          currentRectangle = null
+          mapStore.filterFeatures(
+            (feature) => {
+              if (feature.geometry.type === 'Point') {
+                const [lng, lat] = feature.geometry.coordinates
+                return currentRectangle.getBounds().contains([lat, lng])
+              }
+              return false
+            },
+            'remove',
+            'rectangle'
+          )
+          userTouchedFilter.value = false
+          emit('onFilter', {
+            selectedSpatialZones,
+            selectedTemporalZones,
+            selectedProcesses,
+            searchTerm,
+            filteredFeatures: currentFilteredData.value
+          })
+          updateDrawButton(container)
+        } else {
+          const drawer = new L.Draw.Rectangle(mapStore.leaflet, {
+            shapeOptions: {
+              color: '#3388ff',
+              weight: 2,
+              opacity: 0.8,
+              fillOpacity: 0.3
+            },
+            showArea: false
+          })
+          drawer.enable()
+          currentRectangle = {}
+          updateDrawButton(container)
+
+          const drawHandler = (e) => {
+            mapStore.leaflet.off(L.Draw.Event.CREATED, drawHandler)
+            drawnItems.clearLayers()
+            currentRectangle = e.layer
+            currentRectangle.feature = {
+              type: 'Feature',
+              geometry: {
+                type: 'Polygon',
+                coordinates: [
+                  currentRectangle.getLatLngs()[0].map((latLng) => [latLng.lng, latLng.lat])
+                ]
+              },
+              properties: {}
+            }
+            drawnItems.addLayer(currentRectangle)
+            mapStore.leaflet.fitBounds(currentRectangle.getBounds())
+
+            mapStore.filterFeatures(
+              (feature) => {
+                if (feature.geometry.type === 'Point') {
+                  const [lng, lat] = feature.geometry.coordinates
+                  return currentRectangle.getBounds().contains([lat, lng])
+                }
+                return false
+              },
+              'add',
+              'rectangle'
+            )
+
+            userTouchedFilter.value = true
+            emit('onFilter', {
+              selectedSpatialZones,
+              selectedTemporalZones,
+              selectedProcesses,
+              searchTerm,
+              filteredFeatures: currentFilteredData.value
+            })
+
+            updateDrawButton(container)
+          }
+
+          mapStore.leaflet.on(L.Draw.Event.CREATED, drawHandler)
+          mapStore.leaflet.once('draw:drawstop', () => {
+            // If no rectangle was drawn, reset the toggle state
+            if (!drawnItems.getLayers().length) {
+              currentRectangle = null
+              updateDrawButton(container)
+              mapStore.leaflet.off(L.Draw.Event.CREATED, drawHandler)
+            }
+          })
+        }
+      })
+
+      return container
+    }
+  })
+  mapStore.leaflet.addControl(new L.Control.RectangleToggle())
+
+  async function mapClick() {
+    return
+  }
+  function updateDrawButton(container) {
+    if (currentRectangle) {
+      container.innerHTML = '<span class="material-icons">close</span>'
+      container.style.background = 'white'
+      container.title = 'Clear box'
+    } else {
+      container.style.backgroundImage = "url('/DrawIcon.ico')"
+      container.innerHTML = ''
+      container.title = 'Draw a box'
+    }
+    container.style.backgroundRepeat = 'no-repeat'
+    container.style.backgroundSize = '60% 60%'
+    container.style.backgroundPosition = 'center'
+    container.style.borderRadius = '4px'
+    container.style.width = '34px'
+    container.style.height = '34px'
+    container.style.cursor = 'pointer'
+    container.style.display = 'flex'
+    container.style.alignItems = 'center'
+    container.style.justifyContent = 'center'
+  }
+  L.drawLocal.draw.handlers.rectangle.tooltip.start = 'Click and drag to draw a box'
+  L.Control.ClearFilters = L.Control.extend({
+    options: { position: 'topleft' },
+    onAdd: function () {
+      const container = L.DomUtil.create(
+        'div',
+        'leaflet-bar leaflet-control leaflet-control-custom'
+      )
+      container.title = 'Reset Filters'
+
+      container.style.backgroundImage = "url('/ClearFilter.ico')"
+      container.style.backgroundRepeat = 'no-repeat'
+      container.style.backgroundSize = '60% 60%'
+      container.style.backgroundColor = 'white'
+      container.style.backgroundPosition = 'center'
+      container.style.borderRadius = '4px'
+      container.style.width = '34px'
+      container.style.height = '34px'
+      container.style.cursor = 'pointer'
+      container.style.display = 'flex'
+      container.style.alignItems = 'center'
+      container.style.justifyContent = 'center'
+
+      L.DomEvent.on(container, 'click', () => {
+        mapStore.clearAllFilters()
+        emit('onFilter', {
+          selectedSpatialZones,
+          selectedTemporalZones,
+          selectedProcesses,
+          searchTerm,
+          filteredFeatures: currentFilteredData.value
+        })
+      })
+
+      return container
+    }
+  })
+  mapStore.leaflet.addControl(new L.Control.ClearFilters())
+
+  mapStore.leaflet.on('click', function (e) {
+    mapClick(e)
+  })
+
+  mapLoaded.value = true
 })
 
 const onFilter = (data) => {

From 112bc16d88ec3951929c4e05e1135f6c9db878ec Mon Sep 17 00:00:00 2001
From: Anthony Castronova <castronova.anthony@gmail.com>
Date: Wed, 15 Apr 2026 19:02:19 -0400
Subject: [PATCH 2/7] added perceptual models layers to the map

---
 frontend/package-lock.json            |  10 ++
 frontend/package.json                 |   1 +
 frontend/src/App.vue                  |   8 +-
 frontend/src/router/index.js          |  13 +-
 frontend/src/views/PerceptualView.vue | 164 ++++++++++++++++++++++++++
 5 files changed, 192 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/views/PerceptualView.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a2e2459..e1039b1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "leaflet": "^1.9.4",
         "leaflet-draw": "^1.0.2",
         "leaflet-easybutton": "^2.4.0",
+        "leaflet-groupedlayercontrol": "^0.6.1",
         "leaflet-iconmaterial": "^1.1.0",
         "leaflet.markercluster": "^1.5.3",
         "papaparse": "^5.4.1",
@@ -5477,6 +5478,15 @@
         "leaflet": "^1.0.1"
       }
     },
+    "node_modules/leaflet-groupedlayercontrol": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/leaflet-groupedlayercontrol/-/leaflet-groupedlayercontrol-0.6.1.tgz",
+      "integrity": "sha512-xkGeH6ygcryFQI0FUWn6Bz93zlwrOSpeXgJQ3jLRoUQJ5h/Qgrz+GqR9nhBFfikjUKtC1sCKL3eDR9wNTWhLlA==",
+      "license": "MIT",
+      "dependencies": {
+        "leaflet": "^1.0.1"
+      }
+    },
     "node_modules/leaflet-iconmaterial": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/leaflet-iconmaterial/-/leaflet-iconmaterial-1.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f4dc170..fb995f6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.2",
     "leaflet-easybutton": "^2.4.0",
+    "leaflet-groupedlayercontrol": "^0.6.1",
     "leaflet-iconmaterial": "^1.1.0",
     "leaflet.markercluster": "^1.5.3",
     "papaparse": "^5.4.1",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 893f491..f50823f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -44,13 +44,17 @@ const alertStore = useAlertStore()
 let showMobileNavigation = ref(false)
 const paths = [
   {
-    attrs: { to: '/' },
-    label: 'Map'
+    attrs: { to: '/hydrologic_processes' },
+    label: 'Hydrologic Processes'
   },
   // {
   //   attrs: { to: "/api" },
   //   label: "API",
   // },
+  {
+    attrs: { to: '/perceptual_models' },
+    label: 'Perceptual Models'
+  },
   {
     attrs: { to: '/about' },
     label: 'About'
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index ea75dee..21a89bb 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,18 +1,27 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import MapView from '../views/MapView.vue'
+import PerceptualView from '../views/PerceptualView.vue'
 import ApiView from '../views/ApiView.vue'
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
-      path: '/',
-      name: 'map',
+      path: '/hydrologic_processes',
+      name: 'Hydrologic Processes',
       component: MapView,
       meta: {
         showMap: true
       }
     },
+    {
+      path: '/perceptual_models',
+      name: 'Perceptual Models',
+      component: PerceptualView,
+      meta: {
+        showMap: true
+      }
+    },
     {
       path: '/about',
       name: 'about',
diff --git a/frontend/src/views/PerceptualView.vue b/frontend/src/views/PerceptualView.vue
new file mode 100644
index 0000000..04cd3ef
--- /dev/null
+++ b/frontend/src/views/PerceptualView.vue
@@ -0,0 +1,164 @@
+<template>
+  <v-overlay :model-value="!mapStore.mapLoaded" class="d-flex align-center justify-center">
+    <v-progress-circular indeterminate :size="128" />
+  </v-overlay>
+
+  <v-container fluid class="pa-0 fill-height position-relative">
+    <v-row class="fill-height ma-0">
+      <v-col class="map-container pa-0">
+        <TheLeafletMap />
+
+        <div
+          id="wms-legend"
+          style="
+            position: absolute;
+            bottom: 80px;
+            left: 10px;
+            background: white;
+            z-index: 1001;
+            padding: 8px;
+            border-radius: 4px;
+            min-width: 40px;
+            min-height: 40px;
+          "
+        ></div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import TheLeafletMap from '@/components/TheLeafletMap.vue'
+import { useMapStore } from '@/stores/map'
+import L from 'leaflet'
+import 'leaflet-groupedlayercontrol'
+import 'leaflet-groupedlayercontrol/dist/leaflet.groupedlayercontrol.min.css'
+
+const mapStore = useMapStore()
+
+// Load map store properties as refs for reactivity
+const { mapLoaded } = storeToRefs(mapStore)
+
+// Track which WMS layer is currently active
+let activeWmsLayer = null
+
+// Define the perceptual models "Domain" WMS layer
+const wmsLayerDomain = L.tileLayer.wms(
+  'https://arcgis.cuahsi.org/arcgis/services/HydroProcess/Domain/MapServer/WMSServer',
+  {
+    layers: '0',
+    format: 'image/png',
+    transparent: true,
+    pane: 'overlayPane'
+  }
+)
+
+// Define the perceptual models "Provinces" WMS layer
+const wmsLayerProvince = L.tileLayer.wms(
+  'https://arcgis.cuahsi.org/arcgis/services/HydroProcess/Province/MapServer/WMSServer',
+  {
+    layers: '0',
+    format: 'image/png',
+    transparent: true,
+    pane: 'overlayPane'
+  }
+)
+
+// Define the Legend URLs
+const legendUrls = {
+  domain:
+    'https://arcgis.cuahsi.org/arcgis/services/HydroProcess/Domain/MapServer/WMSServer?service=WMS&request=GetLegendGraphic&format=image/png&layer=0&version=1.1.1',
+  province:
+    'https://arcgis.cuahsi.org/arcgis/services/HydroProcess/Province/MapServer/WMSServer?service=WMS&request=GetLegendGraphic&format=image/png&layer=0&version=1.1.1'
+}
+
+onMounted(async () => {
+  // Add the perceptual models "Domain" layer to the map
+  // Only adding the "Domain" layer by default to
+  // control which layer is initially active.
+  wmsLayerDomain.addTo(mapStore.leaflet)
+
+  // Set up grouped layer control
+  // Add the default base layer to the map before adding the control
+  const groupedOverlays = {
+    Regions: {
+      Domains: wmsLayerDomain,
+      Provinces: wmsLayerProvince
+    }
+  }
+
+  // Move layer control to the left
+  const layerControl = new L.Control.GroupedLayers(null, groupedOverlays, {
+    exclusiveGroups: ['Regions'],
+    groupCheckboxes: true,
+    position: 'topleft',
+    collapsed: false
+  })
+  mapStore.leaflet.addControl(layerControl)
+
+  // Move zoom control to the right
+  mapStore.leaflet.removeControl(mapStore.leaflet.zoomControl)
+  mapStore.leaflet.zoomControl = L.control.zoom({ position: 'topright' }).addTo(mapStore.leaflet)
+
+  mapStore.leaflet.on('overlayadd', updateLegend)
+  mapStore.leaflet.on('overlayremove', updateLegend)
+
+  mapStore.leaflet.on('click', function (e) {
+    if (!activeWmsLayer) return
+    const url = getFeatureInfoUrl(mapStore.leaflet, activeWmsLayer, e.latlng)
+    fetch(url)
+      .then((response) => response.text())
+      .then((data) => {
+        L.popup().setLatLng(e.latlng).setContent(data).openOn(mapStore.leaflet)
+      })
+  })
+
+  // set the mapLoaded flag to true after the map and layers have been initialized
+  // this will turn off the loading overlay and allow the map to be displayed
+  mapLoaded.value = true
+
+  console.log(mapStore.leaflet.hasLayer(wmsLayerDomain))
+  console.log(mapStore.leaflet.hasLayer(wmsLayerProvince))
+})
+
+function updateLegend() {
+  const domainOn = mapStore.leaflet.hasLayer(wmsLayerDomain)
+  const provinceOn = mapStore.leaflet.hasLayer(wmsLayerProvince)
+  let html = ''
+  if (domainOn) {
+    html += `<img src="${legendUrls.domain}" alt="Domain Legend" style="margin-bottom:8px;" />`
+  }
+  if (provinceOn) {
+    html += `<img src="${legendUrls.province}" alt="Province Legend" />`
+  }
+  document.getElementById('wms-legend').innerHTML = html
+}
+
+function getFeatureInfoUrl(map, layer, latlng) {
+  const point = map.latLngToContainerPoint(latlng, map.getZoom())
+  const size = map.getSize()
+  const params = {
+    request: 'GetFeatureInfo',
+    service: 'WMS',
+    srs: 'EPSG:4326',
+    styles: '',
+    transparent: true,
+    version: '1.1.1',
+    format: 'image/png',
+    bbox: map.getBounds().toBBoxString(),
+    height: size.y,
+    width: size.x,
+    layers: layer.wmsParams.layers,
+    query_layers: layer.wmsParams.layers,
+    info_format: 'text/html'
+  }
+  params[params.version === '1.3.0' ? 'i' : 'x'] = Math.round(point.x)
+  params[params.version === '1.3.0' ? 'j' : 'y'] = Math.round(point.y)
+  const baseUrl = layer._url
+  return baseUrl + L.Util.getParamString(params, baseUrl, true)
+}
+</script>
+
+<style scoped></style>

From 550e430bc774fc9deda802b3900ce35bbc3eb3b5 Mon Sep 17 00:00:00 2001
From: Anthony Castronova <castronova.anthony@gmail.com>
Date: Wed, 15 Apr 2026 19:17:40 -0400
Subject: [PATCH 3/7] re-added styling to the legend

---
 frontend/src/views/PerceptualView.vue | 74 +++++++++++++++++++--------
 1 file changed, 52 insertions(+), 22 deletions(-)

diff --git a/frontend/src/views/PerceptualView.vue b/frontend/src/views/PerceptualView.vue
index 04cd3ef..2b1f757 100644
--- a/frontend/src/views/PerceptualView.vue
+++ b/frontend/src/views/PerceptualView.vue
@@ -8,20 +8,7 @@
       <v-col class="map-container pa-0">
         <TheLeafletMap />
 
-        <div
-          id="wms-legend"
-          style="
-            position: absolute;
-            bottom: 80px;
-            left: 10px;
-            background: white;
-            z-index: 1001;
-            padding: 8px;
-            border-radius: 4px;
-            min-width: 40px;
-            min-height: 40px;
-          "
-        ></div>
+        <div id="wms-legend"></div>
       </v-col>
     </v-row>
   </v-container>
@@ -98,13 +85,6 @@ onMounted(async () => {
   })
   mapStore.leaflet.addControl(layerControl)
 
-  // Move zoom control to the right
-  mapStore.leaflet.removeControl(mapStore.leaflet.zoomControl)
-  mapStore.leaflet.zoomControl = L.control.zoom({ position: 'topright' }).addTo(mapStore.leaflet)
-
-  mapStore.leaflet.on('overlayadd', updateLegend)
-  mapStore.leaflet.on('overlayremove', updateLegend)
-
   mapStore.leaflet.on('click', function (e) {
     if (!activeWmsLayer) return
     const url = getFeatureInfoUrl(mapStore.leaflet, activeWmsLayer, e.latlng)
@@ -115,6 +95,18 @@ onMounted(async () => {
       })
   })
 
+  // Move zoom control to the right
+  mapStore.leaflet.removeControl(mapStore.leaflet.zoomControl)
+  mapStore.leaflet.zoomControl = L.control.zoom({ position: 'topright' }).addTo(mapStore.leaflet)
+
+  // add hooks to update the legend when layers are added or removed.
+  // Then call the updateLegend function manually. This is necessary
+  // because the overlayadd isn't called when initially adding the
+  // layers to the map.
+  mapStore.leaflet.on('overlayadd', updateLegend)
+  mapStore.leaflet.on('overlayremove', updateLegend)
+  updateLegend()
+
   // set the mapLoaded flag to true after the map and layers have been initialized
   // this will turn off the loading overlay and allow the map to be displayed
   mapLoaded.value = true
@@ -161,4 +153,42 @@ function getFeatureInfoUrl(map, layer, latlng) {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+/* Legend styles */
+#wms-legend {
+  position: absolute;
+  border: 2px solid #ccc;
+  min-width: 120px;
+  min-height: 120px;
+  max-width: 350px;
+  max-height: 300px;
+  overflow: auto;
+  padding: 6px;
+  font-size: 1.2em;
+  box-sizing: border-box;
+  z-index: 1001;
+  border-radius: 4px;
+  bottom: 10px;
+  left: 10px;
+  background: white;
+}
+
+@media (max-width: 600px) {
+  #wms-legend {
+    position: absolute;
+    border: 2px solid #ccc;
+    min-width: 80px;
+    min-height: 60px;
+    max-width: 90vw;
+    max-height: 120px;
+    padding: 6px;
+    font-size: 1em;
+    left: 4px !important;
+    right: 4px !important;
+    z-index: 1001;
+    bottom: 10px;
+    left: 10px;
+    background: white;
+  }
+}
+</style>

From accd7fe4d638ab83af2de17510d24cfe2c387170 Mon Sep 17 00:00:00 2001
From: Anthony Castronova <castronova.anthony@gmail.com>
Date: Thu, 16 Apr 2026 12:32:40 -0400
Subject: [PATCH 4/7] centered zoom to north america and set max zoom and
 bounds so the entire earth is not visible

---
 frontend/src/views/PerceptualView.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/src/views/PerceptualView.vue b/frontend/src/views/PerceptualView.vue
index 2b1f757..fb5ad9c 100644
--- a/frontend/src/views/PerceptualView.vue
+++ b/frontend/src/views/PerceptualView.vue
@@ -62,6 +62,17 @@ const legendUrls = {
 }
 
 onMounted(async () => {
+  // set the map bounds so that only North America is visible
+  // also set the minimum zoom level to prevent users from zooming
+  // out too far and seeing the entire world.
+  mapStore.leaflet.setMaxBounds(
+    L.latLngBounds([
+      [5, -170], // SW coordinate of bbox
+      [75, -50] // NE coordinate of bbox
+    ])
+  )
+  mapStore.leaflet.setMinZoom(3)
+
   // Add the perceptual models "Domain" layer to the map
   // Only adding the "Domain" layer by default to
   // control which layer is initially active.

From afc0384e36ac11c0597e2b74f2f3eb3e5232e742 Mon Sep 17 00:00:00 2001
From: Anthony Castronova <castronova.anthony@gmail.com>
Date: Thu, 16 Apr 2026 12:59:01 -0400
Subject: [PATCH 5/7] cleaned legend styling so it is consistent with the
 layers toggle component

---
 frontend/src/views/PerceptualView.vue | 43 ++++++++++++++++-----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/frontend/src/views/PerceptualView.vue b/frontend/src/views/PerceptualView.vue
index fb5ad9c..2e424ae 100644
--- a/frontend/src/views/PerceptualView.vue
+++ b/frontend/src/views/PerceptualView.vue
@@ -131,7 +131,7 @@ function updateLegend() {
   const provinceOn = mapStore.leaflet.hasLayer(wmsLayerProvince)
   let html = ''
   if (domainOn) {
-    html += `<img src="${legendUrls.domain}" alt="Domain Legend" style="margin-bottom:8px;" />`
+    html += `<img src="${legendUrls.domain}" alt="Domain Legend" />`
   }
   if (provinceOn) {
     html += `<img src="${legendUrls.province}" alt="Province Legend" />`
@@ -165,20 +165,28 @@ function getFeatureInfoUrl(map, layer, latlng) {
 </script>
 
 <style scoped>
+/* img styles for legend */
+img {
+  display: block;
+  vertical-align: middle;
+}
+
+div {
+  line-height: 0;
+}
+
 /* Legend styles */
 #wms-legend {
+  z-index: 1001;
   position: absolute;
-  border: 2px solid #ccc;
-  min-width: 120px;
-  min-height: 120px;
+  overflow: auto;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  min-width: 90px;
   max-width: 350px;
   max-height: 300px;
-  overflow: auto;
   padding: 6px;
-  font-size: 1.2em;
-  box-sizing: border-box;
-  z-index: 1001;
-  border-radius: 4px;
+  font-size: 1em;
+  border-radius: 6px;
   bottom: 10px;
   left: 10px;
   background: white;
@@ -186,19 +194,18 @@ function getFeatureInfoUrl(map, layer, latlng) {
 
 @media (max-width: 600px) {
   #wms-legend {
+    z-index: 1001;
     position: absolute;
-    border: 2px solid #ccc;
-    min-width: 80px;
-    min-height: 60px;
-    max-width: 90vw;
+    overflow: auto;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    min-width: 90px;
+    max-width: 350px;
     max-height: 120px;
     padding: 6px;
     font-size: 1em;
-    left: 4px !important;
-    right: 4px !important;
-    z-index: 1001;
-    bottom: 10px;
-    left: 10px;
+    border-radius: 6px;
+    bottom: 4px;
+    left: 4px;
     background: white;
   }
 }

From 86d061e24a85f3dd9ac0b299d5e21ab2a3e5d202 Mon Sep 17 00:00:00 2001
From: Anthony Castronova <castronova.anthony@gmail.com>
Date: Thu, 16 Apr 2026 13:00:00 -0400
Subject: [PATCH 6/7] removed unnecessary img styling

---
 frontend/src/views/PerceptualView.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/src/views/PerceptualView.vue b/frontend/src/views/PerceptualView.vue
index 2e424ae..ed5c647 100644
--- a/frontend/src/views/PerceptualView.vue
+++ b/frontend/src/views/PerceptualView.vue
@@ -165,12 +165,6 @@ function getFeatureInfoUrl(map, layer, latlng) {
 </script>
 
 <style scoped>
-/* img styles for legend */
-img {
-  display: block;
-  vertical-align: middle;
-}
-
 div {
   line-height: 0;
 }

From 76f59e9844418a402e8418ad252e729f89325fda Mon Sep 17 00:00:00 2001
From: Anthony Castronova <castronova.anthony@gmail.com>
Date: Thu, 16 Apr 2026 13:01:47 -0400
Subject: [PATCH 7/7] removed popup logic so it can be included in another pr

---
 frontend/src/views/PerceptualView.vue | 37 ---------------------------
 1 file changed, 37 deletions(-)

diff --git a/frontend/src/views/PerceptualView.vue b/frontend/src/views/PerceptualView.vue
index ed5c647..9643204 100644
--- a/frontend/src/views/PerceptualView.vue
+++ b/frontend/src/views/PerceptualView.vue
@@ -28,9 +28,6 @@ const mapStore = useMapStore()
 // Load map store properties as refs for reactivity
 const { mapLoaded } = storeToRefs(mapStore)
 
-// Track which WMS layer is currently active
-let activeWmsLayer = null
-
 // Define the perceptual models "Domain" WMS layer
 const wmsLayerDomain = L.tileLayer.wms(
   'https://arcgis.cuahsi.org/arcgis/services/HydroProcess/Domain/MapServer/WMSServer',
@@ -96,16 +93,6 @@ onMounted(async () => {
   })
   mapStore.leaflet.addControl(layerControl)
 
-  mapStore.leaflet.on('click', function (e) {
-    if (!activeWmsLayer) return
-    const url = getFeatureInfoUrl(mapStore.leaflet, activeWmsLayer, e.latlng)
-    fetch(url)
-      .then((response) => response.text())
-      .then((data) => {
-        L.popup().setLatLng(e.latlng).setContent(data).openOn(mapStore.leaflet)
-      })
-  })
-
   // Move zoom control to the right
   mapStore.leaflet.removeControl(mapStore.leaflet.zoomControl)
   mapStore.leaflet.zoomControl = L.control.zoom({ position: 'topright' }).addTo(mapStore.leaflet)
@@ -138,30 +125,6 @@ function updateLegend() {
   }
   document.getElementById('wms-legend').innerHTML = html
 }
-
-function getFeatureInfoUrl(map, layer, latlng) {
-  const point = map.latLngToContainerPoint(latlng, map.getZoom())
-  const size = map.getSize()
-  const params = {
-    request: 'GetFeatureInfo',
-    service: 'WMS',
-    srs: 'EPSG:4326',
-    styles: '',
-    transparent: true,
-    version: '1.1.1',
-    format: 'image/png',
-    bbox: map.getBounds().toBBoxString(),
-    height: size.y,
-    width: size.x,
-    layers: layer.wmsParams.layers,
-    query_layers: layer.wmsParams.layers,
-    info_format: 'text/html'
-  }
-  params[params.version === '1.3.0' ? 'i' : 'x'] = Math.round(point.x)
-  params[params.version === '1.3.0' ? 'j' : 'y'] = Math.round(point.y)
-  const baseUrl = layer._url
-  return baseUrl + L.Util.getParamString(params, baseUrl, true)
-}
 </script>
 
 <style scoped>