Add 1° download grid layer and download modal

src/components/GlobalDataPanel.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { mdiHelpCircleOutline } from '@mdi/js'
 import useSettings from '../composables/useSettings'
 import useMap from '../composables/useMap'
 import useAreaOfInterest from '../composables/useAreaOfInterest'
 import type { PlaceResult } from '../composables/useAreaOfInterest'
 import useNotifier from '../composables/useNotifier'
+import useDownloadGrid from '../composables/useDownloadGrid'
 import { transformExtent } from 'ol/proj'
 import GeocodingSearch from './GeocodingSearch.vue'
 import MapLegend from './MapLegend.vue'
@@ -12,6 +14,7 @@ const { settings } = useSettings()
 const { map } = useMap()
 const { fitToExtent } = useAreaOfInterest()
 const { showError } = useNotifier()
+useDownloadGrid()
 
 const handleLocationSelected = (place: PlaceResult) => {
   if (!map.value) return
@@ -68,9 +71,9 @@ const handleLocationSelected = (place: PlaceResult) => {
           thumb-color="teal"
           hide-details
         />
-        <h3 class="group">Opacity: {{ settings.fieldBoundariesOpacity }}%</h3>
+        <h3 class="group">Opacity: {{ settings.opacity }}%</h3>
         <v-slider
-          v-model.number="settings.fieldBoundariesOpacity"
+          v-model.number="settings.opacity"
           :min="0"
           :max="100"
           :step="1"
@@ -79,6 +82,34 @@ const handleLocationSelected = (place: PlaceResult) => {
           thumb-color="teal"
           hide-details
         />
+        <div class="group group-with-help">
+          <h3>Download Data</h3>
+          <v-menu open-on-hover :close-on-content-click="false" max-width="400">
+            <template #activator="{ props }">
+              <v-icon :icon="mdiHelpCircleOutline" size="x-small" v-bind="props"></v-icon>
+            </template>
+            <v-sheet class="pa-3 text-body-2">
+              <p class="pb-2">
+                After activation, click a tile to download the agricultural field boundary
+                predictions for that 1° cell as a GeoParquet file.
+              </p>
+              <p>
+                You can also download the entire dataset in various variants from
+                <a href="https://source.coop/ftw/global-data/" target="_blank" rel="noopener"
+                  >our Source Cooperative repository</a
+                >.
+              </p>
+            </v-sheet>
+          </v-menu>
+        </div>
+        <v-switch
+          v-model="settings.downloads"
+          color="teal"
+          density="compact"
+          hide-details
+          label="Show download grid"
+          class="mb-1"
+        />
         <h3 class="group legend">Legend</h3>
         <MapLegend />
       </v-col>
@@ -92,6 +123,16 @@ const handleLocationSelected = (place: PlaceResult) => {
   font-weight: 500;
   font-size: 1.1rem;
 }
+.group-with-help {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.group-with-help h3 {
+  margin: 0;
+  font-weight: inherit;
+  font-size: inherit;
+}
 .group.legend {
   margin-top: 1rem;
   border-top: 1px solid rgba(136, 136, 136, 0.65);

src/components/MapComponent.vue

@@ -12,6 +12,7 @@ import useAreaOfInterest from '../composables/useAreaOfInterest'
 import usePermalink from '../composables/usePermalink'
 import useMap from '../composables/useMap'
 import useSettings from '../composables/useSettings'
+import useDownloadGrid from '../composables/useDownloadGrid'
 import { createXYZ } from 'ol/tilegrid'
 
 const {
@@ -22,11 +23,14 @@ const {
   propertiesBoxPosition,
   originalClickPosition,
   hidePropertiesBox,
+  handleMapClick,
   geoJsonResults,
   initCloudlessLayer,
   updateLayers,
 } = useMap()
 
+useDownloadGrid()
+
 const { addMapClickHandler } = useAreaOfInterest()
 const { setAvailableModels, settings } = useSettings()
 
@@ -91,6 +95,7 @@ onMounted(async () => {
     updateLayers()
 
     addMapClickHandler(map.value as Map, areaValues.value)
+    map.value.on('singleclick', handleMapClick)
     // Add scale bar
     map.value.addControl(new ScaleLine())
     // Setup permalink functionality
@@ -158,7 +163,6 @@ defineExpose({
       <PropertiesDisplay :properties="selectedFeature.getProperties()" />
     </div>
   </div>
-
   <header v-if="critical" id="critical">
     <v-alert closable type="error" :text="critical"></v-alert>
   </header>

src/components/ProcessingResults.vue

@@ -93,7 +93,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, onBeforeUnmount, computed } from 'vue'
+import { ref, onBeforeUnmount, computed } from 'vue'
 import useMap from '../composables/useMap'
 import useNotifier from '../composables/useNotifier'
 import useAreaOfInterest from '../composables/useAreaOfInterest'
@@ -109,7 +109,7 @@ const emit = defineEmits<{
   (e: 'clearResults'): void
 }>()
 
-const { map, handleMapClick, vectorLayer, selectedFeature, hidePropertiesBox } = useMap()
+const { map, vectorLayer, selectedFeature, hidePropertiesBox } = useMap()
 const { clearResults, returnToResults, fitToExtent } = useAreaOfInterest()
 const { showInfo, showError } = useNotifier()
 
@@ -261,24 +261,10 @@ const fitMapToResult = (result: Feature) => {
   fitToExtent(map.value!, extent, null)
 }
 
-onMounted(() => {
-  // Add map click handler to detect feature clicks and show properties
-  if (map.value) {
-    map.value.on('singleclick', handleMapClick)
-  }
-})
-
 onBeforeUnmount(() => {
   selectedFeature.value = null
 })
 
-// Clean up map click handler when component is unmounted
-onUnmounted(() => {
-  if (map.value) {
-    map.value.un('singleclick', handleMapClick)
-  }
-})
-
 const clearResultsHandler = () => {
   // Clear results and zoom back to S2 grid
   clearResults(map.value!)