From f1561efcbe1e8fa8ab893daa1312d3fc911bf07d Mon Sep 17 00:00:00 2001
From: Matthias Mohr <m.mohr@uni-muenster.de>
Date: Fri, 4 Apr 2025 02:17:10 +0200
Subject: [PATCH 1/7] Improve CRS, layer switcher and basemap handling

---
 basemaps.config.js                   |  7 +--
 config.js                            |  3 +-
 config.schema.json                   |  5 +++
 docs/options.md                      | 18 ++++++++
 src/components/Map.vue               |  4 --
 src/components/maps/LayerControl.vue | 65 ++++++++++++++++++++--------
 src/components/maps/MapMixin.js      | 29 +++++++++----
 src/components/maps/MapSelect.vue    |  4 --
 8 files changed, 98 insertions(+), 37 deletions(-)

diff --git a/basemaps.config.js b/basemaps.config.js
index 68336682c..717d97901 100644
--- a/basemaps.config.js
+++ b/basemaps.config.js
@@ -6,6 +6,7 @@ const WMS = 'TileWMS';
 const XYZ = 'XYZ';
 
 // All options (except for 'is') follow the OpenLayers options for the respective source class.
+// Projections (except for EPSG:3857 and EPSG:4326) must be listed in the `crs` array in the config.js.
 const BASEMAPS = {
   earth: [
     {
@@ -22,7 +23,7 @@ const BASEMAPS = {
       is: WMS,
       title: 'USGS Europa',
       attributions: USGS_ATTRIBUTION,
-      projection: "EPSG:4326",
+      projection: 'EPSG:4326',
       params: {
         FORMAT: 'image/png',
         LAYERS: 'GALILEO_VOYAGER'
@@ -35,7 +36,7 @@ const BASEMAPS = {
       is: WMS,
       title: 'USGS Mars',
       attributions: USGS_ATTRIBUTION,
-      projection: "EPSG:4326",
+      projection: 'EPSG:4326',
       params: {
         FORMAT: 'image/png',
         LAYERS: 'MDIM21'
@@ -48,7 +49,7 @@ const BASEMAPS = {
       is: WMS,
       title: 'USGS Moon',
       attributions: USGS_ATTRIBUTION,
-      projection: "EPSG:4326",
+      projection: 'EPSG:4326',
       params: {
         FORMAT: 'image/png',
         LAYERS: 'LROC_WAC'
diff --git a/config.js b/config.js
index 6112b7d1e..e5c561490 100644
--- a/config.js
+++ b/config.js
@@ -46,5 +46,6 @@ module.exports = {
     requestQueryParameters: {},
     socialSharing: ['email', 'bsky', 'mastodon', 'x'],
     preprocessSTAC: null,
-    authConfig: null
+    authConfig: null,
+    crs: {}
 };
diff --git a/config.schema.json b/config.schema.json
index 283cfbaf4..1716a0919 100644
--- a/config.schema.json
+++ b/config.schema.json
@@ -231,6 +231,11 @@
           "$ref": "https://stac-extensions.github.io/authentication/v1.1.0/schema.json"
         }
       ]
+    },
+    "crs": {
+      "type": [
+        "object"
+      ]
     }
   }
 }
diff --git a/docs/options.md b/docs/options.md
index c3cc7771a..90d20512b 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -45,6 +45,7 @@ The following ways to set config options are possible:
   - [buildTileUrlTemplate](#buildtileurltemplate)
   - [useTileLayerAsFallback](#usetilelayerasfallback)
   - [displayGeoTiffByDefault](#displaygeotiffbydefault)
+  - [crs](#crs)
 - [User Interface](#user-interface)
   - [itemsPerPage](#itemsperpage)
   - [maxItemsPerPage](#maxitemsperpage)
@@ -373,6 +374,23 @@ To clarify the behavior, please have a look at the following table:
 If set to `true`, the map also shows non-cloud-optimized GeoTiff files by default. Otherwise (`false`, default), it only shows COGs and you can only enforce showing GeoTiffs to be loaded with the "Show on map" button but they are never loaded automatically.
 Loading non-cloud-optimized GeoTiffs only works reliably for smaller files (< 1MB). It may also work for larger files, but it is depending a lot on the underlying client hardware and software.
 
+### crs
+
+An object of coordinate reference systems that the system needs to know.
+The key is the code for the CRS, the value is the CRS definition as OGC WKT string (WKT2 is not supported).
+`EPSG:3857` (Web Mercator) and `EPSG:4326` (WGS 84) don't need to be registered, they are included by default.
+
+This is primarily useful for CRS that are used for the basemaps (see `basemaps.config.js`).
+All CRS not listed here will be requested from an external service over HTTP, which is slower.
+
+Example for EPSG:2056:
+
+```js
+{
+  'EPSG:2056': 'PROJCS["CH1903+ / LV95",GEOGCS["CH1903+",DATUM["CH1903+",SPHEROID["Bessel 1841",6377397.155,299.1528128,AUTHORITY["EPSG","7004"]],AUTHORITY["EPSG","6150"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4150"]],PROJECTION["Hotine_Oblique_Mercator_Azimuth_Center"],PARAMETER["latitude_of_center",46.9524055555556],PARAMETER["longitude_of_center",7.43958333333333],PARAMETER["azimuth",90],PARAMETER["rectified_grid_angle",90],PARAMETER["scale_factor",1],PARAMETER["false_easting",2600000],PARAMETER["false_northing",1200000],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AXIS["Easting",EAST],AXIS["Northing",NORTH],AUTHORITY["EPSG","2056"]]'
+}
+```
+
 ## User Interface
 
 ### itemsPerPage
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 442a610ce..460cb9704 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -27,14 +27,10 @@ import LayerControl from './maps/LayerControl.vue';
 import TextControl from './maps/TextControl.vue';
 import { mapGetters } from 'vuex';
 import { BPopover } from 'bootstrap-vue';
-import proj4 from 'proj4';
 import Select from 'ol/interaction/Select';
-import {register} from 'ol/proj/proj4.js';
 import StacLayer from 'ol-stac';
 import { getStacObjectsForEvent, getStyle } from 'ol-stac/util.js';
 
-register(proj4); // required to support source reprojection
-
 const selectStyle = getStyle('#ff0000', 2, null);
 
 export default {
diff --git a/src/components/maps/LayerControl.vue b/src/components/maps/LayerControl.vue
index 792aa6bab..f8a88a378 100644
--- a/src/components/maps/LayerControl.vue
+++ b/src/components/maps/LayerControl.vue
@@ -6,10 +6,6 @@
       :target="id" container="#stac-browser"
     >
       <div class="layercontrol">
-        <section v-if="hasLayers">
-          <h5>{{ $t('mapping.layers.title') }}</h5>
-          <LayerControlGroup :map="map" :group="layerGroup" />
-        </section>
         <section>
           <h5>{{ $t('mapping.layers.base') }}</h5>
           <span v-if="baseLayers.length === 0">{{ $t('mapping.nobasemap') }}</span>
@@ -19,17 +15,23 @@
             </b-form-radio>
           </b-form-radio-group>
         </section>
+        <section v-if="hasLayers">
+          <h5>{{ $t('mapping.layers.title') }}</h5>
+          <LayerControlGroup :map="map" :group="layerGroup" />
+        </section>
       </div>
     </b-popover>
   </div>
 </template>
 
 <script>
-//import View from 'ol/View';
+import View from 'ol/View';
 import ControlMixin from './ControlMixin';
 import LayerControlMixin from './LayerControlMixin';
 import { BFormRadio, BFormRadioGroup, BIconLayersFill, BPopover } from 'bootstrap-vue';
-//import { transformWithProjections } from 'ol/proj';
+import { transformWithProjections } from 'ol/proj';
+import Group from 'ol/layer/Group';
+import { Vector } from 'ol/source';
 
 export default {
   name: 'LayerControl',
@@ -66,23 +68,52 @@ export default {
         return;
       }
       // todo: switching between base layers with different projections is not working yet
-      //let projection;
+      let projection;
       for (const data of this.baseLayers) {
         data.layer.setVisible(data.id === newId);
-        //projection = data.layer.getSource().getProjection();
+        if (data.id === newId) {
+          projection = data.layer.getSource().getProjection();
+        }
+      }
+      const view = this.map.getView();
+      const currentProjection = view.getProjection();
+      if (currentProjection !== projection) {
+        this.map.setView(new View({
+          showFullExtent: true,
+          projection,
+          zoom: view.getZoom(),
+          center: transformWithProjections(view.getCenter(), currentProjection, projection)
+        }));
+        this.reprojectLayers(this.map.getLayers(), currentProjection, projection);
       }
-      // const view = this.map.getView();
-      // if (view.getProjection() !== projection) {
-      //   this.map.setView(new View({
-      //     showFullExtent: true,
-      //     projection,
-      //     zoom: view.getZoom(),
-      //     center: transformWithProjections(view.getCenter(), view.getProjection(), projection)
-      //   }));
-      // }
     }
   },
   methods: {
+    reprojectLayers(layers, sourceProjection, targetProjection) {
+      for (const layer of layers.getArray()) {
+        if (layer.get('base')) {
+          continue;
+        }
+        if (layer instanceof Group) {
+          this.reprojectLayers(layer.getLayers(), sourceProjection, targetProjection);
+          continue;
+        }
+        const source = layer.getSource();
+        if (source instanceof Vector) {
+          // Handle vector layers
+          const currentProjection = source.getProjection() || sourceProjection;
+          const features = source.getFeatures();
+          for (const feature of features) {
+            const geometry = feature.getGeometry();
+            if (geometry) {
+              geometry.transform(currentProjection, targetProjection);
+            }
+          }
+          source.refresh();
+        }
+        // else: todo: Handle other layer types if needed
+      }
+    },
     update() {
       this.layerGroup = this.map.getLayerGroup();
       this.baseLayers = [];
diff --git a/src/components/maps/MapMixin.js b/src/components/maps/MapMixin.js
index a9ea6e7c8..f3bb7e148 100644
--- a/src/components/maps/MapMixin.js
+++ b/src/components/maps/MapMixin.js
@@ -1,15 +1,25 @@
-import configureBasemap from '../../../basemaps.config';
 import Utils from '../../utils';
 import { mapState } from 'vuex';
 import Map from 'ol/Map.js';
 import View from 'ol/View.js';
 import { defaults } from 'ol/interaction/defaults';
-import TileLayer from 'ol/layer/WebGLTile.js';
 import ZoomControl from 'ol/control/Zoom.js';
 import AttributionControl from 'ol/control/Attribution.js';
 import FullScreenControl from 'ol/control/FullScreen.js';
 import { stacRequest } from '../../store/utils';
 
+import configureBasemap from '../../../basemaps.config';
+import CONFIG from '../../../config';
+import proj4 from 'proj4';
+import {register} from 'ol/proj/proj4.js';
+// Register pre-defined CRS from config in proj4
+if (Utils.isObject(CONFIG.crs)) {
+  for (const code in CONFIG.crs) {
+    proj4.defs(code, CONFIG.crs[code]);
+  }
+}
+register(proj4); // required to support source reprojection
+
 export default {
   computed: {
     ...mapState(['buildTileUrlTemplate', 'crossOriginMedia', 'displayGeoTiffByDefault', 'useTileLayerAsFallback']),
@@ -53,7 +63,7 @@ export default {
         if (ix >= 0) {
           visibleLayer = ix;
         }
-        const currentBasemap = this.basemaps[visibleLayer]; 
+        const currentBasemap = this.basemaps[visibleLayer];
         if (currentBasemap?.projection) {
           projection = currentBasemap?.projection;
         }
@@ -125,12 +135,16 @@ export default {
     async addBasemaps(basemaps, visibleLayer = 0) {
       const promises = basemaps.map(async (options) => {
         try {
-          const cls = (await import(`ol/source/${options.is}.js`)).default;
-          return {
-            source: new cls(options),
+          const layerClassName = options.is === 'VectorTile' ? 'VectorTile' : 'WebGLTile';
+          const [{default: sourceCls}, {default: layerCls}] = await Promise.all([
+            import(`ol/source/${options.is}.js`),
+            import(`ol/layer/${layerClassName}.js`)
+          ]);
+          return new layerCls({
+            source: new sourceCls(options),
             title: options.title,
             base: true
-          };
+          });
         } catch (error) {
           console.error(`Failed to load basemap source for ${options.is}`, error);
           return null;
@@ -138,7 +152,6 @@ export default {
       });
       (await Promise.all(promises))
         .filter(options => Utils.isObject(options))
-        .map(options => new TileLayer(options))
         .forEach((layer, i) => {
           layer.setVisible(i === visibleLayer);
           this.map.addLayer(layer);
diff --git a/src/components/maps/MapSelect.vue b/src/components/maps/MapSelect.vue
index 6c378afb1..63be78903 100644
--- a/src/components/maps/MapSelect.vue
+++ b/src/components/maps/MapSelect.vue
@@ -18,9 +18,7 @@ import {shiftKeyOnly} from 'ol/events/condition.js';
 import ExtentInteraction from 'ol/interaction/Extent';
 import { containsXY } from 'ol/extent';
 import { transformExtent } from 'ol/proj';
-import { register } from 'ol/proj/proj4.js';
 import Style, { createDefaultStyle } from 'ol/style/Style';
-import proj4 from 'proj4';
 import VectorSource from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
 import Fill from 'ol/style/Fill';
@@ -29,8 +27,6 @@ import create from 'stac-js';
 import { toGeoJSON } from 'stac-js/src/geo.js';
 import mask from '@turf/mask';
 
-register(proj4); // required to support source reprojection
-
 export default {
   name: 'MapSelect',
   components: {

From 854065d04756ded3e2f6a5992264c0c780f9399f Mon Sep 17 00:00:00 2001
From: Luigi Pirelli <luipir@gmail.com>
Date: Mon, 17 Mar 2025 13:56:18 +0100
Subject: [PATCH 2/7] had to do this.map.updateSize(); to allow visualization
 of the basemap

---
 src/components/maps/MapSelect.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/maps/MapSelect.vue b/src/components/maps/MapSelect.vue
index 6c378afb1..f2e140c29 100644
--- a/src/components/maps/MapSelect.vue
+++ b/src/components/maps/MapSelect.vue
@@ -46,6 +46,10 @@ export default {
       type: Object,
       default: null
     },
+    value: {
+      type: Array,
+      default: null
+    },
     value: {
       type: Array,
       default: null
@@ -86,6 +90,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);
 
@@ -144,8 +151,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

From ef9f9b7553514347f26d1885ef0fa2670d8ca00f Mon Sep 17 00:00:00 2001
From: Luigi Pirelli <luipir@gmail.com>
Date: Mon, 17 Mar 2025 14:11:26 +0100
Subject: [PATCH 3/7] added some IT translated text

---
 src/locales/it/texts.json | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/locales/it/texts.json b/src/locales/it/texts.json
index 45fca7046..487e26e92 100644
--- a/src/locales/it/texts.json
+++ b/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",

From 7f6db83df927e6eb19301fb85ccd066093d505e9 Mon Sep 17 00:00:00 2001
From: Luigi Pirelli <luipir@gmail.com>
Date: Fri, 4 Apr 2025 12:38:34 +0200
Subject: [PATCH 4/7] add feature to setup defaultExtent for SpatialFilter

---
 src/components/SearchFilter.vue | 5 ++++-
 src/store/index.js              | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index 2ec09187d..af8d5c044 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -217,7 +217,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;
@@ -258,6 +258,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') },
diff --git a/src/store/index.js b/src/store/index.js
index 033c48fdd..4d9920ac9 100644
--- a/src/store/index.js
+++ b/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 = '';

From c9ff5226e378fbd9d9395db1b70e61424c706326 Mon Sep 17 00:00:00 2001
From: Luigi Pirelli <luipir@gmail.com>
Date: Wed, 12 Mar 2025 17:00:27 +0100
Subject: [PATCH 5/7] enable by default spatial query and fixed prop that can't
 be value

---
 src/components/SearchFilter.vue   | 8 ++++----
 src/components/maps/MapSelect.vue | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index af8d5c044..e448ff100 100644
--- a/src/components/SearchFilter.vue
+++ b/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">
@@ -153,7 +153,7 @@ function getDefaults() {
   return {
     sortOrder: 1,
     sortTerm: null,
-    provideBBox: false,
+    provideBBox: true,
     // Store previous bbox so that it survives when the map is temporarily hidden
     bbox: null,
     query: getQueryDefaults(),
@@ -295,7 +295,7 @@ export default {
       set(val) {
         this.query.datetime = Array.isArray(val) ? val.map(d => Utils.dateToUTC(d)) : null;
       }
-    }
+    },
   },
   watch: {
     parent: {
diff --git a/src/components/maps/MapSelect.vue b/src/components/maps/MapSelect.vue
index f2e140c29..0dad6b52e 100644
--- a/src/components/maps/MapSelect.vue
+++ b/src/components/maps/MapSelect.vue
@@ -46,7 +46,7 @@ export default {
       type: Object,
       default: null
     },
-    value: {
+    initExtent: {
       type: Array,
       default: null
     },
@@ -58,8 +58,8 @@ export default {
   data() {
     return {
       crs: 'EPSG:4326',
-      extent: this.value,
-      dragging: false
+      extent: this.initExtent,
+      dragging: true
     };
   },
   computed: {

From 851bd201708a422a33aec5e5e47c00174db50446 Mon Sep 17 00:00:00 2001
From: Luigi Pirelli <luipir@gmail.com>
Date: Fri, 4 Apr 2025 16:19:08 +0200
Subject: [PATCH 6/7] added conf parameter with example

---
 config.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/config.js b/config.js
index 93732d8c5..fe64ca82e 100644
--- a/config.js
+++ b/config.js
@@ -45,5 +45,7 @@ module.exports = {
     requestQueryParameters: {},
     socialSharing: ['email', 'bsky', 'mastodon', 'x'],
     preprocessSTAC: null,
-    authConfig: null
+    authConfig: null,
+    // defaultSearchExtent e.g. [12.227593034455793, 41.78656913683952, 12.652310726657447, 42.02970865107619]
+    defaultSearchExtent: null,
 };

From 1f14f963d0d8436fa3a28cf382ed5d7f125a2c21 Mon Sep 17 00:00:00 2001
From: Luigi Pirelli <luipir@gmail.com>
Date: Mon, 7 Apr 2025 07:35:54 +0200
Subject: [PATCH 7/7] set bbox only if shown getting from old query or default
 extent

---
 src/components/SearchFilter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index 5108ca043..56aa1f2ab 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -152,7 +152,7 @@ function getDefaults() {
   return {
     sortOrder: 1,
     sortTerm: null,
-    provideBBox: true,
+    provideBBox: false,
     // Store previous bbox so that it survives when the map is temporarily hidden
     bbox: null,
     query: getQueryDefaults(),
@@ -340,7 +340,7 @@ export default {
         this.query.bbox = null;
       }
       else {
-        this.query.bbox = this.bbox;
+        this.query.bbox = this.bbox? this.bbox : this.defaultExtent;
       }
     }
   },