Merge branch 'staging' of github.com:eurodatacube/eodash into CropOM-Story

Author: santilland

Diff for: app/src/components/OLExportButton.vue

@@ -46,7 +46,7 @@
         <div>
           Copy and paste this code into the map <b>layers</b> field of the storytelling editor:
         </div>
-        <div
+        <div v-if="dialog"
           class="pa-3"
           style="background-color: #ddd;font-family: monospace;font-size: 11px;max-height: 300px; overflow-y: auto;">
             {{ layersConfig }}
@@ -283,7 +283,7 @@ Text describing the current step of the tour and why it is interesting what the
             if (foundType === 'Vector') {
               // We can't export a function style function
               // only flat styles, for now we ignore this case
-              if (typeof l.getStyle !== 'function') {
+              if (typeof l.getStyle() !== 'function') {
                 layerConfig.style = l.getStyle();
               }
             }

Diff for: 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);

Diff for: 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);