@eodash/eodash 5.0.0-alpha.2.10 → 5.0.0-alpha.2.12

package/dist/client/{transition-BtJHh7JK.js → transition-YJj28Lgx.js}

@@ -1,4 +1,4 @@
-import { p as m, ay as b, d, bf as l, ab as u } from "./asWebComponent-DQrnLsI2.js";
+import { p as m, ay as b, d, bh as l, ab as u } from "./asWebComponent-CVFLR8Hh.js";
 const j = m({
   transition: {
     type: [Boolean, String, Object],

package/dist/node/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import{createLogger as P,defineConfig as C,searchForWorkspaceRoot as x,createServer as k,preview as S,build as F}from"vite";import{readFileSync as U,existsSync as u}from"fs";import t from"path";import{Command as E}from"commander";import{readFile as W,writeFile as I,rm as $,cp as N}from"fs/promises";import O from"@vitejs/plugin-vue";import T,{transformAssetUrls as A}from"vite-plugin-vuetify";const s=b(process.cwd()),h=new E("eodash"),H=JSON.parse(U(t.join(s,"package.json"),"utf-8"));h.version(H.version,"-v, --version","output the current version"),h.option("--publicDir <path>","path to statically served assets folder").option("--no-publicDir","stop serving static assets").option("--outDir <path>","minified output folder").option("-e, --entryPoint <path>","file exporting `createEodash`").option("-w, --widgets <path>","folder that contains vue components as internal widgets").option("--cacheDir <path>","cache folder").option("-r, --runtime <path>","file exporting eodash client runtime config").option("-b, --base <path>","base public path").option("-p, --port <port>","serving  port").option("-o, --open","open default browser when the server starts").option("-c, --config <path>","path to eodash server and build configuration file").option("--host [IP address]","specify which IP addresses the server should listen on").option("-l, --lib","builds eodash as a web component library").option("--no-lib","builds eodash as an SPA").option("--no-host","do not expose server to the network").parse(process.argv);const i=await z(h.opts(),process.argv?.[2]),c=b(),L=i.publicDir?t.resolve(s,i.publicDir):t.join(s,"./public"),f=t.join(s,"/src"),l=i.runtime?t.resolve(s,i.runtime):t.join(f,"./runtime.js"),g=i.entryPoint?t.resolve(s,i.entryPoint):t.join(f,"/main.js"),w=i.widgets?t.resolve(s,i.widgets):t.join(f,"widgets"),j=t.join(s,"/.eodash"),m=i.outDir?t.resolve(s,i.outDir):t.join(j,"/dist"),R=i.cacheDir?t.resolve(s,i.cacheDir):t.join(j,"cache"),v=P(void 0,{prefix:"[eodash]"});async function z(e,n){let a=e.config?t.resolve(s,e.config):t.join(s,"eodash.config.js"),o={};return u(a)?o=await import(a).then(r=>r.default instanceof Function?r.default():r.default).catch(r=>{console.error(r)}):a=null,{base:e.base??o?.base,port:Number(e.port??o?.[n]?.port),host:e.host??o?.[n]?.host,open:e.open??o?.[n]?.open,cacheDir:e.cacheDir??o?.cacheDir,entryPoint:e.entryPoint??o?.entryPoint,outDir:e.outDir??o?.outDir,publicDir:e.publicDir??o?.publicDir,runtime:e.runtime??o?.runtime,widgets:e.widgets??o?.widgets,lib:e.lib??o?.lib}}function b(e=import.meta.dirname){if(e.split("/").length>0)return u(t.resolve(e,"package.json"))?e:b(t.resolve(e,".."));throw new Error("no package root found from "+e)}const y=`
+import{createLogger as P,defineConfig as C,searchForWorkspaceRoot as x,createServer as k,preview as S,build as F}from"vite";import{readFileSync as U,existsSync as u}from"fs";import t from"path";import{Command as E}from"commander";import{fileURLToPath as W}from"url";import{readFile as I,writeFile as T,rm as $,cp as L}from"fs/promises";import N from"@vitejs/plugin-vue";import O,{transformAssetUrls as A}from"vite-plugin-vuetify";const s=b(process.cwd()),h=new E("eodash"),H=JSON.parse(U(t.join(s,"package.json"),"utf-8"));h.version(H.version,"-v, --version","output the current version"),h.option("--publicDir <path>","path to statically served assets folder").option("--no-publicDir","stop serving static assets").option("--outDir <path>","minified output folder").option("-e, --entryPoint <path>","file exporting `createEodash`").option("-w, --widgets <path>","folder that contains vue components as internal widgets").option("--cacheDir <path>","cache folder").option("-r, --runtime <path>","file exporting eodash client runtime config").option("-b, --base <path>","base public path").option("-p, --port <port>","serving  port").option("-o, --open","open default browser when the server starts").option("-c, --config <path>","path to eodash server and build configuration file").option("--host [IP address]","specify which IP addresses the server should listen on").option("-l, --lib","builds eodash as a web component library").option("--no-lib","builds eodash as an SPA").option("--no-host","do not expose server to the network").parse(process.argv);const i=await J(h.opts(),process.argv?.[2]),c=b(),R=i.publicDir?t.resolve(s,i.publicDir):t.join(s,"./public"),m=t.join(s,"/src"),l=i.runtime?t.resolve(s,i.runtime):t.join(m,"./runtime.js"),g=i.entryPoint?t.resolve(s,i.entryPoint):t.join(m,"/main.js"),w=i.widgets?t.resolve(s,i.widgets):t.join(m,"widgets"),j=t.join(s,"/.eodash"),f=i.outDir?t.resolve(s,i.outDir):t.join(j,"/dist"),z=i.cacheDir?t.resolve(s,i.cacheDir):t.join(j,"cache"),v=P(void 0,{prefix:"[eodash]"});async function J(e,n){let a=e.config?t.resolve(s,e.config):t.join(s,"eodash.config.js"),o={};return u(a)?o=await import(a).then(r=>r.default instanceof Function?r.default():r.default).catch(r=>{console.error(r)}):a=null,{base:e.base??o?.base,port:Number(e.port??o?.[n]?.port),host:e.host??o?.[n]?.host,open:e.open??o?.[n]?.open,cacheDir:e.cacheDir??o?.cacheDir,entryPoint:e.entryPoint??o?.entryPoint,outDir:e.outDir??o?.outDir,publicDir:e.publicDir??o?.publicDir,runtime:e.runtime??o?.runtime,widgets:e.widgets??o?.widgets,lib:e.lib??o?.lib}}function b(e=import.meta.dirname??t.dirname(W(import.meta.url))){if(e?.split("/").length)return u(t.resolve(e,"package.json"))?e:b(t.resolve(e,".."));throw new Error("no package root found from "+e)}const y=`
 <!DOCTYPE html>
 <html lang="en">
 
@@ -17,4 +17,4 @@ ${i.lib?`<eo-dash style="height:100dvh;"/>
 <script type="module" src="${t.resolve(`/@fs/${c}`,"core/client/render.js")}"><\/script>
 `}
 </body>
-</html>`,D=C(({mode:e,command:n})=>({base:i.base??"",cacheDir:R,plugins:[O({customElement:!1,template:{transformAssetUrls:A,compilerOptions:{isCustomElement:a=>!a.includes("v-")&&a.includes("-")}}}),T({autoImport:!0}),e==="development"&&{name:"inject-html",configureServer:J}],customLogger:v,define:{"process.env":{}},resolve:{alias:{"@":t.join(c,"core/client"),"^":t.join(c,"widgets"),"user:config":g,"user:widgets":w},extensions:[".js",".json",".jsx",".mjs",".ts",".tsx",".vue"]},server:{warmup:{clientFiles:[t.join(c,"core/client/**")]},port:i.port??3e3,open:i.open,fs:{allow:[x(process.cwd())]},host:i.host},root:c,optimizeDeps:e==="development"?{include:["webfontloader","vuetify","vue","pinia","stac-js","urijs"],noDiscovery:!0}:{},publicDir:i.publicDir===!1?!1:L,build:{lib:i.lib&&n==="build"&&{entry:t.join(c,"core/client/asWebComponent.js"),fileName:"eo-dash",formats:["es"],name:"@eodash/eodash"},outDir:m,emptyOutDir:!0,rollupOptions:i.lib&&n==="build"?{input:t.join(c,"core/client/asWebComponent.js")}:void 0,target:"esnext"}}));async function J(e){e.watcher.add([g,l,t.join(w,"**/*.vue")]);let n="";const a=v.info;return v.info=(o,r)=>{if(o.includes("core")){const d=o.split("/")[0].split(" ");d.pop();const p=d.join(" ")+" "+n.replace(s,"");return a(p,r)}return a(o,r)},e.watcher.on("change",async o=>{n=o,o===l&&e.hot.send({type:"full-reload",path:o})}),()=>{e.middlewares.use(async(o,r,d)=>{if(o.originalUrl==="/@fs/config.js"||o.originalUrl==="/config.js"){r.statusCode=200,r.setHeader("Content-Type","text/javascript"),u(l)&&await W(l).then(p=>{r.write(p)}),r.end();return}if(o.url?.endsWith(".html")){r.statusCode=200,r.setHeader("Content-Type","text/html");const p=await e.transformIndexHtml(o.url,y,o.originalUrl);r.end(p);return}d()})}}const M=async()=>{const e=await k(await D({mode:"development",command:"serve"}));await e.listen(),e.printUrls(),e.bindCLIShortcuts({print:!0})},Y=async()=>{const e=async()=>{const n=await D({mode:"production",command:"build"});await F(n),u(l)&&await N(l,t.join(m,"config.js"),{recursive:!0}).catch(a=>{console.error(a)})};if(i.lib)await e();else{const n=t.join(c,"/index.html");await I(n,y).then(async()=>{await e(),await $(n).catch(()=>{console.error("failed to remove index.html")})})}};async function B(){(await S({root:s,base:i.base??"",preview:{port:isNaN(i.port)?8080:i.port,open:i.open,host:i.host},build:{outDir:m}})).printUrls()}const G=process.argv?.[2];(async()=>{switch(G){case"dev":await M();break;case"build":await Y();break;case"preview":await B();break;default:console.error("command not found");break}})();
+</html>`,D=C(({mode:e,command:n})=>({base:i.base??"",cacheDir:z,plugins:[N({customElement:!1,template:{transformAssetUrls:A,compilerOptions:{isCustomElement:a=>!a.includes("v-")&&a.includes("-")}}}),O({autoImport:!0}),e==="development"&&{name:"inject-html",configureServer:M}],customLogger:v,define:{"process.env":{}},resolve:{alias:{"@":t.join(c,"core/client"),"^":t.join(c,"widgets"),"user:config":g,"user:widgets":w},extensions:[".js",".json",".jsx",".mjs",".ts",".tsx",".vue"]},server:{warmup:{clientFiles:[t.join(c,"core/client/**")]},port:i.port??3e3,open:i.open,fs:{allow:[x(process.cwd())]},host:i.host},root:c,optimizeDeps:e==="development"?{include:["webfontloader","vuetify","vue","pinia","stac-js","urijs"],noDiscovery:!0}:{},publicDir:i.publicDir===!1?!1:R,build:{lib:i.lib&&n==="build"&&{entry:t.join(c,"core/client/asWebComponent.js"),fileName:"eo-dash",formats:["es"],name:"@eodash/eodash"},outDir:f,emptyOutDir:!0,rollupOptions:i.lib&&n==="build"?{input:t.join(c,"core/client/asWebComponent.js")}:void 0,target:"esnext"}}));async function M(e){e.watcher.add([g,l,t.join(w,"**/*.vue")]);let n="";const a=v.info;return v.info=(o,r)=>{if(o.includes("core")){const d=o.split("/")[0].split(" ");d.pop();const p=d.join(" ")+" "+n.replace(s,"");return a(p,r)}return a(o,r)},e.watcher.on("change",async o=>{n=o,o===l&&e.hot.send({type:"full-reload",path:o})}),()=>{e.middlewares.use(async(o,r,d)=>{if(o.originalUrl==="/@fs/config.js"||o.originalUrl==="/config.js"){r.statusCode=200,r.setHeader("Content-Type","text/javascript"),u(l)&&await I(l).then(p=>{r.write(p)}),r.end();return}if(o.url?.endsWith(".html")){r.statusCode=200,r.setHeader("Content-Type","text/html");const p=await e.transformIndexHtml(o.url,y,o.originalUrl);r.end(p);return}d()})}}const Y=async()=>{const e=await k(await D({mode:"development",command:"serve"}));await e.listen(),e.printUrls(),e.bindCLIShortcuts({print:!0})},B=async()=>{const e=async()=>{const n=await D({mode:"production",command:"build"});await F(n),u(l)&&await L(l,t.join(f,"config.js"),{recursive:!0}).catch(a=>{console.error(a)})};if(i.lib)await e();else{const n=t.join(c,"/index.html");await T(n,y).then(async()=>{await e(),await $(n).catch(()=>{console.error("failed to remove index.html")})})}};async function G(){(await S({root:s,base:i.base??"",preview:{port:isNaN(i.port)?8080:i.port,open:i.open,host:i.host},build:{outDir:f}})).printUrls()}const K=process.argv?.[2];(async()=>{switch(K){case"dev":await Y();break;case"build":await B();break;case"preview":await G();break;default:console.error("command not found");break}})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.2.10",
+  "version": "5.0.0-alpha.2.12",
   "type": "module",
   "types": "./core/client/types.d.ts",
   "files": [
@@ -46,9 +46,9 @@
     "docs:generate": "typedoc --options typedoc.config.json"
   },
   "dependencies": {
-    "@eox/itemfilter": "^0.14.1",
+    "@eox/itemfilter": "^1.0.0",
     "@eox/jsonform": "^0.8.1",
-    "@eox/layercontrol": "0.17.6-dev.2.0",
+    "@eox/layercontrol": "^0.18.1-dev.1721833788.0",
     "@eox/layout": "^0.1.0",
     "@eox/map": "1.9.3-ol-9.2.5-dev.1719634408469.0",
     "@eox/stacinfo": "^0.3.3",
@@ -91,6 +91,9 @@
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.22"
   },
+  "engines": {
+    "node": ">=20.15.1"
+  },
   "bin": {
     "eodash": "./dist/node/cli.js"
   }

package/widgets/EodashDatePicker.vue

@@ -45,6 +45,7 @@ import { useSTAcStore } from "@/store/stac";
 import { datetime } from "@/store/States";
 import { mdiRayStartArrow, mdiRayEndArrow } from "@mdi/js";
 import { extractCollectionUrls } from "@/utils/helpers";
+import axios from "axios";
 
 /**
  * @param {boolean} reverse
@@ -131,9 +132,9 @@ onMounted(() => {
           "#D55E00",
         ];
         for (let idx = 0; idx < collectionUrls.length; idx++) {
-          const stacCollection = await (
-            await fetch(collectionUrls[idx])
-          ).json();
+          const stacCollection = await axios
+            .get(collectionUrls[idx])
+            .then((resp) => resp.data);
           const dates = stacCollection.links
             .filter(
               (/** @type {{ rel: string; datetime: string }} */ item) =>

package/widgets/EodashItemFilter.vue

@@ -1,5 +1,11 @@
 <template>
-  <eox-itemfilter class="fill-height" :config="config" ref="eoxItemFilter">
+  <eox-itemfilter
+    class="fill-height"
+    v-bind="config"
+    ref="eoxItemFilter"
+    style="overflow: auto"
+    @select="onSelect"
+  >
     <h4 slot="filterstitle" style="margin: 14px 8px">{{ filtersTitle }}</h4>
 
     <h4 slot="resultstitle" style="margin: 14px 8px">{{ resultsTitle }}</h4>
@@ -53,7 +59,12 @@ const props = defineProps({
     ],
   },
 });
-
+/** @param {any} evt*/
+const onSelect = async (evt) => {
+  const item = /** @type {import('stac-ts').StacLink} */ evt.detail;
+  await store.loadSelectedSTAC(item.href);
+  console.log(item, store.selectedStac);
+};
 const config = {
   titleProperty: props.titleProperty,
   filterProperties: props.filterProperties,
@@ -81,15 +92,9 @@ onMounted(() => {
   `;
   eoxItemFilter.value?.shadowRoot?.appendChild(style);
 
-  eoxItemFilter.value?.apply(
-    // Only list child elements in list
-    store.stac?.filter((item) => item.rel === "child"),
-  );
-  /** @type {any} */ (eoxItemFilter.value).config.onSelect =
-    /** @param {import('stac-ts').StacLink} item */
-    async (item) => {
-      await store.loadSelectedSTAC(item.href);
-      console.log(item, store.selectedStac);
-    };
+  // Only list child elements in list
+  const items = store.stac?.filter((item) => item.rel === "child");
+  /** @type {any} */
+  (eoxItemFilter.value).items = items;
 });
 </script>

package/widgets/EodashLayerControl.vue

@@ -0,0 +1,18 @@
+<template>
+  <span class="d-flex flex-column fill-height overflow-auto pa-4">
+    <eox-layercontrol ref="eoxLayercontrol" />
+  </span>
+</template>
+<script setup>
+import "@eox/layercontrol";
+import "@eox/jsonform";
+import { onMounted, ref } from "vue";
+import { mapEl } from "@/store/States";
+/** @type { import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+const eoxLayercontrol = ref(null);
+
+onMounted(() => {
+  /** @type{ HTMLElement & Record<string,any> }*/
+  (eoxLayercontrol.value).for = mapEl.value;
+});
+</script>

package/widgets/EodashMap.vue

@@ -7,22 +7,16 @@
 </template>
 <script setup>
 import { transformExtent } from "ol/proj";
-import { inject, onMounted, onUnmounted, reactive, ref, watch } from "vue";
-import { toAbsolute } from "stac-js/src/http.js";
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { EodashCollection } from "@/utils/eodashSTAC";
-import { extractCollectionUrls } from "@/utils/helpers";
-import { eodashKey } from "@/utils/keys";
-import { datetime, mapPosition } from "@/store/States";
+import { extractCollectionUrls, uid } from "@/utils/helpers";
+import { currentUrl, datetime, mapEl, mapPosition } from "@/store/States";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
 import "@eox/map";
 import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
 
-const eodashConfig = /** @type {import("@/types").Eodash} */ (
-  inject(eodashKey)
-);
-
-/** @type {import("vue").Ref<(HTMLElement & Record<string,unknown>) | null>} */
+/** @type {import("vue").Ref<(HTMLElement & Record<string,any>) | null>} */
 const eoxMap = ref(null);
 
 const eoxMapConfig = reactive({
@@ -70,11 +64,6 @@ const handleMoveEnd = (evt) => {
   const map = /** @type {import("openlayers").Map | undefined} */ (
     /** @type {any} */ (evt).map
   );
-  /*
-  const currentProj = map?.getView().getProjection();
-  const transFunc = getTransform(currentProj?.getCode(), 'EPSG:4326');
-  const [x, y] = transFunc(map?.getView().getCenter() ?? [0, 0], undefined, undefined);
-  */
   const [x, y] = map?.getView().getCenter() ?? [0, 0];
   const z = map?.getView().getZoom();
   if (!Number.isNaN(x) && !Number.isNaN(y) && !Number.isNaN(z)) {
@@ -85,6 +74,8 @@ const handleMoveEnd = (evt) => {
 const store = useSTAcStore();
 
 onMounted(() => {
+  mapEl.value = /** @type {HTMLElement & Record<string,any>} */ (eoxMap.value);
+
   /** @type {import('ol/Map').default} */
   (eoxMap.value?.map)?.on("moveend", handleMoveEnd);
 
@@ -94,24 +85,15 @@ onMounted(() => {
     [selectedStac, datetime],
     async ([updatedStac, updatedTime], [previousSTAC, _previousTime]) => {
       if (updatedStac) {
-        const parentCollUrl = toAbsolute(
-          `./${updatedStac.id}/collection.json`,
-          eodashConfig.stacEndpoint,
-        );
         const collectionUrls = extractCollectionUrls(
           selectedStac.value,
-          parentCollUrl,
+          currentUrl.value,
         );
-        /** @type {import("@/utils/eodashSTAC").EodashCollection[]} */
-        const eodashCollections = [];
-        collectionUrls.forEach((cu) => {
-          eodashCollections.push(new EodashCollection(cu));
-        });
-        const uid = function () {
-          return (
-            Date.now().toString(36) + Math.random().toString(36).substring(2)
-          );
-        };
+
+        const eodashCollections = collectionUrls.map(
+          (cu) => new EodashCollection(cu),
+        );
+
         const layersCollection = [];
         const dataLayers = {
           type: "Group",
@@ -120,10 +102,10 @@ onMounted(() => {
             title: "Analysis Layers",
             layerControlExpand: true,
           },
-          layers: /** @type {object[]}*/ ([]),
+          layers: /** @type {Record<string,any>[]}*/ ([]),
         };
-        for (let idx = 0; idx < eodashCollections.length; idx++) {
-          const ec = eodashCollections[idx];
+
+        for (const ec of eodashCollections) {
           let layers;
           if (updatedTime) {
             layers = await ec.createLayersJson(new Date(updatedTime));
@@ -136,55 +118,39 @@ onMounted(() => {
         }
         // Add expand to all analysis layers
         dataLayers.layers.forEach((dl) => {
-          // @ts-expect-error no type definition for eox-map config
           dl.properties.layerControlExpand = true;
-          // @ts-expect-error no type definition for eox-map config
           dl.properties.layerControlToolsExpand = true;
         });
 
         layersCollection.push(dataLayers);
-        // TODO: add base layers and overlays as defined in the top collection / indicator
-        // Probably best also to introduce background and overlay groups
-        // For now adding OSM as background
-        const indicator = new EodashCollection(parentCollUrl);
+        const indicator = new EodashCollection(currentUrl.value);
         const indicatorLayers = await indicator.buildJsonArray(
           // @ts-expect-error we pass a collection instead of an item, we want to reuse the layer extraction logic
           selectedStac.value,
-          false,
-          false,
+          currentUrl.value,
+          selectedStac.value?.title ?? "",
+          selectedStac.value?.endpointtype ?? false,
         );
+
         const baseLayers = {
           type: "Group",
           properties: {
             id: uid(),
             title: "Base Layers",
           },
-          layers: /** @type {object[]}*/ ([]),
-        };
-        const overlayLayers = {
-          type: "Group",
-          properties: {
-            id: uid(),
-            title: "Overlay Layers",
-          },
-          layers: /** @type {object[]}*/ ([]),
+          layers: /** @type {Record<string,any>[]}*/ ([]),
         };
-        if (indicatorLayers && indicatorLayers.length > 0) {
-          baseLayers.layers.push(
-            ...indicatorLayers.filter(
-              // @ts-expect-error group is added by the buildJsonArray
-              (l) => l.properties.group === "baselayer",
-            ),
-          );
+
+        const indicatorBaseLayers = indicatorLayers.filter(
+          (l) => l.properties.group === "baselayer",
+        );
+        if (indicatorBaseLayers.length) {
+          baseLayers.layers.push(...indicatorBaseLayers);
+
           // Add exclusive to baselayers and make sure only one is selected
           baseLayers.layers.forEach((bl) => {
-            // @ts-expect-error no type definition for eox-map config
             bl.properties.layerControlExclusive = true;
           });
-          overlayLayers.layers.push(
-            // @ts-expect-error group is added by the buildJsonArray
-            ...indicatorLayers.filter((l) => l.properties.group === "overlay"),
-          );
         } else {
           // Default to some baselayer
           baseLayers.layers.push({
@@ -192,28 +158,34 @@ onMounted(() => {
             properties: {
               id: "osm",
               title: "Background",
+              layerControlExclusive: true,
             },
             source: {
               type: "OSM",
             },
           });
         }
-        if (baseLayers.layers.length > 0) {
+
+        if (baseLayers.layers.length) {
           layersCollection.push(baseLayers);
         }
-        if (overlayLayers.layers.length > 0) {
-          layersCollection.unshift(overlayLayers);
-        }
 
-        // TODO: we can check if the collection / indicator has a specific
-        //       projection it wants to be displayed in the map we can register
-        //       and set the attribute here, e.g. like following
-        /*
-        (el)?.registerProjection(
-          'EPSG:3031','+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs'
+        const overlayLayers = {
+          type: "Group",
+          properties: {
+            id: uid(),
+            title: "Overlay Layers",
+          },
+          layers: /** @type {Record<string,any>[]}*/ ([]),
+        };
+
+        const indicatorOverlays = indicatorLayers.filter(
+          (l) => l.properties.group === "overlay",
         );
-        (el)?.projection = "EPSG:3031";
-        */
+        if (indicatorOverlays.length) {
+          overlayLayers.layers.push(...indicatorOverlays);
+          layersCollection.unshift(overlayLayers);
+        }
 
         /** @type {any} */
         (eoxMap.value).layers = layersCollection;
@@ -236,7 +208,6 @@ onMounted(() => {
           const reprojExtent = transformExtent(
             sanitizedExtent,
             "EPSG:4326",
-            // @ts-expect-error we should expect to have the view here
             eoxMap.value?.map?.getView().getProjection(),
           );
           /** @type {any} */

package/widgets/ExportState.vue

@@ -88,7 +88,7 @@ const copyBtns = [
 
 const mapStepCode = computed(() => {
   const [x, y, z] = mapPosition.value;
-  const preTag = "### <!--{ layers=";
+  const preTag = "### <!" + "--{ layers=";
   const endTag = `zoom="${z}" center=[${[x, y]}] animationOptions={duration:500}}-->
 #### Tour step title
 Text describing the current step of the tour and why it is interesting what the map shows currently
@@ -98,7 +98,8 @@ Text describing the current step of the tour and why it is interesting what the
 const mapEntryCode = computed(() => {
   const [x, y, z] = mapPosition.value;
   const preTag =
-    '## Map Example <!--{as="eox-map" style="width: 100%; height: 500px;" layers=';
+    "## Map Example <!" +
+    '--{as="eox-map" style="width: 100%; height: 500px;" layers=';
   const endTag = `zoom="${z}" center=[${[x, y]}] }-->`;
   return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
 });