Feat: Implementation of COG source change and minor style fix (#2721)

* feat: implemented change of cog source based on time information

* fix: spinner style

Author: santilland

app/src/components/map/MapOverlay.vue

@@ -83,6 +83,43 @@ export default {
       border-bottom: 0;
       margin-left: -10px;
       margin-bottom: -10px;
+    }
+      .loading-indicator {
+      top: unset;
+      bottom: 0.5em !important;
+      left: 0.5em !important;
+      height: 22px;
+      pointer-events: none !important;
+    }
+
+    .loading-indicator.hidden {
+      display: none;
+    }
+
+    @keyframes spinner {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .spinner:after {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 18px;
+      height: 18px;
+      margin-top: -9px;
+      margin-left: -9px;
+      border-radius: 50%;
+      border: 5px solid rgba(180, 180, 180, 0.6);
+      border-top-color: rgba(0, 0, 0, 0.6);
+      animation: spinner 0.6s linear infinite;
+    }
+    .theme--dark .spinner:after {
+      border: 5px solid rgba(180, 180, 180, 0.6);
+      border-top-color: rgba(255, 255, 255, 0.6);
     }`;
     if ('mapContainer' in this.$parent.$refs && this.$parent.$refs.mapContainer.shadowRoot) {
       this.$parent.$refs.mapContainer.shadowRoot.appendChild(style);

app/src/components/map/timeLayerUtils.js

@@ -11,7 +11,7 @@ import GeoTIFF from 'ol/source/GeoTIFF';
 
 // eslint-disable-next-line import/prefer-default-export
 export function updateTimeLayer(layer, config, time, drawnArea, sourceGet = 'updateTime') {
-  if (config.protocol === 'cog' && !config.features) {
+  if (config.protocol === 'cog' && 'sources' in config && !config.features) {
     const updatedSources = config.sources.map((item) => {
       const url = item.url.replace(/{time}/i, config.dateFormatFunction(time));
       return { url };
@@ -21,6 +21,13 @@ export function updateTimeLayer(layer, config, time, drawnArea, sourceGet = 'upd
       normalize: config.normalize ? config.normalize : false,
       interpolate: false,
     }));
+  } else if (Array.isArray(time)) {
+    // This case if for geotiff assets passed in the time
+    layer.setSource(new GeoTIFF({
+      sources: time[1].map((url) => ({ url })),
+      normalize: config.normalize ? config.normalize : false,
+      interpolate: false,
+    }));
   } else {
     const source = layer.getSource();
     const updateTimeFunction = source.get(sourceGet);