From 3fdf0b1e6147457d61d78d92978c8582a71d0a22 Mon Sep 17 00:00:00 2001
From: Lubomir Dolezal <lubojr@seznam.cz>
Date: Mon, 13 May 2024 17:03:30 +0200
Subject: [PATCH 1/7] fix: order of async fetched dataInfo

---
 app/src/components/StacInfo.vue | 45 ++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/src/components/StacInfo.vue b/app/src/components/StacInfo.vue
index c7ed2fcac9..70c9d2fac3 100644
--- a/app/src/components/StacInfo.vue
+++ b/app/src/components/StacInfo.vue
@@ -151,6 +151,7 @@
     <v-expansion-panels
     style="justify-content: left;"
     v-if="appConfig.id === 'gtif' && additionalGTIFDataInfos.length > 0"
+    :key="refreshKey"
     >
     <h4>
       Dataset metadata
@@ -191,6 +192,7 @@ export default {
     stacInfoLoaded: null,
     themesInStacInfo: [],
     linksInStacInfo: [],
+    refreshKey: 0,
   }),
   computed: {
     ...mapState('config', [
@@ -259,28 +261,31 @@ export default {
         this.stacInfoLoaded = true;
       });
     },
-    getAdditionalGTIFDataInfos() {
-      this.additionalGtifDataInfoContent = [];
-      for (let i = 0; i < this.additionalGTIFDataInfos.length; i++) {
-        try {
-          const markdownUrl = `//raw.githubusercontent.com/eurodatacube/eodash-assets/main/collections/gtif-datainfo/${this.additionalGTIFDataInfos[i].dataInfo}.md`;
-          fetch(markdownUrl)
-            .then((response) => {
-              if (!response.ok) {
-                console.error('Fetching DataInfo failed');
-              }
-              return response.text();
-            })
-            .then((text) => {
-              const markdown = { default: text };
-              this.additionalGtifDataInfoContent.push(this.$marked(markdown.default));
-            });
-        } catch {
-          // just an empty catch to "fill in empty content"
-          this.additionalGtifDataInfoContent.push('');
-        }
+    async fetchDataInfo(dataInfoObject, i) {
+      try {
+        const markdownUrl = `//raw.githubusercontent.com/eurodatacube/eodash-assets/main/collections/gtif-datainfo/${dataInfoObject.dataInfo}.md`;
+        await fetch(markdownUrl)
+          .then((response) => {
+            if (!response.ok) {
+              console.error('Fetching DataInfo failed');
+            }
+            return response.text();
+          })
+          .then((text) => {
+            const markdown = { default: text };
+            this.additionalGtifDataInfoContent[i] = this.$marked(markdown.default);
+          });
+      } catch {
+        // just an empty catch
       }
     },
+    getAdditionalGTIFDataInfos() {
+      this.additionalGtifDataInfoContent = Array(this.additionalGTIFDataInfos.length).fill('');
+      Promise.all(this.additionalGTIFDataInfos.map((item, i) => this.fetchDataInfo(item, i)))
+        .then(() => {
+          this.refreshKey = Math.random();
+        });
+    },
   },
 };
 </script>

From 703837faec4d4a9d089bbcec8a677c2509ab4833 Mon Sep 17 00:00:00 2001
From: Daniel Santillan <daniel.santillan@eox.at>
Date: Fri, 24 May 2024 09:44:31 +0200
Subject: [PATCH 2/7] Integration of eox-map for the map widget (#2573)

* feat: initial eox-map swapping of ol

* chore: trying out exporting map config state in iframe text

* chore working on getting xyz layers working

* chore: changed update function

* fix: time update for XYZ layers

* chore: fix

* feat: implemented config export feature for map

* feat: added different export types for eox-map story blocks

* chore: upgrading story and jsonform packages, using new markdown placeholder for story editor

* chore: removed storytelling example

* chore: adding unique identifiers to data layers

* feat: exporting only layers without group as it has issues with eox-map, also simplifies code block; updated eox-map version

* chore: adding export of opacity in config when it is not set to 1

* chore: removing log message

---------

Co-authored-by: Lubomir Dolezal <lubojr@seznam.cz>
---
 app/package-lock.json                 | 258 ++++++++++++++++--
 app/package.json                      |   6 +-
 app/src/components/OLExportButton.vue | 237 +++++++++++++++++
 app/src/components/map/Map.vue        | 359 ++++++++++++++------------
 app/src/components/map/layers.js      |  48 ++--
 app/src/config/polar.js               |   4 +-
 app/src/config/stories.json           |   7 -
 app/src/config/trilateral.js          |   3 -
 app/src/utils.js                      |   4 +-
 app/src/views/StoryEditor.vue         |   6 +-
 10 files changed, 693 insertions(+), 239 deletions(-)
 create mode 100644 app/src/components/OLExportButton.vue

diff --git a/app/package-lock.json b/app/package-lock.json
index 3857e0564f..9478a726ea 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -10,11 +10,11 @@
       "dependencies": {
         "@chenfengyuan/vue-countdown": "^1.1.5",
         "@eox/itemfilter": "0.14.0",
-        "@eox/jsonform": "^0.6.1",
+        "@eox/jsonform": "^0.7.0",
         "@eox/layercontrol": "^0.17.3",
-        "@eox/map": "^1.6.1",
+        "@eox/map": "^1.8.2",
         "@eox/stacinfo": "^0.3.3",
-        "@eox/storytelling": "^0.5.0",
+        "@eox/storytelling": "^1.0.2",
         "@turf/difference": "^6.5.0",
         "axios": "^0.21.1",
         "chart.js": "2.9.3",
@@ -1994,11 +1994,12 @@
       }
     },
     "node_modules/@eox/jsonform": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/@eox/jsonform/-/jsonform-0.6.1.tgz",
-      "integrity": "sha512-pBCm0wKCaou+XyArvo07alVqcKr4yhXM4KP3+S9yzimXIs55NJN3N5w3PZLuzf1/JuF8RSovCjk4bu0W2gMAzQ==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@eox/jsonform/-/jsonform-0.7.0.tgz",
+      "integrity": "sha512-tGDAtuBGn9Fxfr7rlP/Hmi7UPqU6mE6GzYUM7UVFQquSzmI8KQL5EHzb+sRSGfH+vuxqTDo6vUQD+j/aU75hsw==",
       "dependencies": {
         "@json-editor/json-editor": "^2.11.0",
+        "easymde": "^2.18.0",
         "toolcool-range-slider": "^4.0.28"
       },
       "engines": {
@@ -2022,9 +2023,9 @@
       }
     },
     "node_modules/@eox/map": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@eox/map/-/map-1.6.1.tgz",
-      "integrity": "sha512-ynPBR9zqGOh1tnyuKXoy2ECnvRzO6py8cjB/GGCGzdKL4T9krsFlIUBTPK/sRGwO2tOhl0NBthK00gG/CPLPyg==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@eox/map/-/map-1.8.2.tgz",
+      "integrity": "sha512-9ofpFXTSAXTfTT1sJz1gd2a2Oz64NeoXsZMwld/s90Umh7x10lL5lVKybT8eyJj2ID6qw5voU3QcBww/RxUA/A==",
       "dependencies": {
         "lit": "^3.0.2",
         "ol": "^9.0.0",
@@ -2050,13 +2051,14 @@
       }
     },
     "node_modules/@eox/storytelling": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@eox/storytelling/-/storytelling-0.5.0.tgz",
-      "integrity": "sha512-SwayHqiHviklP/qqs3BQCL3uzywmtmIS1uNR3+z27QNr8oDAuGl8r/1eaI5qlBXTS/2FqvHhGblYOU7BSn0QaA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@eox/storytelling/-/storytelling-1.0.2.tgz",
+      "integrity": "sha512-61DMpjsPSFQUrEGY9NRmFEkRo0vXoL9ExdonYHuUOqHwAHTFYvN0Lpc0cXukJ/0Yino11ymuxwljklfvr5v3LA==",
       "dependencies": {
         "@sindresorhus/slugify": "^2.2.1",
         "glightbox": "^3.3.0",
         "isomorphic-dompurify": "^2.4.0",
+        "joi": "^17.12.3",
         "js-yaml": "^4.1.0",
         "lit": "^3.0.2",
         "markdown-it": "^14.0.0"
@@ -2497,6 +2499,29 @@
         }
       }
     },
+    "node_modules/@sideway/address": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
+      "integrity": "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==",
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "node_modules/@sideway/address/node_modules/@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+    },
+    "node_modules/@sideway/formula": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
+    },
+    "node_modules/@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+    },
     "node_modules/@sindresorhus/slugify": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-2.2.1.tgz",
@@ -2824,6 +2849,14 @@
         "moment": "^2.10.2"
       }
     },
+    "node_modules/@types/codemirror": {
+      "version": "5.60.15",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.15.tgz",
+      "integrity": "sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==",
+      "dependencies": {
+        "@types/tern": "*"
+      }
+    },
     "node_modules/@types/connect": {
       "version": "3.4.36",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz",
@@ -2851,6 +2884,11 @@
         "@types/trusted-types": "*"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+    },
     "node_modules/@types/express": {
       "version": "4.17.17",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
@@ -2917,6 +2955,11 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/marked": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.2.tgz",
+      "integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w=="
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -3010,6 +3053,14 @@
       "integrity": "sha512-fOHIwZua0sRltqWzODGUM6b4ffZrf/vzGUmNXdR+4DzuJP42PMbM5dLKcdzlYvv8bMJ3GALOzkk1q7cDm2zPyA==",
       "dev": true
     },
+    "node_modules/@types/tern": {
+      "version": "0.23.9",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.9.tgz",
+      "integrity": "sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -6717,6 +6768,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/codemirror": {
+      "version": "5.65.16",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.16.tgz",
+      "integrity": "sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg=="
+    },
+    "node_modules/codemirror-spell-checker": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
+      "integrity": "sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==",
+      "dependencies": {
+        "typo-js": "*"
+      }
+    },
     "node_modules/collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -8964,6 +9028,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/easymde": {
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.18.0.tgz",
+      "integrity": "sha512-IxVVUxNWIoXLeqtBU4BLc+eS/ScYhT1Dcb6yF5Wchoj1iXAV+TIIDWx+NCaZhY7RcSHqDPKllbYq7nwGKILnoA==",
+      "dependencies": {
+        "@types/codemirror": "^5.60.4",
+        "@types/marked": "^4.0.7",
+        "codemirror": "^5.63.1",
+        "codemirror-spell-checker": "1.1.2",
+        "marked": "^4.1.0"
+      }
+    },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -12708,6 +12784,31 @@
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
       "dev": true
     },
+    "node_modules/joi": {
+      "version": "17.13.1",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
+      "integrity": "sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==",
+      "dependencies": {
+        "@hapi/hoek": "^9.3.0",
+        "@hapi/topo": "^5.1.0",
+        "@sideway/address": "^4.1.5",
+        "@sideway/formula": "^3.0.1",
+        "@sideway/pinpoint": "^2.0.0"
+      }
+    },
+    "node_modules/joi/node_modules/@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+    },
+    "node_modules/joi/node_modules/@hapi/topo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
+      "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
     "node_modules/jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
@@ -19434,6 +19535,11 @@
       "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
       "dev": true
     },
+    "node_modules/typo-js": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.4.tgz",
+      "integrity": "sha512-Oy/k+tFle5NAA3J/yrrYGfvEnPVrDZ8s8/WCwjUE75k331QyKIsFss7byQ/PzBmXLY6h1moRnZbnaxWBe3I3CA=="
+    },
     "node_modules/uc.micro": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
@@ -23276,11 +23382,12 @@
       }
     },
     "@eox/jsonform": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/@eox/jsonform/-/jsonform-0.6.1.tgz",
-      "integrity": "sha512-pBCm0wKCaou+XyArvo07alVqcKr4yhXM4KP3+S9yzimXIs55NJN3N5w3PZLuzf1/JuF8RSovCjk4bu0W2gMAzQ==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@eox/jsonform/-/jsonform-0.7.0.tgz",
+      "integrity": "sha512-tGDAtuBGn9Fxfr7rlP/Hmi7UPqU6mE6GzYUM7UVFQquSzmI8KQL5EHzb+sRSGfH+vuxqTDo6vUQD+j/aU75hsw==",
       "requires": {
         "@json-editor/json-editor": "^2.11.0",
+        "easymde": "^2.18.0",
         "toolcool-range-slider": "^4.0.28"
       }
     },
@@ -23296,9 +23403,9 @@
       }
     },
     "@eox/map": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@eox/map/-/map-1.6.1.tgz",
-      "integrity": "sha512-ynPBR9zqGOh1tnyuKXoy2ECnvRzO6py8cjB/GGCGzdKL4T9krsFlIUBTPK/sRGwO2tOhl0NBthK00gG/CPLPyg==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@eox/map/-/map-1.8.2.tgz",
+      "integrity": "sha512-9ofpFXTSAXTfTT1sJz1gd2a2Oz64NeoXsZMwld/s90Umh7x10lL5lVKybT8eyJj2ID6qw5voU3QcBww/RxUA/A==",
       "requires": {
         "lit": "^3.0.2",
         "ol": "^9.0.0",
@@ -23316,13 +23423,14 @@
       }
     },
     "@eox/storytelling": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@eox/storytelling/-/storytelling-0.5.0.tgz",
-      "integrity": "sha512-SwayHqiHviklP/qqs3BQCL3uzywmtmIS1uNR3+z27QNr8oDAuGl8r/1eaI5qlBXTS/2FqvHhGblYOU7BSn0QaA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@eox/storytelling/-/storytelling-1.0.2.tgz",
+      "integrity": "sha512-61DMpjsPSFQUrEGY9NRmFEkRo0vXoL9ExdonYHuUOqHwAHTFYvN0Lpc0cXukJ/0Yino11ymuxwljklfvr5v3LA==",
       "requires": {
         "@sindresorhus/slugify": "^2.2.1",
         "glightbox": "^3.3.0",
         "isomorphic-dompurify": "^2.4.0",
+        "joi": "^17.12.3",
         "js-yaml": "^4.1.0",
         "lit": "^3.0.2",
         "markdown-it": "^14.0.0"
@@ -23670,6 +23778,31 @@
         "any-observable": "^0.3.0"
       }
     },
+    "@sideway/address": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
+      "integrity": "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==",
+      "requires": {
+        "@hapi/hoek": "^9.0.0"
+      },
+      "dependencies": {
+        "@hapi/hoek": {
+          "version": "9.3.0",
+          "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+          "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+        }
+      }
+    },
+    "@sideway/formula": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
+    },
+    "@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+    },
     "@sindresorhus/slugify": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-2.2.1.tgz",
@@ -23916,6 +24049,14 @@
         "moment": "^2.10.2"
       }
     },
+    "@types/codemirror": {
+      "version": "5.60.15",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.15.tgz",
+      "integrity": "sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==",
+      "requires": {
+        "@types/tern": "*"
+      }
+    },
     "@types/connect": {
       "version": "3.4.36",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz",
@@ -23943,6 +24084,11 @@
         "@types/trusted-types": "*"
       }
     },
+    "@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+    },
     "@types/express": {
       "version": "4.17.17",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
@@ -24009,6 +24155,11 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "@types/marked": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.2.tgz",
+      "integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w=="
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -24102,6 +24253,14 @@
       "integrity": "sha512-fOHIwZua0sRltqWzODGUM6b4ffZrf/vzGUmNXdR+4DzuJP42PMbM5dLKcdzlYvv8bMJ3GALOzkk1q7cDm2zPyA==",
       "dev": true
     },
+    "@types/tern": {
+      "version": "0.23.9",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.9.tgz",
+      "integrity": "sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==",
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
     "@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -27089,6 +27248,19 @@
       "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
       "dev": true
     },
+    "codemirror": {
+      "version": "5.65.16",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.16.tgz",
+      "integrity": "sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg=="
+    },
+    "codemirror-spell-checker": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
+      "integrity": "sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==",
+      "requires": {
+        "typo-js": "*"
+      }
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -28859,6 +29031,18 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "easymde": {
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.18.0.tgz",
+      "integrity": "sha512-IxVVUxNWIoXLeqtBU4BLc+eS/ScYhT1Dcb6yF5Wchoj1iXAV+TIIDWx+NCaZhY7RcSHqDPKllbYq7nwGKILnoA==",
+      "requires": {
+        "@types/codemirror": "^5.60.4",
+        "@types/marked": "^4.0.7",
+        "codemirror": "^5.63.1",
+        "codemirror-spell-checker": "1.1.2",
+        "marked": "^4.1.0"
+      }
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -31748,6 +31932,33 @@
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
       "dev": true
     },
+    "joi": {
+      "version": "17.13.1",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
+      "integrity": "sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==",
+      "requires": {
+        "@hapi/hoek": "^9.3.0",
+        "@hapi/topo": "^5.1.0",
+        "@sideway/address": "^4.1.5",
+        "@sideway/formula": "^3.0.1",
+        "@sideway/pinpoint": "^2.0.0"
+      },
+      "dependencies": {
+        "@hapi/hoek": {
+          "version": "9.3.0",
+          "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+          "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+        },
+        "@hapi/topo": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
+          "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+          "requires": {
+            "@hapi/hoek": "^9.0.0"
+          }
+        }
+      }
+    },
     "jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
@@ -37134,6 +37345,11 @@
       "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
       "dev": true
     },
+    "typo-js": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.4.tgz",
+      "integrity": "sha512-Oy/k+tFle5NAA3J/yrrYGfvEnPVrDZ8s8/WCwjUE75k331QyKIsFss7byQ/PzBmXLY6h1moRnZbnaxWBe3I3CA=="
+    },
     "uc.micro": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
diff --git a/app/package.json b/app/package.json
index 21985ab3d3..ff9f7959e8 100644
--- a/app/package.json
+++ b/app/package.json
@@ -17,11 +17,11 @@
   "dependencies": {
     "@chenfengyuan/vue-countdown": "^1.1.5",
     "@eox/itemfilter": "0.14.0",
-    "@eox/jsonform": "^0.6.1",
+    "@eox/jsonform": "^0.7.0",
     "@eox/layercontrol": "^0.17.3",
     "@eox/stacinfo": "^0.3.3",
-    "@eox/map": "^1.6.1",
-    "@eox/storytelling": "^0.5.0",
+    "@eox/map": "^1.8.2",
+    "@eox/storytelling": "^1.0.2",
     "@turf/difference": "^6.5.0",
     "axios": "^0.21.1",
     "chart.js": "2.9.3",
diff --git a/app/src/components/OLExportButton.vue b/app/src/components/OLExportButton.vue
new file mode 100644
index 0000000000..96c3866eb9
--- /dev/null
+++ b/app/src/components/OLExportButton.vue
@@ -0,0 +1,237 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="500"
+  >
+    <template v-slot:activator="{}">
+      <template v-if="mapControl">
+        <v-tooltip left>
+          <template v-slot:activator="{ on: tooltip }">
+            <v-btn
+              :color="$vuetify.theme.currentTheme.background"
+              small
+              class="dashboard-button"
+              style="min-width: 0;"
+              v-on="{ ...tooltip, ...dialog }"
+              @click="dialog = true"
+            >
+              <v-icon>
+                mdi-map-plus
+              </v-icon>
+            </v-btn>
+          </template>
+          <span>Embed this map into a story</span>
+        </v-tooltip>
+      </template>
+      <v-btn
+        v-else
+        color="primary"
+        text
+        small
+        @click="dialog = true"
+      >
+        <template>
+          <v-icon left>mdi-map-plus</v-icon>
+          embed chart
+        </template>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title class="headline primary white--text">
+        Storytelling map configuration
+      </v-card-title>
+
+      <v-card-text class="py-5">
+        <div>
+          Copy and paste this code into the map layers field of the storytelling editor:
+        </div>
+        <div
+          class="pa-3"
+          style="background-color: #ddd;font-family: monospace;font-size: 11px;">
+            {{ layersConfig }}
+        </div>
+        <div style="position: absolute; bottom: 15px;">
+          <v-expand-transition>
+            <div v-if="copySuccess" class="success--text mr-3">
+            <v-icon
+              color="success"
+              left
+            >mdi-clipboard-check-outline</v-icon>
+              <small>copied!</small>
+            </div>
+          </v-expand-transition>
+        </div>
+        <div class="d-flex align-center justify-end pt-3">
+          <v-btn
+            small
+            text
+            @click="copy(layersConfig)"
+          >
+            <v-icon left>mdi-content-copy</v-icon>
+            copy as layers config
+          </v-btn>
+        </div>
+        <div class="d-flex align-center justify-end pt-3">
+          <v-btn
+            small
+            text
+            @click="copy(mapEntryCode)"
+          >
+            <v-icon left>mdi-content-copy</v-icon>
+            copy as simple map
+          </v-btn>
+        </div>
+        <div class="d-flex align-center justify-end pt-3">
+          <v-btn
+            small
+            text
+            @click="copy(mapStepCode)"
+          >
+            <v-icon left>mdi-content-copy</v-icon>
+            copy as map tour section
+          </v-btn>
+        </div>
+      </v-card-text>
+
+      <v-divider></v-divider>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          color="primary"
+          text
+          @click="dialog = false"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import dialogMixin from '@/mixins/dialogMixin';
+import {
+  mapState,
+} from 'vuex';
+import { getUid } from 'ol/util';
+import { toLonLat } from 'ol/proj';
+
+export default {
+  mixins: [dialogMixin],
+  props: {
+    indicatorObject: Object,
+    featureObject: Object,
+    mapControl: Boolean,
+    center: Object,
+    zoom: Number,
+  },
+  data: () => ({
+    dialog: false,
+    copySuccess: false,
+  }),
+  computed: {
+    ...mapState('config', [
+      'appConfig',
+    ]),
+    layersConfig() {
+      const layerConfig = this.extractLayerConfig(
+        this.$parent.$refs.mapContainer.map.getLayers().getArray(),
+      );
+      // remove internal layer group
+      layerConfig.splice(-1);
+      // reverse to use same order as eox-map config
+      layerConfig.reverse();
+      return JSON.stringify(layerConfig.flat());
+    },
+    mapStepCode() {
+      const mapView = this.$parent.$refs.mapContainer.map.getView();
+      const origCoords = mapView.get('center');
+      const lonlat = toLonLat(origCoords, mapView.getProjection());
+      const preTag = '### <!--{ layers=';
+      const endTag = `zoom="${mapView.get('zoom')}" center=[${[lonlat]}] animationOptions={duration:500}}-->
+#### Tour step title
+Text describing the current step of the tour and why it is interesting what the map shows currently
+`;
+      return `${preTag}'${this.layersConfig}' ${endTag}`;
+    },
+    mapEntryCode() {
+      const mapView = this.$parent.$refs.mapContainer.map.getView();
+      const origCoords = mapView.get('center');
+      const lonlat = toLonLat(origCoords, mapView.getProjection());
+      const preTag = '## Map Example <!--{as="eox-map" style="width: 100%; height: 500px;" layers=';
+      const endTag = `zoom="${mapView.get('zoom')}" center=[${[lonlat]}] }-->`;
+      return `${preTag}'${this.layersConfig}' ${endTag}`;
+    },
+  },
+  methods: {
+    extractLayerConfig(layerArray) {
+      // Extract completely flat layers array without groups
+      const layers = [];
+      layerArray.map((l) => {
+        if (l.constructor.name.includes('Group')) {
+          layers.push(this.extractLayerConfig(l.getLayersArray()));
+        } else if (l.constructor.name.includes('STACLayer')) {
+          layers.push(l.get('_jsonDefinition'));
+        } else {
+          const layerConfig = {
+            type: l.constructor.name.replace('Layer', ''),
+            properties: {
+              id: l.get('configId') ? l.get('configId') : getUid(l),
+            },
+          };
+          // Evaluate what other information we need to extract for different source types
+          const olsource = l.getSource();
+          // only export visible layers
+          if (olsource && l.isVisible()) {
+            // Extract source config
+            const source = {
+              type: l.getSource().constructor.name.replace('Source', ''),
+            };
+            if (['XYZ', 'TileWMS', 'WMS'].includes(olsource.constructor.name)) {
+              if ('url' in olsource) {
+                source.url = olsource.url;
+              } else if ('urls' in olsource) {
+                source.urls = olsource.urls;
+              }
+            } else if (olsource.constructor.name === 'VectorSource') {
+              source.url = olsource.getUrl();
+              source.format = olsource.getFormat()?.constructor.name;
+            }
+            // Extract possible other configuration options
+            if (['TileWMS', 'WMS'].includes(olsource.constructor.name)) {
+              source.params = olsource.getParams();
+              source.serverType = olsource.serverType_;
+            }
+            if (olsource.constructor.name === 'VectorSource') {
+              // TODO: the getStyle function does not return the applied style as described in OL docs
+              layerConfig.style = ''; // l.getStyle();
+            }
+            if (l.getOpacity() !== 1) {
+              layerConfig.opacity = l.getOpacity();
+            }
+            layerConfig.source = source;
+            layers.push(layerConfig);
+          }
+        }
+        return true;
+      });
+      return layers;
+    },
+    async copy(s) {
+      await navigator.clipboard.writeText(s);
+      this.copySuccess = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+  .dashboard-button {
+    width: 36px;
+    height: 36px !important;
+    z-index: 2;
+    pointer-events: initial;
+  }
+</style>
diff --git a/app/src/components/map/Map.vue b/app/src/components/map/Map.vue
index 13c92d451f..fefb16bdf6 100644
--- a/app/src/components/map/Map.vue
+++ b/app/src/components/map/Map.vue
@@ -1,188 +1,209 @@
 <template>
-  <div ref="mapContainer" style="height: 100%; width: 100%; background: #cad2d3;
-    z-index: 1" class="d-flex justify-center" :id="mapId">
-    <!-- a layer adding a (potential) dark overlay, z-index 4 -->
-    <DarkOverlayLayer
-      :mapId="mapId"
-      :configs="darkOverlayLayers"
-      v-if="darkOverlayLayers.length > 0"
-    />
-    <!-- a layer adding a (potential) subaoi, z-index 5 -->
-    <SubaoiLayer
-      :mapId="mapId"
-      :indicator="indicator"
-      :mergedConfigsData="mergedConfigsData[0]"
-      :isGlobal="!featureObject"
-      v-if="dataLayerName"
-      :key="dataLayerKey + '_subAoi'"
-    />
-    <!-- a layer displaying a selected global poi
-     these layers will have z-Index 3 -->
-    <SpecialLayer
-      v-if="showSpecialLayer"
-      :mapId="mapId"
-      :mergedConfigs="mergedConfigsData"
-      :options="specialLayerOptions"
-      :key="dataLayerKey  + '_specialLayer'"
-      :swipePixelX="swipePixelX"
-      :resetProjectionOnDestroy='true'
-      @updatecenter="handleSpecialLayerCenter"
-      @updatezoom="handleSpecialLayerZoom"
-      @setMapTime="(time) => dataLayerTime = {value: time}"
-      @setTimeArray="handleSetTimeArray"
-    />
-    <!-- additional special layer showing frozen indicator-->
-    <SpecialLayer
-      v-if="showFrozenLayer"
-      :mapId="mapId"
-      :mergedConfigs="mergedConfigsFrozenData"
-      :options="frozenLayerOptions"
-      :key="frozenLayerName + '_specialLayer'"
-    />
-    <div
-      class="d-flex justify-center fill-height"
-      style="position: absolute; bottom: 0; left: 0;
-      transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      width: 100%"
-    >
-      <LayerSwipe
-        v-if="compareLayerTime"
+  <div ref="totalContainer" style="height: 100%; width: 100%;">
+    <eox-map ref="mapContainer" style="height: 100%; width: 100%; background: #cad2d3; z-index: 1" class="d-flex justify-center" :id="mapId">
+    </eox-map>
+    <div ref="toolContainer" style="height: 100%; width: 100%;" class="d-flex justify-center">
+      <!-- a layer adding a (potential) dark overlay, z-index 4 -->
+      <DarkOverlayLayer
         :mapId="mapId"
-        :time="compareLayerTime.value"
-        :mergedConfigsData="mergedConfigsLayerSwipe"
-        :specialLayerOptionProps="specialLayerOptions"
-        :enable="enableCompare"
-        :drawnArea="drawnArea"
-        @updateSwipePosition="updateSwipePosition"
-        :key="dataLayerName + '_layerSwipe'"
+        :configs="darkOverlayLayers"
+        v-if="darkOverlayLayers.length > 0"
       />
-      <indicator-time-selection
-        ref="timeSelection"
-        v-if="displayTimeSelection && !enableScrollyMode
-          && ($vuetify.breakpoint.xsOnly ? mobileTimeselectionToggle : true)"
-        :autofocus="!disableAutoFocus && !isInIframe"
-        :available-values="availableTimeEntries"
-        :indicator="mergedConfigsData[0]"
-        :compare-active.sync="enableCompare"
-        :compare-time.sync="compareLayerTime"
-        :original-time.sync="dataLayerTime"
-        :enable-compare="mergedConfigsData[0] && !mergedConfigsData[0].disableCompare"
-        :large-time-duration="indicator.largeTimeDuration"
-        :key="dataLayerName + '_timeSelection'"
-        @focusSelect="focusSelect"
-        :style="calculatePosition"
-      />
-    </div>
-    <!-- an overlay for showing information when hovering over clusters -->
-    <MapOverlay
-      :mapId="mapId"
-      overlayId="clusterOverlay"
-      :overlayHeaders="overlayHeaders"
-      :overlayRows="overlayRows"
-      :overlayCoordinate="overlayCoordinate"
-    />
-    <div
-      ref="bottomControlsContainer"
-      class="bottomControlsContainer pa-2 d-flex flex-column align-end"
-      :class="{'hidden': enableScrollyMode}"
-      :style="calculatePadding"
-    >
-    <div class="mouse-container"
-      :style="mousePosConStyle"
-       ref="mousePositionContainer"/>
-    </div>
-    <!-- Container for all controls. Will move when map is resizing -->
-    <div
-      ref="controlsContainer"
-      class="controlsContainer pa-2 d-flex flex-column align-end"
-      :class="{'hidden': enableScrollyMode}"
-      :style="`margin-right: ${$vuetify.breakpoint.xsOnly ? 0 : controlsContainerStyle}`"
-    >
-      <FullScreenControl
-        v-if="mapId !== 'centerMap'"
-        :mapId="mapId" class="pointerEvents"
-      />
-      <ZoomControl
-        v-show="!enableScrollyMode"
+      <!-- a layer adding a (potential) subaoi, z-index 5 -->
+      <SubaoiLayer
         :mapId="mapId"
-        class="pointerEvents"
+        :indicator="indicator"
+        :mergedConfigsData="mergedConfigsData[0]"
+        :isGlobal="!featureObject"
+        v-if="dataLayerName"
+        :key="dataLayerKey + '_subAoi'"
       />
-      <LayerControl
-        v-if="loaded && mapId !== 'centerMap'"
-        class="pointerEvents"
+      <!-- a layer displaying a selected global poi
+      these layers will have z-Index 3 -->
+      <SpecialLayer
+        v-if="showSpecialLayer"
         :mapId="mapId"
+        :mergedConfigs="mergedConfigsData"
+        :options="specialLayerOptions"
+        :key="dataLayerKey  + '_specialLayer'"
+        :swipePixelX="swipePixelX"
+        :resetProjectionOnDestroy='true'
+        @updatecenter="handleSpecialLayerCenter"
+        @updatezoom="handleSpecialLayerZoom"
+        @setMapTime="(time) => dataLayerTime = {value: time}"
+        @setTimeArray="handleSetTimeArray"
       />
-      <!-- will add a drawing layer to the map (z-index 3) -->
-      <CustomAreaButtons
-        v-if="loaded && mapId === 'centerMap'"
-        class="pointerEvents"
+      <!-- additional special layer showing frozen indicator-->
+      <SpecialLayer
+        v-if="showFrozenLayer"
         :mapId="mapId"
-        :mergedConfigsData="mergedConfigsData"
-        :key="dataLayerName  + '_customArea'"
-        :drawnArea.sync="drawnArea"
+        :mergedConfigs="mergedConfigsFrozenData"
+        :options="frozenLayerOptions"
+        :key="frozenLayerName + '_specialLayer'"
       />
-      <v-btn
-        v-if="$vuetify.breakpoint.xsOnly && displayTimeSelection"
-        :color="$vuetify.theme.currentTheme.background"
-        class="pointerEvents"
-        style="min-width: 36px; width: 36px; height: 36px;right: 4px;"
-        @click="mobileTimeselectionToggle = !mobileTimeselectionToggle"
+      <div
+        class="d-flex justify-center fill-height"
+        style="position: absolute; bottom: 0; left: 0; pointer-events: none;
+        transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        width: 100%"
       >
-        <v-icon>mdi-map-clock-outline</v-icon>
-      </v-btn>
-      <DatePickerControl
-        v-if="loaded && mergedConfigsData.length && mergedConfigsData[0].mapTimeDatepicker"
-        @selectedDate="setDateFromDatePicker"
-        class="pointerEvents"
-        :mapId="mapId"
-      />
-      <SliderControl
-        v-if="loaded && mergedConfigsData.length && mergedConfigsData[0].sliderConfig"
-        class="pointerEvents"
+        <LayerSwipe
+          v-if="compareLayerTime"
+          :mapId="mapId"
+          :time="compareLayerTime.value"
+          :mergedConfigsData="mergedConfigsLayerSwipe"
+          :specialLayerOptionProps="specialLayerOptions"
+          :enable="enableCompare"
+          :drawnArea="drawnArea"
+          @updateSwipePosition="updateSwipePosition"
+          :key="dataLayerName + '_layerSwipe'"
+        />
+        <indicator-time-selection
+          ref="timeSelection"
+          style="pointer-events: all;"
+          v-if="displayTimeSelection && !enableScrollyMode
+            && ($vuetify.breakpoint.xsOnly ? mobileTimeselectionToggle : true)"
+          :autofocus="!disableAutoFocus && !isInIframe"
+          :available-values="availableTimeEntries"
+          :indicator="mergedConfigsData[0]"
+          :compare-active.sync="enableCompare"
+          :compare-time.sync="compareLayerTime"
+          :original-time.sync="dataLayerTime"
+          :enable-compare="mergedConfigsData[0] && !mergedConfigsData[0].disableCompare"
+          :large-time-duration="indicator.largeTimeDuration"
+          :key="dataLayerName + '_timeSelection'"
+          @focusSelect="focusSelect"
+          :style="calculatePosition"
+        />
+      </div>
+      <!-- an overlay for showing information when hovering over clusters -->
+      <MapOverlay
         :mapId="mapId"
-        :config="mergedConfigsData[0].sliderConfig"
-      />
-      <CustomFeaturesFetchButton
-      v-if="loaded && mergedConfigsData.length
-        && mergedConfigsData[0].mapTimeDatepicker"
-        class="pointerEvents"
-        v-on:fetchCustomAreaFeatures="updateSelectedAreaFeature(true)"
+        overlayId="clusterOverlay"
+        :overlayHeaders="overlayHeaders"
+        :overlayRows="overlayRows"
+        :overlayCoordinate="overlayCoordinate"
       />
       <div
-        v-if="$route.name !== 'demo'"
-        class="pointerEvents mb-2"
-        style="padding-right: 4px; margin-top: 5px;"
+        ref="bottomControlsContainer"
+        class="bottomControlsContainer pa-2 d-flex flex-column align-end"
+        :class="{'hidden': enableScrollyMode}"
+        :style="calculatePadding"
       >
-        <IframeButton
-          v-if="mapId === 'centerMap'
-            && indicator
-            && indicatorHasMapData()
-            && appConfig.id !== 'gtif'"
-          :featureObject="featureObject"
-          :indicatorObject="indicator"
-          :zoom.sync="currentZoom"
-          :center.sync="currentCenter"
-          mapControl
-        />
+      <div class="mouse-container"
+        :style="mousePosConStyle"
+        ref="mousePositionContainer"/>
       </div>
+      <!-- Container for all controls. Will move when map is resizing -->
       <div
-        v-if="$route.name !== 'demo'"
-        class="pointerEvents mb-2"
-        style="padding-right: 4px;"
+        ref="controlsContainer"
+        class="controlsContainer pa-2 d-flex flex-column align-end"
+        :class="{'hidden': enableScrollyMode}"
+        :style="`margin-right: ${$vuetify.breakpoint.xsOnly ? 0 : controlsContainerStyle}`"
       >
-        <AddToDashboardButton
-          v-if="mapId === 'centerMap'
-            && indicator
-            && indicatorHasMapData()
-            && (appConfig.id !== 'gtif' || $route.query.customDashboard)"
-          :indicatorObject="indicator"
-          :featureObject="featureObject"
-          :zoom.sync="currentZoom"
-          :center.sync="currentCenter"
-          :datalayertime="dataLayerTime ? dataLayerTime.name :  null"
-          :comparelayertime="enableCompare && compareLayerTime ? compareLayerTime.name : null"
-          mapControl
+        <FullScreenControl
+          v-if="mapId !== 'centerMap'"
+          :mapId="mapId" class="pointerEvents"
+        />
+        <ZoomControl
+          v-show="!enableScrollyMode"
+          :mapId="mapId"
+          class="pointerEvents"
+        />
+        <LayerControl
+          v-if="loaded && mapId !== 'centerMap'"
+          class="pointerEvents"
+          :mapId="mapId"
+        />
+        <!-- will add a drawing layer to the map (z-index 3) -->
+        <CustomAreaButtons
+          v-if="loaded && mapId === 'centerMap'"
+          class="pointerEvents"
+          :mapId="mapId"
+          :mergedConfigsData="mergedConfigsData"
+          :key="dataLayerName  + '_customArea'"
+          :drawnArea.sync="drawnArea"
+        />
+        <v-btn
+          v-if="$vuetify.breakpoint.xsOnly && displayTimeSelection"
+          :color="$vuetify.theme.currentTheme.background"
+          class="pointerEvents"
+          style="min-width: 36px; width: 36px; height: 36px;right: 4px;"
+          @click="mobileTimeselectionToggle = !mobileTimeselectionToggle"
+        >
+          <v-icon>mdi-map-clock-outline</v-icon>
+        </v-btn>
+        <DatePickerControl
+          v-if="loaded && mergedConfigsData.length && mergedConfigsData[0].mapTimeDatepicker"
+          @selectedDate="setDateFromDatePicker"
+          class="pointerEvents"
+          :mapId="mapId"
+        />
+        <SliderControl
+          v-if="loaded && mergedConfigsData.length && mergedConfigsData[0].sliderConfig"
+          class="pointerEvents"
+          :mapId="mapId"
+          :config="mergedConfigsData[0].sliderConfig"
+        />
+        <CustomFeaturesFetchButton
+        v-if="loaded && mergedConfigsData.length
+          && mergedConfigsData[0].mapTimeDatepicker"
+          class="pointerEvents"
+          v-on:fetchCustomAreaFeatures="updateSelectedAreaFeature(true)"
         />
+        <div
+          v-if="$route.name !== 'demo'"
+          class="pointerEvents mb-2"
+          style="padding-right: 4px; margin-top: 5px;"
+        >
+          <IframeButton
+            v-if="mapId === 'centerMap'
+              && indicator
+              && indicatorHasMapData()
+              && appConfig.id !== 'gtif'"
+            :featureObject="featureObject"
+            :indicatorObject="indicator"
+            :zoom.sync="currentZoom"
+            :center.sync="currentCenter"
+            mapControl
+          />
+        </div>
+        <div
+          v-if="$route.name !== 'demo'"
+          class="pointerEvents mb-2"
+          style="padding-right: 4px;"
+        >
+          <AddToDashboardButton
+            v-if="mapId === 'centerMap'
+              && indicator
+              && indicatorHasMapData()
+              && (appConfig.id !== 'gtif' || $route.query.customDashboard)"
+            :indicatorObject="indicator"
+            :featureObject="featureObject"
+            :zoom.sync="currentZoom"
+            :center.sync="currentCenter"
+            :datalayertime="dataLayerTime ? dataLayerTime.name :  null"
+            :comparelayertime="enableCompare && compareLayerTime ? compareLayerTime.name : null"
+            mapControl
+          />
+        </div>
+        <div
+          v-if="$route.name !== 'demo'"
+          class="pointerEvents mb-2"
+          style="padding-right: 4px; margin-top: 2px;"
+        >
+          <OLExportButton
+            v-if="mapId === 'centerMap'
+              && indicator
+              && indicatorHasMapData()
+              && appConfig.id !== 'gtif'"
+            :featureObject="featureObject"
+            :indicatorObject="indicator"
+            :zoom.sync="currentZoom"
+            :center.sync="currentCenter"
+            mapControl
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -209,6 +230,7 @@ import { createLayerFromConfig } from '@/components/map/layers';
 import MapOverlay from '@/components/map/MapOverlay.vue';
 import IndicatorTimeSelection from '@/components/IndicatorTimeSelection.vue';
 import IframeButton from '@/components/IframeButton.vue';
+import OLExportButton from '@/components/OLExportButton.vue';
 import AddToDashboardButton from '@/components/AddToDashboardButton.vue';
 import { updateTimeLayer } from '@/components/map/timeLayerUtils';
 import {
@@ -235,6 +257,7 @@ import {
   findClosest,
   getFilteredInputData,
 } from '@/utils';
+import '@eox/map';
 
 const geoJsonFormat = new GeoJSON({
 });
@@ -253,6 +276,7 @@ export default {
     SubaoiLayer,
     MapOverlay,
     IframeButton,
+    OLExportButton,
     AddToDashboardButton,
     DarkOverlayLayer,
     CustomFeaturesFetchButton,
@@ -1430,6 +1454,7 @@ export default {
   }
 
   .controlsContainer {
+    top: 0px;
     position: absolute;
     right: 0px;
     min-width: 50px;
diff --git a/app/src/components/map/layers.js b/app/src/components/map/layers.js
index 8e1f5bdb98..7336401b94 100644
--- a/app/src/components/map/layers.js
+++ b/app/src/components/map/layers.js
@@ -175,24 +175,6 @@ function createVectorLayerStyle(config, options) {
   return dynamicStyleFunction;
 }
 
-function createFromTemplate(templateStr, tileCoord) {
-  const zwgs84OffsetRegEx = /\{z-1\}/g;
-  const zRegEx = /\{z\}/g;
-  const xRegEx = /\{x\}/g;
-  const yRegEx = /\{y\}/g;
-  const dashYRegEx = /\{-y\}/g;
-  return templateStr
-    .replace(zwgs84OffsetRegEx, (tileCoord[0] - 1).toString())
-    .replace(zRegEx, (tileCoord[0]).toString())
-    .replace(xRegEx, tileCoord[1].toString())
-    .replace(yRegEx, tileCoord[2].toString())
-    .replace(dashYRegEx, () => {
-      // eslint-disable-next-line no-bitwise
-      const y = (1 << tileCoord[0]) - tileCoord[2] - 1;
-      return y.toString();
-    });
-}
-
 function replaceUrlPlaceholders(baseUrl, config, options) {
   let url = baseUrl;
   const time = options.time || store.state.indicators.selectedTime;
@@ -247,6 +229,7 @@ async function createWMTSSourceFromCapabilities(config, layer, options) {
       time: configUpdate.dateFormatFunction(updatedTime),
     };
     layer.getSource().updateDimensions(updatedDimensions);
+    layer.set('configId', `${configUpdate.name}-${updatedTime}`);
   });
   return s;
 }
@@ -449,31 +432,30 @@ export function createLayerFromConfig(config, map, _options = {}) {
       crossOrigin: typeof config.crossOrigin !== 'undefined' ? config.crossOrigin : 'anonymous',
       projection: getProjectionOl(config.projection),
       transition: 0,
-      tileUrlFunction: (tileCoord) => createFromTemplate(config.url, tileCoord),
+      url: config.url,
     };
     source = new XYZSource(sourceOptions);
+    layer = new TileLayer({
+      source,
+    });
     if (config.usedTimes?.time?.length) {
-      // for layers with time entries, use a tileUrl function that
-      // gets the current time entry from the store
-      source.setTileUrlFunction((tileCoord) => {
-        const url = replaceUrlPlaceholders(config.url, config, options);
-        return createFromTemplate(url, tileCoord);
-      });
+      let url = replaceUrlPlaceholders(config.url, config, options);
+      source.setUrl(url);
       source.set('updateTime', (time, area, configUpdate) => {
         const updatedOptions = {
           ...options,
           ...configUpdate,
         };
         updatedOptions.time = time;
-        source.setTileUrlFunction((tileCoord) => {
-          const url = replaceUrlPlaceholders(configUpdate.url, configUpdate, updatedOptions);
-          return createFromTemplate(url, tileCoord);
-        });
+        url = replaceUrlPlaceholders(configUpdate.url, configUpdate, updatedOptions);
+        source.setUrl(url);
+        let timeId = time;
+        if (Array.isArray(time) && time.length > 0) {
+          [timeId] = time;
+        }
+        layer.set('configId', `${configUpdate.name}-${timeId}`);
       });
     }
-    layer = new TileLayer({
-      source,
-    });
   } else if (config.protocol === 'WMS') {
     const { tileSize } = config;
     const tileGrid = tileSize === 512 ? new TileGrid({
@@ -522,6 +504,7 @@ export function createLayerFromConfig(config, map, _options = {}) {
         newParams.env = `year:${updatedTime}`;
       }
       source.updateParams(newParams);
+      layer.set('configId', `${configUpdate.name}-${updatedTime}`);
     });
     layer = new TileLayer({
       source,
@@ -599,5 +582,6 @@ export function createLayerFromConfig(config, map, _options = {}) {
     };
     layer.getSource().set('updateArea', areaUpdate);
   }
+  layer.set('configId', config.name);
   return layer;
 }
diff --git a/app/src/config/polar.js b/app/src/config/polar.js
index e8ba7ebc46..0244551c1d 100644
--- a/app/src/config/polar.js
+++ b/app/src/config/polar.js
@@ -92,7 +92,6 @@ const polarStereoDatasetsConfigs = {
   baseLayers: arcticBaseMaps,
   overlayLayers: arcticOverlayMaps,
   mapProjection: polarStereographicProjection,
-  projection: 'EPSG:4326',
   presetView: {
     type: 'FeatureCollection',
     features: [{
@@ -124,6 +123,7 @@ function createTOPAZ5Config(indicatorCode) {
         indicator: indicatorCode,
         display: {
           ...polarStereoDatasetsConfigs,
+          projection: 'EPSG:4326',
         },
       },
     },
@@ -427,7 +427,6 @@ export const globalIndicators = [
       indicatorObject: {
         indicator: 'SITI',
         display: {
-          url: 'https://staging-raster.delta-backend.com/cog/tiles/WGS1984Quad/{z-1}/{x}/{y}?&resampling_method=nearest&bidx=1&colormap_name=plasma&rescale=0.0,4.0&{time}',
           ...polarStereoDatasetsConfigs,
         },
       },
@@ -454,6 +453,7 @@ export const globalIndicators = [
         time: getDailyDates('2007-01-02', '2021-12-28'),
         display: {
           ...polarStereoDatasetsConfigs,
+          projection: 'EPSG:3411',
           dateFormatFunction: (date) => DateTime.fromISO(date).toFormat('yyyy-MM-dd'),
         },
       },
diff --git a/app/src/config/stories.json b/app/src/config/stories.json
index c04d6b515b..7faf2ce245 100644
--- a/app/src/config/stories.json
+++ b/app/src/config/stories.json
@@ -7,13 +7,6 @@
         "subtitle": "Read more about satellite data applications for environmental impacts on world cereal supply and demand",
         "image": "./data/story-images/Agriculture.jpeg",
         "imagePlaceholder": "./data/story-images/Agriculture_placeholder.jpeg"
-      },
-      "new-storytelling-demo": {
-        "storyMarkdown": "./data/storytelling-md/new-storytelling-demo.md",
-        "title": "New Storytelling Demo",
-        "subtitle": "Read more about satellite data applications for environmental impacts on world cereal supply and demand",
-        "image": "./data/story-images/Agriculture.jpeg",
-        "imagePlaceholder": "./data/story-images/Agriculture_placeholder.jpeg"
       }
     },
     "atmosphere": {
diff --git a/app/src/config/trilateral.js b/app/src/config/trilateral.js
index c3733b3fe6..6b645a02cf 100644
--- a/app/src/config/trilateral.js
+++ b/app/src/config/trilateral.js
@@ -589,9 +589,6 @@ export const globalIndicators = [
         display: {
           baseLayers: arcticBaseMaps,
           overlayLayers: arcticOverlayMaps,
-          // WGS1984Quad as a workaround for EPSG:3857 crashing on z=0 default view for polar areas
-          url: 'https://staging-raster.delta-backend.com/cog/tiles/WGS1984Quad/{z-1}/{x}/{y}?&resampling_method=nearest&bidx=1&colormap_name=plasma&rescale=0.0,4.0&{time}',
-          projection: 'EPSG:4326',
           mapProjection: polarStereographicProjection,
         },
       },
diff --git a/app/src/utils.js b/app/src/utils.js
index 1e3fef9e71..22172a3b21 100644
--- a/app/src/utils.js
+++ b/app/src/utils.js
@@ -175,7 +175,9 @@ function createXYZTilesMarineDatastoreDisplay(config, name) {
   // const vmax = searchParams.get('vmax') || 1;
   const display = {
     protocol: 'xyz',
-    url: `https://wmts.marine.copernicus.eu/teroWmts?service=WMTS&version=1.0.0&request=GetTile&tilematrixset=EPSG:4326&tilematrix={z-1}&tilerow={y}&tilecol={x}&layer=${config['wmts:layer']}&elevation=${config['wmts:dimensions'].elevation}&time={time}&style=${config['wmts:dimensions'].style}`,
+    // TODO FIXME - change to 4326 and z-1 offset
+    url: `https://wmts.marine.copernicus.eu/teroWmts?service=WMTS&version=1.0.0&request=GetTile&tilematrixset=EPSG:3857&tilematrix={z}&tilerow={y}&tilecol={x}&layer=${config['wmts:layer']}&elevation=${config['wmts:dimensions'].elevation}&time={time}&style=${config['wmts:dimensions'].style}`,
+    tileSize: 512,
     name,
     dateFormatFunction: (date) => `${date}`,
     // commenting out for now due to a endless loop of fetching tiles (something triggers layercontrol xyz source update) and that fetches tiles, which triggers layercontrol xyz "slider" update
diff --git a/app/src/views/StoryEditor.vue b/app/src/views/StoryEditor.vue
index f7f67b98d3..95153c6443 100644
--- a/app/src/views/StoryEditor.vue
+++ b/app/src/views/StoryEditor.vue
@@ -7,9 +7,9 @@
     >
       <!-- <global-header /> -->
       <eox-storytelling
-        show-editor
-        markdown-url="./data/storytelling-md/new-storytelling-demo.md"
-        style="overflow-y: auto; height: calc(var(--vh, 1vh) * 100);"
+        show-editor="open"
+        markdown="## Welcome to the story editor "
+        style="overflow-y: auto; height: calc(var(--vh, 2vh) * 100);"
       ></eox-storytelling>
       <global-footer />
     </div>

From e17ca3253880721285e0e23406049e995068d9f0 Mon Sep 17 00:00:00 2001
From: Lubomir Dolezal <lubojr@seznam.cz>
Date: Tue, 28 May 2024 10:40:58 +0200
Subject: [PATCH 3/7] fix: MCD config match

---
 app/src/config/trilateral.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/config/trilateral.js b/app/src/config/trilateral.js
index 6b645a02cf..ee6a5d01ab 100644
--- a/app/src/config/trilateral.js
+++ b/app/src/config/trilateral.js
@@ -1313,7 +1313,7 @@ export const globalIndicators = [
   {
     properties: {
       indicatorObject: {
-        indicator: 'sen4ama',
+        indicator: 'MCD',
         display: {
           baseLayers: cloudlessBaseLayerDefault,
           baseUrl: `https://services.sentinel-hub.com/ogc/wms/${shConfig.shInstanceId}`,

From e60120bcc861ed828a6acba01f32704018173a0b Mon Sep 17 00:00:00 2001
From: Daniel Santillan <daniel.santillan@eox.at>
Date: Tue, 28 May 2024 13:32:03 +0200
Subject: [PATCH 4/7] fix: using type comparison to make sure correct types are
 identified for export function (#2583)

---
 app/package-lock.json                 | 14 +++---
 app/package.json                      |  2 +-
 app/src/components/OLExportButton.vue | 61 +++++++++++++++++++++------
 3 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 9478a726ea..5de4215126 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -36,7 +36,7 @@
         "luxon": "^1.28.1",
         "marked": "^4.0.10",
         "medium-zoom": "^1.0.6",
-        "ol": "^9.1.0",
+        "ol": "^9.2.4",
         "ol-mapbox-style": "^11.0.0",
         "proj4": "^2.8.0",
         "regl": "^2.1.0",
@@ -14820,9 +14820,9 @@
       "dev": true
     },
     "node_modules/ol": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-9.1.0.tgz",
-      "integrity": "sha512-nDrkJ2tzZNpo/wzN/PpHV5zdxbnXZaFktoMaD2cFLEc6gCwlgLY21Yd8wnt/4FjaVYwLBnbN9USXSwIBGcyksQ==",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-9.2.4.tgz",
+      "integrity": "sha512-bsbu4ObaAlbELMIZWnYEvX4Z9jO+OyCBshtODhDKmqYTPEfnKOX3RieCr97tpJkqWTZvyV4tS9UQDvHoCdxS+A==",
       "dependencies": {
         "color-rgba": "^3.0.0",
         "color-space": "^2.0.1",
@@ -33547,9 +33547,9 @@
       "dev": true
     },
     "ol": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-9.1.0.tgz",
-      "integrity": "sha512-nDrkJ2tzZNpo/wzN/PpHV5zdxbnXZaFktoMaD2cFLEc6gCwlgLY21Yd8wnt/4FjaVYwLBnbN9USXSwIBGcyksQ==",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-9.2.4.tgz",
+      "integrity": "sha512-bsbu4ObaAlbELMIZWnYEvX4Z9jO+OyCBshtODhDKmqYTPEfnKOX3RieCr97tpJkqWTZvyV4tS9UQDvHoCdxS+A==",
       "requires": {
         "color-rgba": "^3.0.0",
         "color-space": "^2.0.1",
diff --git a/app/package.json b/app/package.json
index ff9f7959e8..6d0b0e3d46 100644
--- a/app/package.json
+++ b/app/package.json
@@ -43,7 +43,7 @@
     "luxon": "^1.28.1",
     "marked": "^4.0.10",
     "medium-zoom": "^1.0.6",
-    "ol": "^9.1.0",
+    "ol": "^9.2.4",
     "ol-mapbox-style": "^11.0.0",
     "proj4": "^2.8.0",
     "regl": "^2.1.0",
diff --git a/app/src/components/OLExportButton.vue b/app/src/components/OLExportButton.vue
index 96c3866eb9..1c09e64af8 100644
--- a/app/src/components/OLExportButton.vue
+++ b/app/src/components/OLExportButton.vue
@@ -117,6 +117,11 @@ import {
 } from 'vuex';
 import { getUid } from 'ol/util';
 import { toLonLat } from 'ol/proj';
+import LayerGroup from 'ol/layer/Group';
+import TileLayer from 'ol/layer/Tile';
+import { TileWMS, WMTS, XYZ } from 'ol/source';
+import VectorSource from 'ol/source/Vector';
+import { JSONFeature, MVT, WKB } from 'ol/format';
 
 export default {
   mixins: [dialogMixin],
@@ -170,13 +175,11 @@ Text describing the current step of the tour and why it is interesting what the
       // Extract completely flat layers array without groups
       const layers = [];
       layerArray.map((l) => {
-        if (l.constructor.name.includes('Group')) {
+        if (l instanceof LayerGroup) {
           layers.push(this.extractLayerConfig(l.getLayersArray()));
-        } else if (l.constructor.name.includes('STACLayer')) {
-          layers.push(l.get('_jsonDefinition'));
-        } else {
+        } else if (l instanceof TileLayer) {
           const layerConfig = {
-            type: l.constructor.name.replace('Layer', ''),
+            type: 'Tile',
             properties: {
               id: l.get('configId') ? l.get('configId') : getUid(l),
             },
@@ -185,28 +188,60 @@ Text describing the current step of the tour and why it is interesting what the
           const olsource = l.getSource();
           // only export visible layers
           if (olsource && l.isVisible()) {
+            // Find correct type
+            let foundType;
+            if (olsource instanceof XYZ) {
+              foundType = 'XYZ';
+            }
+            if (olsource instanceof TileWMS) {
+              foundType = 'TileWMS';
+            }
+            if (olsource instanceof VectorSource) {
+              foundType = 'VectorSource';
+            }
+            if (olsource instanceof WMTS) {
+              foundType = 'WMTS';
+            }
             // Extract source config
             const source = {
-              type: l.getSource().constructor.name.replace('Source', ''),
+              type: foundType,
             };
-            if (['XYZ', 'TileWMS', 'WMS'].includes(olsource.constructor.name)) {
+            if (['XYZ', 'TileWMS', 'WMTS'].includes(foundType)) {
               if ('url' in olsource) {
                 source.url = olsource.url;
               } else if ('urls' in olsource) {
                 source.urls = olsource.urls;
               }
-            } else if (olsource.constructor.name === 'VectorSource') {
+            } else if (foundType === 'VectorSource') {
               source.url = olsource.getUrl();
-              source.format = olsource.getFormat()?.constructor.name;
+              let vsf;
+              const olformat = olsource.getFormat();
+              if (olformat instanceof JSONFeature) {
+                vsf = 'JSONFeature';
+              }
+              if (olformat instanceof MVT) {
+                vsf = 'MVT';
+              }
+              if (olformat instanceof WKB) {
+                vsf = 'WKB';
+              }
+              if (vsf) {
+                source.format = vsf;
+              }
             }
             // Extract possible other configuration options
-            if (['TileWMS', 'WMS'].includes(olsource.constructor.name)) {
+            if (['TileWMS'].includes(foundType)) {
               source.params = olsource.getParams();
               source.serverType = olsource.serverType_;
             }
-            if (olsource.constructor.name === 'VectorSource') {
-              // TODO: the getStyle function does not return the applied style as described in OL docs
-              layerConfig.style = ''; // l.getStyle();
+            if (['WMTS'].includes(foundType)) {
+              source.layer = olsource.getLayer();
+              source.format = olsource.getFormat();
+              source.matrixSet = olsource.getMatrixSet();
+              // TODO: i think we also need to have information on tilegrid here
+            }
+            if (foundType === 'VectorSource') {
+              layerConfig.style = l.getStyle();
             }
             if (l.getOpacity() !== 1) {
               layerConfig.opacity = l.getOpacity();

From 13e2621ea2d6627298be43167e96f496c3ba1c33 Mon Sep 17 00:00:00 2001
From: Lubomir Dolezal <lubojr@seznam.cz>
Date: Tue, 28 May 2024 14:29:00 +0200
Subject: [PATCH 5/7] chore: adapt config for E13c , E13b tri detections from
 geodb

---
 app/src/config/trilateral.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/app/src/config/trilateral.js b/app/src/config/trilateral.js
index ee6a5d01ab..0000aed983 100644
--- a/app/src/config/trilateral.js
+++ b/app/src/config/trilateral.js
@@ -315,16 +315,9 @@ export const layerNameMapping = Object.freeze({
       };
       return mapping[eoID];
     },
-    features: {
-      name: 'Ship detections',
-      dateFormatFunction: (date) => DateTime.fromISO(date).toFormat('yyyy_MM_dd'),
-      url: 'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1/detections/ship/{site}/{featuresTime}.geojson',
-      allowedParameters: ['verified'],
-    },
   },
   airports: {
     url: 'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1/planet/{z}/{x}/{y}?date={time}&site={site}',
-    name: 'Throughput at principal hub airports',
     protocol: 'xyz',
     tileSize: 256,
     dateFormatFunction: (date) => DateTime.fromISO(date).toFormat('yyyy_MM_dd'),
@@ -348,12 +341,6 @@ export const layerNameMapping = Object.freeze({
       };
       return mapping[eoID];
     },
-    features: {
-      name: 'Plane detections',
-      dateFormatFunction: (date) => DateTime.fromISO(date).toFormat('yyyy_MM_dd'),
-      url: 'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1/detections/plane/{site}/{featuresTime}.geojson',
-      allowedParameters: ['Country', 'label', 'score'],
-    },
   },
   water_quality_chl: {
     url: 'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1/{z}/{x}/{y}@1x?url=s3://covid-eo-data/{site}-{time}.tif&resampling_method=bilinear&bidx=1&rescale=-100%2C100&color_map=rdbu_r',

From f5955ef57bac5410b978eca39c6d158bc06660a9 Mon Sep 17 00:00:00 2001
From: Daniel Santillan <daniel.santillan@eox.at>
Date: Tue, 28 May 2024 14:35:44 +0200
Subject: [PATCH 6/7] fix: injecting previosly used tooltip style into shadow
 dom of eox-map (#2584)

---
 app/src/components/map/MapOverlay.vue | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/app/src/components/map/MapOverlay.vue b/app/src/components/map/MapOverlay.vue
index 79ef2f113d..ae23b4fc7b 100644
--- a/app/src/components/map/MapOverlay.vue
+++ b/app/src/components/map/MapOverlay.vue
@@ -57,6 +57,33 @@ export default {
     });
     map.addOverlay(overlay);
     this.overlay = overlay;
+    // TODO: i imagine we don't really want to be injecting the style but this is
+    // the solution that seemed to work best right now
+    const style = document.createElement('style');
+    style.innerHTML = `.tooltip {
+      padding: 0px 10px 0px 10px;
+      margin: 0px;
+      border-radius: 5px;
+      position: relative;
+      font-size: 14px;
+      box-shadow: none !important;
+      background: rgba(0, 0, 0, 0.8) !important;
+      color: #FFFFFF !important;
+    }
+    .tooltip:after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border: 10px solid transparent;
+      border-top-color: rgba(0, 0, 0, 0.6);
+      border-bottom: 0;
+      margin-left: -10px;
+      margin-bottom: -10px;
+    }`;
+    this.$parent.$refs.mapContainer.shadowRoot.appendChild(style);
   },
   methods: {},
   beforeDestroy() {

From c7317f65869e7da29deaac1d8f9364a12dad7eee Mon Sep 17 00:00:00 2001
From: Daniel Santillan <daniel.santillan@eox.at>
Date: Tue, 28 May 2024 14:43:46 +0200
Subject: [PATCH 7/7] chore: adapted tooltip style, updated format import and
 comparison for olexport

---
 app/src/components/OLExportButton.vue | 6 +++---
 app/src/components/map/MapOverlay.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/src/components/OLExportButton.vue b/app/src/components/OLExportButton.vue
index 1c09e64af8..38efe32496 100644
--- a/app/src/components/OLExportButton.vue
+++ b/app/src/components/OLExportButton.vue
@@ -121,7 +121,7 @@ import LayerGroup from 'ol/layer/Group';
 import TileLayer from 'ol/layer/Tile';
 import { TileWMS, WMTS, XYZ } from 'ol/source';
 import VectorSource from 'ol/source/Vector';
-import { JSONFeature, MVT, WKB } from 'ol/format';
+import { GeoJSON, MVT, WKB } from 'ol/format';
 
 export default {
   mixins: [dialogMixin],
@@ -216,8 +216,8 @@ Text describing the current step of the tour and why it is interesting what the
               source.url = olsource.getUrl();
               let vsf;
               const olformat = olsource.getFormat();
-              if (olformat instanceof JSONFeature) {
-                vsf = 'JSONFeature';
+              if (olformat instanceof GeoJSON) {
+                vsf = 'GeoJSON';
               }
               if (olformat instanceof MVT) {
                 vsf = 'MVT';
diff --git a/app/src/components/map/MapOverlay.vue b/app/src/components/map/MapOverlay.vue
index ae23b4fc7b..232cac111b 100644
--- a/app/src/components/map/MapOverlay.vue
+++ b/app/src/components/map/MapOverlay.vue
@@ -61,7 +61,7 @@ export default {
     // the solution that seemed to work best right now
     const style = document.createElement('style');
     style.innerHTML = `.tooltip {
-      padding: 0px 10px 0px 10px;
+      padding: 1px 10px 1px 10px;
       margin: 0px;
       border-radius: 5px;
       position: relative;