Issue 200 Update s2 cloudless basemap to correspond with the 'year' in the time tab (#225)

* setup layer switching on year change but need to finalize the layer appearing

* layer changes based on year selection

* Restrict years to the available years

---------

Co-authored-by: Zachery Thomas Richardet <zachery@Mac.lan>
Co-authored-by: Matthias Mohr <webmaster@mamo-net.de>

Author: 3 people

src/components/MapComponent.vue

@@ -6,7 +6,6 @@ import ProcessingResults from './ProcessingResults.vue'
 import PropertiesDisplay from './PropertiesDisplay.vue'
 import createLabelLayer from '../layers/Label-Layer'
 import createS2GridLayer from '../layers/S2-Grid-Layer'
-import createCloudlessLayer from '../layers/S2-Cloudless-Layer'
 import { generateJWT } from '../functions/generate-jwt'
 import useAreaOfInterest from '../composables/useAreaOfInterest'
 import usePermalink from '../composables/usePermalink'
@@ -22,6 +21,7 @@ const {
   originalClickPosition,
   hidePropertiesBox,
   geoJsonResults,
+  initCloudlessLayer,
 } = useMap()
 
 const { addMapClickHandler } = useAreaOfInterest()
@@ -39,7 +39,7 @@ const critical = ref<string | null>(null)
 onMounted(async () => {
   map.value = new Map({
     target: 'map',
-    layers: [createCloudlessLayer(), createLabelLayer()],
+    layers: [createLabelLayer()],
     view: new View({
       center: [0, 0],
       zoom: 2,
@@ -80,10 +80,12 @@ onMounted(async () => {
 
   // Add S2 Grid layer after map is initialized
   if (map.value) {
+    // Initialize the cloudless base layer
+    initCloudlessLayer()
+
     const s2GridLayer = createS2GridLayer()
     addMapClickHandler(map.value as Map, areaValues.value)
     map.value.addLayer(s2GridLayer)
-
     // Setup permalink functionality
     setupPermalink(map)
   }

src/composables/useMap.ts

@@ -2,11 +2,15 @@ import { ref, shallowRef, watch } from 'vue'
 import type Map from 'ol/Map'
 import VectorSource from 'ol/source/Vector'
 import VectorLayer from 'ol/layer/Vector'
+import TileLayer from 'ol/layer/Tile'
+import type XYZ from 'ol/source/XYZ'
 import GeoJSON from 'ol/format/GeoJSON'
 import { transformExtent } from 'ol/proj'
 import type { Extent } from 'ol/extent'
 import { type FeatureCollection } from 'geojson'
 import useNotifier from './useNotifier'
+import useSettings from './useSettings'
+import createCloudlessLayer from '../layers/S2-Cloudless-Layer'
 import { Fill, Stroke, Style } from 'ol/style'
 import { type FeatureLike } from 'ol/Feature'
 
@@ -35,6 +39,38 @@ const showPropertiesBox = ref(false)
 
 const geoJsonResults = shallowRef<any[]>([])
 
+// Cloudless layer management
+const cloudlessLayer = shallowRef<TileLayer<XYZ> | null>(null)
+const { settings } = useSettings()
+
+// Watch for year changes and update the cloudless layer
+watch(
+  () => settings.value.year,
+  (newYear) => {
+    if (!map.value) {
+      return
+    }
+
+    // Remove the old cloudless layer if it exists
+    if (cloudlessLayer.value) {
+      map.value.removeLayer(cloudlessLayer.value)
+    }
+
+    // Create and add the new cloudless layer with the updated year
+    cloudlessLayer.value = createCloudlessLayer(newYear)
+    // Insert at index 0 to keep it as the base layer
+    map.value.getLayers().insertAt(0, cloudlessLayer.value)
+  },
+)
+
+const initCloudlessLayer = () => {
+  if (!map.value) {
+    return
+  }
+  cloudlessLayer.value = createCloudlessLayer(settings.value.year)
+  map.value.getLayers().insertAt(0, cloudlessLayer.value)
+}
+
 const featureStyle = new Style({
   fill: new Fill({
     color: 'rgba(255, 255, 0, 0.1)',
@@ -221,5 +257,6 @@ export default function useMap() {
     fitMapToBbox,
     displayGeoJSON,
     geoJsonResults,
+    initCloudlessLayer,
   }
 }

src/layers/S2-Cloudless-Layer.ts

@@ -1,10 +1,15 @@
 import TileLayer from 'ol/layer/Tile'
 import { XYZ } from 'ol/source'
 
-export default function createCloudlessLayer() {
+export default function createCloudlessLayer(year: number) {
+  if (year < 2016) {
+    year = 2016
+  } else if (year > 2024) {
+    year = 2024
+  }
   return new TileLayer({
     source: new XYZ({
-      url: 'https://tiles.maps.eox.at/wmts?layer=s2cloudless-2024_3857&style=default&tilematrixset=GoogleMapsCompatible&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix={z}&TileCol={x}&TileRow={y}',
+      url: `https://tiles.maps.eox.at/wmts?layer=s2cloudless${year === 2016 ? '' : '-' + year}_3857&style=default&tilematrixset=GoogleMapsCompatible&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix={z}&TileCol={x}&TileRow={y}`,
       maxZoom: 18,
       tileSize: 256,
       crossOrigin: 'anonymous',