Added checkbox to show/hide boundaries when zoomed in past render threshold (#255)

* Added checkbox to show/hide boundaries when zoomed in past render threshold

* Ran prettier

* Persist checkbox state in URL

* Fix race condition for zoom level listener

---------

Co-authored-by: Matthias Mohr <m.mohr@moregeo.it>

Author: calebrob6

src/components/GlobalDataPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import useSettings from '../composables/useSettings'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import useSettings, { GLOBAL_DATA_MAP_FIELD_START_ZOOM_LEVEL } from '../composables/useSettings'
 import useMap from '../composables/useMap'
 import useAreaOfInterest from '../composables/useAreaOfInterest'
 import type { PlaceResult } from '../composables/useAreaOfInterest'
@@ -13,6 +14,34 @@ const { map } = useMap()
 const { fitToExtent } = useAreaOfInterest()
 const { showError } = useNotifier()
 
+const zoom = ref(0)
+const onZoomChange = () => {
+  zoom.value = map.value?.getView()?.getZoom() ?? 0
+}
+
+// Watch map and attach zoom listener when map becomes available
+watch(
+  map,
+  (newMap, oldMap) => {
+    // Clean up previous listener
+    if (oldMap) {
+      oldMap.getView()?.un('change:resolution', onZoomChange)
+    }
+
+    // Attach new listener if map is available
+    if (newMap) {
+      onZoomChange()
+      newMap.getView().on('change:resolution', onZoomChange)
+    }
+  },
+  { immediate: true },
+)
+
+onUnmounted(() => {
+  map.value?.getView()?.un('change:resolution', onZoomChange)
+})
+const fieldBoundariesDisabled = computed(() => zoom.value < GLOBAL_DATA_MAP_FIELD_START_ZOOM_LEVEL)
+
 const handleLocationSelected = (place: PlaceResult) => {
   if (!map.value) return
   if (!place.boundingbox) {
@@ -52,6 +81,15 @@ const handleLocationSelected = (place: PlaceResult) => {
           thumb-color="teal"
           hide-details
         />
+        <v-checkbox
+          v-model="settings.showFieldBoundaries"
+          label="Show field boundaries"
+          density="compact"
+          hide-details
+          color="teal"
+          class="mt-2"
+          :disabled="fieldBoundariesDisabled"
+        />
         <h3 class="group legend">Legend</h3>
         <MapLegend />
       </v-col>

src/composables/useMap.ts

@@ -85,13 +85,27 @@ watch(
     // Insert at index 0 to keep it as the base layer
     map.value.getLayers().insertAt(0, cloudlessLayer.value)
 
-    if (settings.value.mode === 'global' && globalPredictionsController.value) {
-      removeGlobalPredictionsLayer()
-      updateLayers()
+    if (settings.value.mode === 'global') {
+      if (globalPredictionsController.value) {
+        map.value.removeLayer(globalPredictionsController.value.layer)
+        globalPredictionsController.value.dispose()
+        globalPredictionsController.value = null
+      }
+
+      globalPredictionsController.value = createGlobalPredictionsLayer(settings.value)
+      globalPredictionsController.value.layer.setVisible(settings.value.showFieldBoundaries)
+      map.value.addLayer(globalPredictionsController.value.layer)
     }
   },
 )
 
+watch(
+  () => settings.value.showFieldBoundaries,
+  (visible) => {
+    globalPredictionsController.value?.layer.setVisible(visible)
+  },
+)
+
 const initCloudlessLayer = () => {
   if (!map.value) {
     return
@@ -143,6 +157,7 @@ const updateLayers = () => {
     if (!globalPredictionsController.value) {
       // Only handle first initialization here, year changes are handled by a watcher on year above
       globalPredictionsController.value = createGlobalPredictionsLayer(settings.value)
+      globalPredictionsController.value.layer.setVisible(settings.value.showFieldBoundaries)
       map.value.addLayer(globalPredictionsController.value.layer)
     }
     if (!globalOverviewLayer.value) {

src/composables/usePermalink.ts

@@ -30,6 +30,7 @@ export interface PermalinkStateInference extends PermalinkState {
 
 export interface PermalinkStateGlobal extends PermalinkState {
   threshold: number
+  showFieldBoundaries: boolean
 }
 
 export default function usePermalink() {
@@ -58,6 +59,7 @@ export default function usePermalink() {
     center: [0, 0],
     year: 2025,
     threshold: 0.4,
+    showFieldBoundaries: true,
   }
 
   const getDefaultState = (mode: string): PermalinkStateInference | PermalinkStateGlobal => {
@@ -173,6 +175,7 @@ export default function usePermalink() {
             zoom,
             center,
             threshold: defaultGlobalState.threshold,
+            showFieldBoundaries: defaultGlobalState.showFieldBoundaries,
           }
 
           for (const part of keyValueParts) {
@@ -182,6 +185,8 @@ export default function usePermalink() {
             } else if (part.startsWith('year:')) {
               const year = parseInt(part.substring(5), 10)
               if (!isNaN(year)) result.year = year
+            } else if (part.startsWith('field_boundaries:')) {
+              result.showFieldBoundaries = part.substring(17) === '1'
             }
           }
 
@@ -284,13 +289,15 @@ export default function usePermalink() {
       if (settings.value.year) {
         hashParts.push(`year:${settings.value.year}`)
       }
+      hashParts.push(`field_boundaries:${settings.value.showFieldBoundaries ? 1 : 0}`)
 
       state = {
         mode,
         zoom,
         center,
         threshold: settings.value.threshold,
         year: settings.value.year,
+        showFieldBoundaries: settings.value.showFieldBoundaries,
       }
     }
 
@@ -327,6 +334,7 @@ export default function usePermalink() {
 
   function restoreGlobalState(state: PermalinkStateGlobal) {
     settings.value.threshold = state.threshold
+    settings.value.showFieldBoundaries = state.showFieldBoundaries
     if (state.year) {
       settings.value.year = state.year
     }
@@ -358,6 +366,7 @@ export default function usePermalink() {
         settings.value.areaCoverage,
         settings.value.buffer,
         settings.value.threshold,
+        settings.value.showFieldBoundaries,
       ],
       () => {
         if (!map.value) {

src/composables/useSettings.ts

@@ -12,6 +12,7 @@ export interface Settings {
   expertMode: boolean
   mode: string
   threshold: number
+  showFieldBoundaries: boolean
 }
 
 export interface ModelInfo {
@@ -57,6 +58,7 @@ const defaultSettings: Settings = {
   expertMode: false,
   mode: defaultMode,
   threshold: 0.4,
+  showFieldBoundaries: true,
 }
 
 const defaultModel = computed(() => {