@eodash/eodash 5.0.0-rc.2.1 → 5.0.0-rc.2.3

package/core/client/components/DashboardLayout.vue

@@ -3,6 +3,7 @@
     <eox-layout :gap="gap" :style="`padding: ${gap}px`">
       <eox-layout-item
         v-if="bgWidget?.component"
+        :key="bgWidget.id"
         class="bg-panel bg-surface"
         :style="`margin: -${gap + 1}px;`"
         x="0"
@@ -10,7 +11,7 @@
         h="12"
         w="12"
       >
-        <Suspense suspensible>
+        <Suspense>
           <component
             id="bg-widget"
             :is="bgWidget?.component"
@@ -30,7 +31,7 @@
             :x="importedWidget.value.layout.x"
             :y="importedWidget.value.layout.y"
           >
-            <Suspense suspensible>
+            <Suspense>
               <component
                 :key="importedWidget.value.id"
                 :is="importedWidget.value.component"

package/core/client/components/DynamicWebComponent.vue

@@ -34,7 +34,7 @@ const props = /** @type {import("@/types").WebComponentProps} */ (
 const getWebComponent = async () =>
   typeof props.link === "string"
     ? await import(/* @vite-ignore */ props.link)
-    : await props.link();
+    : await props.link?.();
 
 const imported = !customElements.get(props.tagName)
   ? await getWebComponent().catch((e) => {
@@ -46,8 +46,15 @@ const defined = customElements.get(props.tagName);
 
 // if the imported link doesn't define the custom tag provided
 if (!defined && props.constructorProp) {
-  const Constructor = imported[props.constructorProp];
-  customElements.define(props.tagName, Constructor);
+  try {
+    const Constructor = imported[props.constructorProp];
+    customElements.define(props.tagName, Constructor);
+  } catch (e) {
+    console.error(
+      `[eodash] ${props.tagName} is not defined, please add a valid link or constructorProp`,
+    );
+    console.error(e);
+  }
 }
 
 const store = useSTAcStore();

package/core/client/components/EodashOverlay.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="eodash-overlay" v-if="$vuetify.display.mdAndUp">
+    <p>
+      <a href="https://github.com/eodash/eodash" target="_blank"
+        >eodash v{{ version }}</a
+      >
+      by
+      <a href="https://eox.at" target="_blank">
+        <img :src="`data:image/svg+xml;base64,${base64Logo}`" height="9px" />
+      </a>
+    </p>
+  </div>
+</template>
+<script setup>
+import { useTheme } from "vuetify/lib/framework.mjs";
+import pkgJson from "../../../package.json";
+const { computedThemes } = useTheme();
+
+const version = pkgJson.version;
+
+const eoxLogo = `<svg width="100%" height="100%" viewBox="0 0 355 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="ink_ext_XXXXXX"><path id="path5076" d="M152.986,40.52l-0.75,-0.019l-0.737,-0.056l-0.725,-0.093l-0.713,-0.127l-0.7,-0.162l-0.7,-0.196l-0.675,-0.228l-0.65,-0.261l-0.65,-0.292l-0.625,-0.319l-0.612,-0.352l-0.588,-0.377l-0.562,-0.407l-0.55,-0.431l-0.538,-0.457l-0.5,-0.481l-0.487,-0.505l-0.45,-0.528l-0.438,-0.55l-0.4,-0.57l-0.375,-0.59l-0.35,-0.609l-0.325,-0.627l-0.287,-0.645l-0.263,-0.66l-0.225,-0.676l-0.2,-0.69l-0.162,-0.704l-0.125,-0.717l-0.1,-0.728l-0.05,-0.739l-0.025,-0.748c0,-8.023 6.512,-14.532 14.537,-14.532c8.038,0 14.538,6.509 14.538,14.532c0,8.036 -6.5,14.544 -14.538,14.544Z" style="fill:none;"/><path id="path5078" d="M165.748,-0.002c-42.009,0 -76.06,18.985 -76.06,42.402c0,13.268 10.921,25.102 28.021,32.875c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.186 16.83,-40.82 45.148,-49.615c-14.687,6.665 -24.923,21.427 -24.923,38.599c0,23.218 18.648,42.046 41.773,42.383c-0.037,0.005 -0.087,0.015 -0.137,0.02c0.263,0 0.512,0.009 0.762,0.009c42.013,0 76.076,-18.984 76.076,-42.412c0,-13.261 -10.937,-25.097 -28.037,-32.871l0.75,0.522l0.736,0.531l0.713,0.543l0.7,0.555l0.687,0.566l0.664,0.578l0.649,0.588l0.625,0.6l0.613,0.609l0.588,0.621l0.574,0.631l0.562,0.643l0.538,0.652l0.513,0.662l0.5,0.672l0.475,0.684l0.449,0.693l0.438,0.703l0.425,0.713l0.387,0.723l0.375,0.73l0.352,0.74l0.336,0.75l0.3,0.76l0.287,0.77l0.264,0.777l0.25,0.787l0.211,0.795l0.188,0.805l0.175,0.812l0.151,0.82l0.125,0.831c2.675,20.19 -16.838,40.825 -45.151,49.619c14.688,-6.665 24.926,-21.426 24.926,-38.614c0,-23.202 -18.65,-42.026 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.526,-0.01 -0.789,-0.01Zm-13.248,11.314c7.817,0 14.25,6.433 14.25,14.25c0,0.001 0,0.001 0,0.001c0,7.817 -6.433,14.249 -14.25,14.249c-7.817,0 -14.25,-6.432 -14.25,-14.249c0,-0.001 0,-0.001 0,-0.001c0,-7.817 6.433,-14.25 14.25,-14.25Z"
+ style="fill:${computedThemes.value["dashboardTheme"].colors["on-secondary"]};fill-rule:nonzero;"/><path id="path5080" d="M213.786,9.529l0.75,0.521l0.738,0.532l0.712,0.544l0.7,0.555l0.688,0.566l0.662,0.577l0.65,0.588l0.625,0.6l0.613,0.61l0.587,0.62l0.575,0.631l0.563,0.643l0.537,0.652l0.513,0.663l0.5,0.672l0.475,0.684l0.45,0.692l0.437,0.703l0.425,0.712l0.388,0.723l0.375,0.731l0.35,0.741l0.337,0.75l0.3,0.76l0.288,0.769l0.262,0.777l0.25,0.786l0.213,0.797l0.187,0.804l0.175,0.812l0.15,0.821l0.125,0.83c2.675,20.19 -16.837,40.825 -45.15,49.619c14.688,-6.665 24.925,-21.426 24.925,-38.614c0,-23.202 -18.65,-42.025 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.525,-0.01 -0.787,-0.01c-42.01,0 -76.062,18.985 -76.062,42.402c0,13.268 10.922,25.103 28.022,32.876c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.187 16.831,-40.82 45.149,-49.615c-14.688,6.665 -24.925,21.426 -24.925,38.598c0,23.218 18.65,42.046 41.775,42.383c-0.038,0.005 -0.088,0.015 -0.138,0.02c0.263,0 0.513,0.01 0.763,0.01c42.012,-0.001 76.075,-18.985 76.075,-42.413c0,-13.261 -10.938,-25.097 -28.038,-32.871Z" style="fill:none;"/><path id="path5082" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0"
+ style="fill:${computedThemes.value["dashboardTheme"].colors["on-secondary"]};fill-rule:nonzero;"/><path id="path5084" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0Z" style="fill:none;"/><path id="path5086" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453"
+ style="fill:${computedThemes.value["dashboardTheme"].colors["on-secondary"]};fill-rule:nonzero;"/><path id="path5088" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453Z" style="fill:none;"/></g></svg>`;
+const base64Logo = btoa(eoxLogo);
+</script>
+<style scoped lang="scss">
+.eodash-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 0.7em;
+  font-weight: bold;
+  background: linear-gradient(
+    181deg,
+    transparent 97%,
+    rgba(var(--v-theme-secondary), 0.5)
+  );
+  z-index: 9999;
+  pointer-events: none;
+  p {
+    position: absolute;
+    bottom: -4px;
+    left: 95px;
+    transform: translate(-50%, -50%);
+    color: rgba(var(--v-theme-on-secondary), 1);
+  }
+  a {
+    pointer-events: all;
+    text-decoration: dashed;
+    color: rgba(var(--v-theme-on-secondary), 1);
+  }
+}
+</style>

package/core/client/components/Footer.vue

@@ -4,23 +4,11 @@
     :height="mdAndDown ? '48px' : 'auto'"
     color="secondary"
     app
-    class="d-flex justify-space-between"
+    class="d-flex justify-end"
   >
     <p class="pt-0 footer-text">
       {{ eodash.brand.footerText ?? "" }}
     </p>
-    <div>
-      <a
-        href="https://github.com/eodash/eodash"
-        class="text-white"
-        target="_blank"
-        >eodash</a
-      >
-      by
-      <a href="https://eox.at" target="_blank" class="text-white">
-        <img :src="`data:image/svg+xml;base64,${base64Logo}`" height="11px" />
-      </a>
-    </div>
   </v-footer>
 </template>
 <script setup>
@@ -40,8 +28,6 @@ const footer = ref(null);
 const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
 
 const { mdAndDown } = useDisplay();
-const eoxLogo = `<svg width="100%" height="100%" viewBox="0 0 355 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="ink_ext_XXXXXX"><path id="path5076" d="M152.986,40.52l-0.75,-0.019l-0.737,-0.056l-0.725,-0.093l-0.713,-0.127l-0.7,-0.162l-0.7,-0.196l-0.675,-0.228l-0.65,-0.261l-0.65,-0.292l-0.625,-0.319l-0.612,-0.352l-0.588,-0.377l-0.562,-0.407l-0.55,-0.431l-0.538,-0.457l-0.5,-0.481l-0.487,-0.505l-0.45,-0.528l-0.438,-0.55l-0.4,-0.57l-0.375,-0.59l-0.35,-0.609l-0.325,-0.627l-0.287,-0.645l-0.263,-0.66l-0.225,-0.676l-0.2,-0.69l-0.162,-0.704l-0.125,-0.717l-0.1,-0.728l-0.05,-0.739l-0.025,-0.748c0,-8.023 6.512,-14.532 14.537,-14.532c8.038,0 14.538,6.509 14.538,14.532c0,8.036 -6.5,14.544 -14.538,14.544Z" style="fill:none;"/><path id="path5078" d="M165.748,-0.002c-42.009,0 -76.06,18.985 -76.06,42.402c0,13.268 10.921,25.102 28.021,32.875c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.186 16.83,-40.82 45.148,-49.615c-14.687,6.665 -24.923,21.427 -24.923,38.599c0,23.218 18.648,42.046 41.773,42.383c-0.037,0.005 -0.087,0.015 -0.137,0.02c0.263,0 0.512,0.009 0.762,0.009c42.013,0 76.076,-18.984 76.076,-42.412c0,-13.261 -10.937,-25.097 -28.037,-32.871l0.75,0.522l0.736,0.531l0.713,0.543l0.7,0.555l0.687,0.566l0.664,0.578l0.649,0.588l0.625,0.6l0.613,0.609l0.588,0.621l0.574,0.631l0.562,0.643l0.538,0.652l0.513,0.662l0.5,0.672l0.475,0.684l0.449,0.693l0.438,0.703l0.425,0.713l0.387,0.723l0.375,0.73l0.352,0.74l0.336,0.75l0.3,0.76l0.287,0.77l0.264,0.777l0.25,0.787l0.211,0.795l0.188,0.805l0.175,0.812l0.151,0.82l0.125,0.831c2.675,20.19 -16.838,40.825 -45.151,49.619c14.688,-6.665 24.926,-21.426 24.926,-38.614c0,-23.202 -18.65,-42.026 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.526,-0.01 -0.789,-0.01Zm-13.248,11.314c7.817,0 14.25,6.433 14.25,14.25c0,0.001 0,0.001 0,0.001c0,7.817 -6.433,14.249 -14.25,14.249c-7.817,0 -14.25,-6.432 -14.25,-14.249c0,-0.001 0,-0.001 0,-0.001c0,-7.817 6.433,-14.25 14.25,-14.25Z" style="fill:#fff;fill-rule:nonzero;"/><path id="path5080" d="M213.786,9.529l0.75,0.521l0.738,0.532l0.712,0.544l0.7,0.555l0.688,0.566l0.662,0.577l0.65,0.588l0.625,0.6l0.613,0.61l0.587,0.62l0.575,0.631l0.563,0.643l0.537,0.652l0.513,0.663l0.5,0.672l0.475,0.684l0.45,0.692l0.437,0.703l0.425,0.712l0.388,0.723l0.375,0.731l0.35,0.741l0.337,0.75l0.3,0.76l0.288,0.769l0.262,0.777l0.25,0.786l0.213,0.797l0.187,0.804l0.175,0.812l0.15,0.821l0.125,0.83c2.675,20.19 -16.837,40.825 -45.15,49.619c14.688,-6.665 24.925,-21.426 24.925,-38.614c0,-23.202 -18.65,-42.025 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.525,-0.01 -0.787,-0.01c-42.01,0 -76.062,18.985 -76.062,42.402c0,13.268 10.922,25.103 28.022,32.876c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.187 16.831,-40.82 45.149,-49.615c-14.688,6.665 -24.925,21.426 -24.925,38.598c0,23.218 18.65,42.046 41.775,42.383c-0.038,0.005 -0.088,0.015 -0.138,0.02c0.263,0 0.513,0.01 0.763,0.01c42.012,-0.001 76.075,-18.985 76.075,-42.413c0,-13.261 -10.938,-25.097 -28.038,-32.871Z" style="fill:none;"/><path id="path5082" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0" style="fill:#fff;fill-rule:nonzero;"/><path id="path5084" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0Z" style="fill:none;"/><path id="path5086" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453" style="fill:#fff;fill-rule:nonzero;"/><path id="path5088" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453Z" style="fill:none;"/></g></svg>`;
-const base64Logo = window.btoa(eoxLogo);
 </script>
 <style scoped>
 .footer-text {

package/core/client/components/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app-bar color="primary">
-    <v-app-bar-title>{{ title }}</v-app-bar-title>
+    <v-app-bar-title class="header">{{ title }}</v-app-bar-title>
     <v-img class="mx-12 logo" :src="eodash.brand?.logo" />
   </v-app-bar>
 </template>

package/core/client/components/MobileLayout.vue

@@ -4,6 +4,7 @@
       <component
         id="bg-widget"
         v-if="bgWidget?.component"
+        :key="bgWidget.id"
         :is="bgWidget.component"
         v-bind="bgWidget.props"
       ></component>

package/core/client/composables/DefineTemplate.js

@@ -47,11 +47,22 @@ const useTemplate = () => {
         }
 
         const templateConfig = eodash.templates[template];
-        [definedTemplate.bgWidget] = useDefineWidgets([
+        const [importedBgWidget] = useDefineWidgets([
           templateConfig.background,
         ]);
+        if (importedBgWidget.value.id !== definedTemplate.bgWidget.value?.id) {
+          definedTemplate.bgWidget.value = importedBgWidget.value;
+        }
+
+        const [importedLoadingWidget] = useDefineWidgets([
+          templateConfig.loading,
+        ]);
 
-        [definedTemplate.loading] = useDefineWidgets([templateConfig.loading]);
+        if (
+          importedLoadingWidget.value.id !== definedTemplate.loading.value?.id
+        ) {
+          definedTemplate.loading.value = importedLoadingWidget.value;
+        }
 
         definedTemplate.importedWidgets = useDefineWidgets(
           templateConfig.widgets,

package/core/client/composables/DefineWidgets.js

@@ -111,11 +111,16 @@ const getWidgetDefinition = (config) => {
   switch (config?.type) {
     case "internal":
       importedWidget.component = defineAsyncComponent({
-        loader:
-          internalWidgets[
+        loader: () => {
+          const widgetName =
             /** @type {import("@/types").InternalComponentWidget} * */ (config)
-              ?.widget.name
-          ],
+              ?.widget.name;
+
+          return (
+            internalWidgets[widgetName]?.() ??
+            Promise.reject(`Widget ${widgetName} not found`)
+          );
+        },
         suspensible: true,
       });
       importedWidget.props = reactive(

package/core/client/composables/EodashMap.js

@@ -106,7 +106,7 @@ const createLayersConfig = async (
     await EodashCollection.getIndicatorLayers(selectedIndicator);
   const geodbLayer = EodashCollection.getGeoDBLayer(eodashCols);
   if (geodbLayer) {
-    dataLayers.layers.push(geodbLayer);
+    dataLayers.layers.unshift(geodbLayer);
   }
   const baseLayers = {
     type: "Group",
@@ -377,3 +377,4 @@ export const useUpdateTooltipProperties = (eodashCols, tooltipProperties) => {
     log.debug("Updated tooltip properties", tooltipProperties.value);
   });
 };
+

package/core/client/eodash.js

@@ -10,16 +10,27 @@ import { reactive } from "vue";
 export const eodash = reactive({
   id: "demo",
   stacEndpoint:
-    // "https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json",
+    "https://esa-eodash.github.io/RACE-catalog/RACE/catalog.json",
     // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
     // "https://eodashcatalog.eox.at/samplecatalog/samples/catalog.json",
     // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
     // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
     // "https://gtif-cerulean.github.io/deside-catalog/deside/catalog.json",
-    "https://gtif-cerulean.github.io/cerulean-catalog/cerulean/catalog.json",
+    // "https://gtif-cerulean.github.io/cerulean-catalog/cerulean/catalog.json",
+    // "https://gtif-austria.github.io/public-catalog/GTIF-Austria/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
+    font: {
+      headers: {
+        family: "Open Sans",
+        link: "https://eox.at/fonts/opensans/opensans.css",
+      },
+      body: {
+        family: "Sintony",
+        link: "https://eox.at/fonts/sintony/sintony.css",
+      },
+    },
     theme: {
       colors: {
         primary: "#002742",
@@ -64,7 +75,7 @@ export const eodash = reactive({
         },
       },
       background: {
-        id: Symbol(),
+        id: "background-map",
         type: "internal",
         widget: {
           name: "EodashMap",
@@ -186,7 +197,7 @@ export const eodash = reactive({
         },
       },
       background: {
-        id: Symbol(),
+        id: "background-map",
         type: "internal",
         widget: {
           name: "EodashMap",
@@ -237,10 +248,6 @@ export const eodash = reactive({
                   type: "internal",
                   widget: {
                     name: "EodashStacInfo",
-                    properties: {
-                      showIndicatorsBtn: false,
-                      showLayoutSwitcher: false,
-                    },
                   },
                 }
               : null;
@@ -252,7 +259,7 @@ export const eodash = reactive({
               ? {
                   id: "Datepicker",
                   type: "internal",
-                  layout: { x: 5, y: 8, w: 2, h: 4 },
+                  layout: { x: 5, y: 11, w: 2, h: 1 },
                   title: "Date",
                   widget: {
                     name: "EodashDatePicker",
@@ -288,7 +295,7 @@ export const eodash = reactive({
                   id: "Processes",
                   type: "internal",
                   title: "Processes",
-                  layout: { x: 9, y: 7, w: 3, h: 5 },
+                  layout: { x: 9, y: 6, w: 3, h: 5 },
                   widget: {
                     name: "EodashProcess",
                   },
@@ -315,7 +322,7 @@ export const eodash = reactive({
         },
       },
       background: {
-        id: Symbol(),
+        id: "background-map",
         type: "internal",
         widget: {
           name: "EodashMap",

package/core/client/eodashSTAC/EodashCollection.js

@@ -17,6 +17,7 @@ import {
 import { createLayersFromAssets, createLayersFromLinks } from "./createLayers";
 import axios from "@/plugins/axios";
 import log from "loglevel";
+import { dataThemesBrands } from "@/utils/states";
 
 export class EodashCollection {
   #collectionUrl = "";
@@ -407,46 +408,80 @@ export class EodashCollection {
         continue;
       }
       const collectionFeatures = generateFeatures(
-        collection.#collectionStac?.links,
+        JSON.parse(JSON.stringify(collection.#collectionStac?.links)),
+        {
+          collection_id: collection.#collectionStac?.id,
+          geoDBID: collection.#collectionStac?.geoDBID,
+          themes: collection.#collectionStac?.themes ?? [],
+        },
       ).features;
+
       if (collectionFeatures.length) {
-        allFeatures.push(
-          generateFeatures(collection.#collectionStac?.links).features,
-        );
+        allFeatures.push(collectionFeatures);
       }
     }
-    if (allFeatures.length) {
-      const featureCollection = {
-        type: "FeatureCollection",
-        crs: {
-          type: "name",
-          properties: {
-            name: "EPSG:4326",
-          },
-        },
-        features: allFeatures.flat(),
-      };
-      return {
-        type: "Vector",
+    if (!allFeatures.length) {
+      return null;
+    }
+
+    const featureCollection = {
+      type: "FeatureCollection",
+      crs: {
+        type: "name",
         properties: {
-          id: "geodb-collection",
-          title: "GeoDB Collection",
-        },
-        source: {
-          type: "Vector",
-          url: "data:," + encodeURIComponent(JSON.stringify(featureCollection)),
-          format: "GeoJSON",
+          name: "EPSG:4326",
         },
-        style: {
-          "circle-radius": 5,
-          "circle-fill-color": "#00417077",
-          "circle-stroke-color": "#004170",
-          "fill-color": "#00417077",
-          "stroke-color": "#004170",
-        },
-        interactions: [],
-      };
-    }
-    return null;
+      },
+      features: allFeatures.flat(),
+    };
+    return {
+      type: "Vector",
+      properties: {
+        id: "geodb-collection",
+        title: "Observation Points",
+      },
+      source: {
+        type: "Vector",
+        url: "data:," + encodeURIComponent(JSON.stringify(featureCollection)),
+        format: "GeoJSON",
+      },
+      style: (() => {
+        // generate flat style rules for each theme
+        /** @param {*} theme */
+        const generateIconSrc = (theme) => {
+          const svgString = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 70 70">
+              <circle cx="35" cy="35" r="30" stroke="white" fill="${theme.color}" stroke-width="4"/>
+              <path d="${theme.icon}" fill="#fff" transform="translate(19.5, 20) scale(1.3) "/>
+            </svg>
+            `;
+          return `data:image/svg+xml,${encodeURIComponent(svgString)}`;
+        };
+
+        return [
+          ...Object.keys(dataThemesBrands).map((theme, idx) => {
+            return {
+              ...(idx !== 0 && { else: true }),
+              filter: ["==", ["get", "themes", 0], theme],
+              style: {
+                //@ts-expect-error string index
+                "icon-src": generateIconSrc(dataThemesBrands[theme]),
+              },
+            };
+          }),
+          {
+            else: true,
+            style: {
+              "circle-radius": 10,
+              "circle-fill-color": "#00417077",
+              "circle-stroke-color": "#004170",
+              "fill-color": "#0417077",
+              "stroke-color": "#004170",
+            },
+          },
+        ];
+      })(),
+      interactions: [],
+    };
   }
 }

package/core/client/eodashSTAC/createLayers.js

@@ -36,6 +36,7 @@ export async function createLayersFromAssets(
   let geoTIFFIdx = null;
   // let geoJsonLayers = [];
   let geoJsonIdx = 0;
+  let geoJsonAttributions = [];
 
   const geoJsonSources = [];
   let geoJsonRoles = {};
@@ -50,6 +51,8 @@ export async function createLayersFromAssets(
     if (assets[ast]?.type === "application/geo+json") {
       geoJsonSources.push(assets[ast].href);
       geoJsonIdx = idx;
+      if (assets[ast].attribution)
+        geoJsonAttributions.push(assets[ast].attribution);
       extractRoles(geoJsonRoles, assets[ast]);
     } else if (assets[ast]?.type === "application/vnd.flatgeobuf") {
       const assetId = createAssetID(collectionId, item.id, idx);
@@ -61,6 +64,7 @@ export async function createLayersFromAssets(
           type: "FlatGeoBuf",
           url: assets[ast].href,
           format: "GeoJSON",
+          attributions: assets[ast].attribution,
         },
         properties: {
           id: assetId,
@@ -74,11 +78,12 @@ export async function createLayersFromAssets(
           }),
         },
         ...(!style?.variables && { style }),
+        interactions: [],
       };
       // add tooltip interaction if style has tooltip
       if (style?.tooltip) {
-        // @ts-expect-error no type for eox-map layer
         layer.interactions = [
+          // @ts-expect-error no type for eox-map layer
           {
             type: "select",
             options: {
@@ -98,9 +103,18 @@ export async function createLayersFromAssets(
       layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
 
       jsonArray.push(layer);
+      const layer2 = structuredClone(layer)
+      // temporary solution to avoid selection of the same layer
+      // to be removed
+      layer2.interactions = []
+      layer2.properties.id = layer2.properties.id + "_selection"
+      jsonArray.push(layer2)
     } else if (assets[ast]?.type === "image/tiff") {
       geoTIFFIdx = idx;
-      geoTIFFSources.push({ url: assets[ast].href });
+      geoTIFFSources.push({
+        url: assets[ast].href,
+        attributions: assets[ast].attribution,
+      });
     }
   }
 
@@ -114,6 +128,7 @@ export async function createLayersFromAssets(
         type: "Vector",
         url: await mergeGeojsons(geoJsonSources),
         format: "GeoJSON",
+        attributions: geoJsonAttributions,
       },
       properties: {
         ...geoJsonRoles,
@@ -227,6 +242,7 @@ export const createLayersFromLinks = async (
         tileGrid: {
           tileSize,
         },
+        attributions: wmsLink.attribution,
         params: {
           LAYERS: wmsLink["wms:layers"],
           TILED: true,
@@ -297,6 +313,7 @@ export const createLayersFromLinks = async (
           tileGrid: {
             tileSize: [128, 128],
           },
+          attributions: wmtsLink.attribution,
           dimensions: dimensionsWithoutStyle,
         },
       };
@@ -322,6 +339,7 @@ export const createLayersFromLinks = async (
           tileGrid: {
             tileSize: [512, 512],
           },
+          attributions: wmtsLink.attribution,
           dimensions: dimensionsWithoutStyle,
         },
       };
@@ -359,6 +377,7 @@ export const createLayersFromLinks = async (
         type: "XYZ",
         url: xyzLink.href,
         projection: projectionCode,
+        attributions: xyzLink.attribution,
       },
     };
 

package/core/client/eodashSTAC/helpers.js

@@ -3,8 +3,11 @@ import axios from "@/plugins/axios";
 import log from "loglevel";
 import { getStyleVariablesState } from "./triggers.js";
 
-/** @param {import("stac-ts").StacLink[]} [links] */
-export function generateFeatures(links) {
+/**
+ *  @param {import("stac-ts").StacLink[]} [links]
+ *  @param {Record<string,any>} [extraProperties]
+ **/
+export function generateFeatures(links, extraProperties = {}) {
   /**
    * @type {import("geojson").Feature[]}
    */
@@ -20,7 +23,7 @@ export function generateFeatures(links) {
           type: "Point",
           coordinates: [lon, lat],
         },
-        properties: { id: element.id },
+        properties: { ...element, ...extraProperties },
       });
     }
   });
@@ -115,9 +118,8 @@ export const extractRoles = (properties, linkOrAsset) => {
     if (role === "overlay" || role === "baselayer") {
       properties.group = role;
     }
-
-    return properties;
   });
+  return properties;
 };
 
 /**

package/core/client/types.ts

@@ -14,7 +14,7 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
    *   import maps are not available in runtime config
    *   :::
    */
-  link: T extends "runtime" ? string : string | (() => Promise<unknown>);
+  link?: T extends "runtime" ? string : string | (() => Promise<unknown>);
   /**
    * Exported Constructor, needs to be provided if the web component is not
    * registered in by the [link](#link) provided
@@ -194,7 +194,15 @@ export type StacEndpoint = `${string}/catalog.json`;
 
 /** @group Eodash */
 type ExecutionTime = "runtime" | "compiletime";
-
+type EodashFont = {
+  /**
+   * Link to stylesheet that defines font-face. Could be either a relative
+   * or absolute URL.
+   */
+  link?: string;
+  /** Font family name. */
+  family: string;
+};
 /**
  * Eodash instance API
  *
@@ -212,15 +220,12 @@ export type Eodash<T extends ExecutionTime = "compiletime"> = {
     /** Custom error message to alert the users if something crashes */
     errorMessage?: string;
     /** Fetches the specified font family from the specified `link` property. */
-    font?: {
-      /**
-       * Link to stylesheet that defines font-face. Could be either a relative
-       * or absolute URL.
-       */
-      link: string;
-      /** Font family name. */
-      family: string;
-    };
+    font?:
+      | EodashFont
+      | {
+          body: EodashFont;
+          headers: EodashFont;
+        };
     /** Title that will be shown in the app header */
     name: string;
     /** Brand logo */
@@ -320,8 +325,8 @@ export declare const store: typeof import("@/store").default;
 export * from "./main.js";
 
 export type EodashStyleJson = import("ol/style/webgl.js").WebGLStyle & {
-  variables?: Record<string, any>;
-  legend?: Record<string, any>;
+  variables?: Record<string, string | number | boolean | null | undefined>;
+  legend?: import("@eox/layercontrol/src/components/layer-config.js").EOxLayerControlLayerConfig["layerConfig"]["legend"];
   jsonform?: Record<string, any>;
   tooltip?: { id: string; title?: string; appendix?: string }[];
 };