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

src/components/GlobalDataPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import useSettings from '../composables/useSettings'
+import { computed, onMounted, onUnmounted, ref } 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,21 @@ const { map } = useMap()
 const { fitToExtent } = useAreaOfInterest()
 const { showError } = useNotifier()
 
+const zoom = ref(0)
+const onZoomChange = () => {
+  zoom.value = map.value?.getView()?.getZoom() ?? 0
+}
+onMounted(() => {
+  if (map.value) {
+    onZoomChange()
+    map.value.getView().on('change:resolution', onZoomChange)
+  }
+})
+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 +68,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

@@ -107,11 +107,19 @@ watch(
       }
 
       globalPredictionsLayer.value = createGlobalPredictionsLayer(settings.value)
+      globalPredictionsLayer.value.setVisible(settings.value.showFieldBoundaries)
       map.value.addLayer(globalPredictionsLayer.value)
     }
   },
 )
 
+watch(
+  () => settings.value.showFieldBoundaries,
+  (visible) => {
+    globalPredictionsLayer.value?.setVisible(visible)
+  },
+)
+
 const initCloudlessLayer = () => {
   if (!map.value) {
     return
@@ -170,6 +178,7 @@ const updateLayers = () => {
     if (!globalPredictionsLayer.value) {
       // Only handle first initialization here, year changes are handled by a watcher on year above
       globalPredictionsLayer.value = createGlobalPredictionsLayer(settings.value)
+      globalPredictionsLayer.value.setVisible(settings.value.showFieldBoundaries)
       map.value.addLayer(globalPredictionsLayer.value)
     }
     if (!globalOverviewLayer.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(() => {