New option to setup default extent area for spatial query

config.js

@@ -47,5 +47,7 @@ module.exports = {
     socialSharing: ['email', 'bsky', 'mastodon', 'x'],
     preprocessSTAC: null,
     authConfig: null,
+    // defaultSearchExtent e.g. [12.227593034455793, 41.78656913683952, 12.652310726657447, 42.02970865107619]
+    defaultSearchExtent: null,
     crs: {}
 };

src/components/SearchFilter.vue

@@ -27,8 +27,8 @@
         </b-form-group>
 
         <b-form-group v-if="canFilterExtents" class="filter-bbox" :label="$t('search.spatialExtent')" :label-for="ids.bbox">
-          <b-form-checkbox :id="ids.bbox" v-model="provideBBox" value="1">{{ $t('search.filterBySpatialExtent') }}</b-form-checkbox>
-          <MapSelect class="mb-4" v-if="provideBBox" v-model="query.bbox" :stac="stac" />
+          <b-form-checkbox :id="ids.bbox" v-model="provideBBox" checked="provideBBox">{{ $t('search.filterBySpatialExtent') }}</b-form-checkbox>
+          <MapSelect class="mb-4" v-if="provideBBox" v-model="query.bbox" :stac="stac" :initExtent="defaultExtent" />
         </b-form-group>
 
         <b-form-group v-if="conformances.CollectionIdFilter" class="filter-collection" :label="$tc('stacCollection', collections.length)" :label-for="ids.collections">
@@ -216,7 +216,7 @@ export default {
   },
   computed: {
     ...mapState(['itemsPerPage', 'maxItemsPerPage', 'uiLanguage']),
-    ...mapGetters(['canSearchCollections', 'supportsConformance']),
+    ...mapGetters(['canSearchCollections', 'supportsConformance', 'defaultSearchExtent']),
     collectionSelectOptions() {
       let taggable = !this.hasAllCollections;
       let isResult = this.collections.length > 0 && !this.hasAllCollections;
@@ -257,6 +257,9 @@ export default {
       }
       return null;
     },
+    defaultExtent() {
+      return this.query?.bbox? this.query.bbox : this.defaultSearchExtent;
+    },
     andOrOptions() {
       return [
         { value: 'and', text: this.$t('search.logical.and') },
@@ -291,7 +294,7 @@ export default {
       set(val) {
         this.query.datetime = Array.isArray(val) ? val.map(d => Utils.dateToUTC(d)) : null;
       }
-    }
+    },
   },
   watch: {
     parent: {
@@ -337,7 +340,7 @@ export default {
         this.query.bbox = null;
       }
       else {
-        this.query.bbox = this.bbox;
+        this.query.bbox = this.bbox? this.bbox : this.defaultExtent;
       }
     }
   },

src/components/maps/MapSelect.vue

@@ -42,6 +42,10 @@ export default {
       type: Object,
       default: null
     },
+    initExtent: {
+      type: Array,
+      default: null
+    },
     value: {
       type: Array,
       default: null
@@ -50,8 +54,8 @@ export default {
   data() {
     return {
       crs: 'EPSG:4326',
-      extent: this.value,
-      dragging: false
+      extent: this.initExtent,
+      dragging: true
     };
   },
   computed: {
@@ -82,6 +86,9 @@ export default {
   methods: {
     async initMap() {
       this.map = null;
+      if (this.initExtent) {
+        this.extent = this.initExtent;
+      }
 
       await this.createMap(this.$refs.map, this.stac, true);
 
@@ -140,8 +147,10 @@ export default {
         }
       }
       if (extent) {
+        this.map.updateSize();
         this.map.getView().fit(extent, { padding: [50,50,50,50] });
       }
+
     },
     addMask(stac) {
       // Darken areas outside of the available area

src/locales/it/texts.json

@@ -156,7 +156,17 @@
       "label": "i",
       "collapseLabel": "✕"
     },
+    "bboxSelect": {
+      "add": "Cliccare sulla mappa per aggiungere un box di selezione.",
+      "remove": "Cliccare dentro il box per eliminarlo."
+    },
     "close": "Chiudi",
+    "fit": "Adatta alla estensione",
+    "location": {
+      "description": "Vai alla tua posizione attuale"
+    },
+    "nobasemap": "Mappa base non disponibile.",
+    "nodata": "Indormazione spaziale mancante nei metadati.",
     "zoom": {
       "in": {
         "description": "Zoom avanti",

src/store/index.js

@@ -63,6 +63,9 @@ function getStore(config, router) {
       uiLanguage: config.locale
     }),
     getters: {
+      defaultSearchExtent: state => {
+        return state.defaultSearchExtent? state.defaultSearchExtent : null;
+      },
       loading: state => !state.url || !state.data || state.database[state.url] instanceof Loading,
       getApiItemsLoading: state => data => {
         let id = '';