@eodash/eodash 5.3.3 → 5.5.0

package/widgets/EodashMap/EodashMapBtns.vue

@@ -1,24 +1,24 @@
 <template>
   <div ref="rootRef" class="map-buttons d-flex flex-column align-end">
     <button
-      v-if="enableZoom"
+      v-if="enableZoom && !isGlobe"
       class="primary small circle small-elevate"
       @click="onMapZoomIn"
     >
       <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiPlus" /></svg
-      ></i>
+        ><svg viewBox="0 0 24 24"><path :d="mdiPlus" /></svg>
+      </i>
       <div class="tooltip left">Zoom in</div>
     </button>
 
     <button
-      v-if="enableZoom"
+      v-if="enableZoom && !isGlobe"
       class="primary small circle small-elevate"
       @click="onMapZoomOut"
     >
       <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiMinus" /></svg
-      ></i>
+        ><svg viewBox="0 0 24 24"><path :d="mdiMinus" /></svg>
+      </i>
       <div class="tooltip left">Zoom out</div>
     </button>
 
@@ -28,8 +28,8 @@
       @click="showMapState = !showMapState"
     >
       <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiMapPlus" /></svg
-      ></i>
+        ><svg viewBox="0 0 24 24"><path :d="mdiMapPlus" /></svg>
+      </i>
       <div class="tooltip left">Extract storytelling configuration</div>
     </button>
     <ExportState v-if="exportMap" v-model="showMapState" />
@@ -40,18 +40,18 @@
       @click="changeMapProjection(availableMapProjection)"
     >
       <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="mdiEarthBox" /></svg
-      ></i>
+        ><svg viewBox="0 0 24 24"><path :d="mdiEarthBox" /></svg>
+      </i>
       <div class="tooltip left">Change map projection</div>
     </button>
     <button
-      v-if="compareIndicators"
+      v-if="compareIndicators && !isGlobe"
       class="primary small circle small-elevate"
-      @click="onCompareClick"
+      @click="onCompareClick(compareIndicators)"
     >
       <i class="small"
-        ><svg viewBox="0 0 24 24"><path :d="compareIcon" /></svg
-      ></i>
+        ><svg viewBox="0 0 24 24"><path :d="compareIcon" /></svg>
+      </i>
       <div class="tooltip left">Compare mode</div>
     </button>
     <button
@@ -61,14 +61,30 @@
     >
       <i class="small"
         ><svg viewBox="0 0 24 24">
-          <path :d="mdiStarFourPointsCircleOutline" /></svg
-      ></i>
+          <path :d="mdiStarFourPointsCircleOutline" />
+        </svg>
+      </i>
       <div class="tooltip left">Back to POIs</div>
     </button>
+    <button
+      v-if="enableGlobe && !isInCompareMode"
+      class="primary small circle small-elevate"
+      @click="switchGlobe"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24">
+          <path :d="mdiEarth" />
+        </svg>
+      </i>
+      <div class="tooltip left">
+        {{ isGlobe ? "switch to 2D" : "switch to 3D" }}
+      </div>
+    </button>
     <eox-geosearch
-      v-if="mapEl && enableSearch"
+      v-if="mapEl && !isGlobe && enableSearch"
       :for="mapEl"
       :endpoint="opencageUrl"
+      :params="searchParams"
       class="geosearch-detached"
       label="Search"
       small
@@ -95,11 +111,12 @@
 </template>
 <script setup>
 import { useTransparentPanel } from "@/composables";
-import { changeMapProjection, setActiveTemplate } from "@/store/actions";
+import { changeMapProjection } from "@/store/actions";
 import {
   activeTemplate,
   availableMapProjection,
   comparePoi,
+  isGlobe,
   mapEl,
   poi,
 } from "@/store/states";
@@ -111,17 +128,22 @@ import {
   mdiMinus,
   mdiPlus,
   mdiStarFourPointsCircleOutline,
+  mdiEarth,
 } from "@mdi/js";
 import ExportState from "^/ExportState.vue";
-import { computed, ref, triggerRef } from "vue";
+import { computed, ref } from "vue";
 import PopUp from "^/PopUp.vue";
 import EodashItemFilter from "^/EodashItemFilter.vue";
 import { useDisplay } from "vuetify";
-import { useSTAcStore } from "@/store/stac";
-import { storeToRefs } from "pinia";
 import { loadPOiIndicator } from "^/EodashProcess/methods/handling";
-import { easeOut } from "ol/easing.js";
-
+import {
+  onCompareClick,
+  onSelectCompareIndicator,
+  switchGlobe,
+  onMapZoomOut,
+  onMapZoomIn,
+  showCompareIndicators,
+} from "./methods/btns";
 import "@eox/geosearch";
 
 const {
@@ -131,6 +153,8 @@ const {
   backToPOIs,
   enableSearch,
   enableZoom,
+  searchParams,
+  enableGlobe,
 } = defineProps({
   exportMap: {
     type: Boolean,
@@ -157,26 +181,34 @@ const {
     type: Boolean,
     default: true,
   },
+  searchParams: {
+    type: [Boolean, Object],
+    default: true,
+  },
   enableZoom: {
     type: Boolean,
     default: true,
   },
+  enableGlobe: {
+    type: Boolean,
+    default: true,
+  },
 });
-const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
-const { resetSelectedCompareSTAC } = useSTAcStore();
+
 const { smAndDown } = useDisplay();
 const popupWidth = computed(() => (smAndDown.value ? "80%" : "70%"));
 const popupHeight = computed(() => (smAndDown.value ? "90%" : "70%"));
 
 const showMapState = ref(false);
-const showCompareIndicators = ref(false);
+const isInCompareMode = computed(
+  () =>
+    activeTemplate.value ===
+    ((typeof compareIndicators === "object" &&
+      compareIndicators?.compareTemplate) ||
+      "compare"),
+);
 const compareIcon = computed(() =>
-  activeTemplate.value ===
-  ((typeof compareIndicators === "object" &&
-    compareIndicators?.compareTemplate) ||
-    "compare")
-    ? mdiCompareRemove
-    : mdiCompare,
+  isInCompareMode.value ? mdiCompareRemove : mdiCompare,
 );
 const itemFilterConfig = {
   enableHighlighting: false,
@@ -191,83 +223,31 @@ const itemFilterConfig = {
     compareIndicators.itemFilterConfig),
 };
 
-const onCompareClick = () => {
-  showCompareIndicators.value =
-    activeTemplate.value !==
-    ((typeof compareIndicators === "object" &&
-      compareIndicators.compareTemplate) ||
-      "compare");
-
-  const fallbackTemplate =
-    (typeof compareIndicators === "object" &&
-      compareIndicators.fallbackTemplate) ||
-    "expert";
-  selectedCompareStac.value = null;
-  resetSelectedCompareSTAC();
-  setActiveTemplate(fallbackTemplate);
-  triggerRef(selectedStac);
-};
-
 /** @type {import("vue").Ref<HTMLDivElement|null>} */
 const rootRef = ref(null);
 
-const onSelectCompareIndicator = () => {
-  const compareTemplate =
-    (typeof compareIndicators === "object" &&
-      compareIndicators.compareTemplate) ||
-    "compare";
-  setActiveTemplate(compareTemplate);
-  showCompareIndicators.value = !showCompareIndicators.value;
-};
-
 useTransparentPanel(rootRef);
 
-const onMapZoomOut = () => {
-  const map = mapEl.value?.map;
-  const currentZoom = map?.getView().getZoom();
-  if (currentZoom !== undefined && currentZoom !== null) {
-    const view = map?.getView();
-
-    if (view !== undefined && view.getZoom()) {
-      view.animate({
-        zoom: currentZoom - 1,
-        duration: 250,
-        easing: easeOut,
-      });
-    }
-  }
-};
-
-const onMapZoomIn = () => {
-  const map = mapEl.value?.map;
-  const currentZoom = map?.getView().getZoom();
-  if (currentZoom !== undefined && currentZoom !== null) {
-    const view = map?.getView();
-
-    if (view !== undefined && view.getZoom()) {
-      view.animate({
-        zoom: currentZoom + 1,
-        duration: 250,
-        easing: easeOut,
-      });
-    }
-  }
-};
 const opencageApiKey = process.env.EODASH_OPENCAGE || "NO_KEY_FOUND";
 const opencageUrl = `https://api.opencagedata.com/geocode/v1/json?key=${opencageApiKey}`;
-
-/*const menu = document
-  .querySelector("eox-geosearch")
-  .renderRoot.querySelector("menu");*/
 </script>
 
 <style scoped>
 @import url("@eox/ui/style.css");
+/* Make sure panel does pass click event through */
+.map-buttons {
+  pointer-events: none !important;
+}
 
 .map-buttons button {
+  pointer-events: auto !important;
   margin-bottom: 5px;
   background-color: var(--primary);
 }
+/* Make sure buttons have pointer event */
+.geosearch-detached {
+  pointer-events: auto !important;
+}
 
 /* Container constraints removal */
 eox-geosearch {

package/widgets/EodashMap/index.vue

@@ -46,7 +46,7 @@
       <!-- prettier-ignore -->
       <EodashMapBtns
         :style="{
-          gridColumn: (indicator || compareIndicator || poi) ? responsiveX : '12',
+          gridColumn: (indicator || compareIndicator || poi) && !isGlobe ? responsiveX : '12',
           gridRow: responsiveY,
         }"
         :exportMap="(indicator || compareIndicator || poi) ? btnsProps.exportMap : false"
@@ -60,6 +60,8 @@
         "
         :enableZoom="(indicator || compareIndicator || poi) ? btnsProps.enableZoom : false
         "
+        :enableGlobe="(indicator || compareIndicator || poi) ? btnsProps.enableGlobe : false"
+        :searchParams="btnsProps.searchParams"
       />
     </div>
   </span>
@@ -76,6 +78,7 @@ import {
   indicator,
   compareIndicator,
   poi,
+  isGlobe,
 } from "@/store/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
@@ -136,7 +139,9 @@ const props = defineProps({
      * enableChangeProjection?: boolean;
      * enableBackToPOIs?: boolean;
      * enableSearch?: boolean;
+     * searchParams?: object;
      * enableZoom?: boolean;
+     * enableGlobe?: boolean;
      * enableCompareIndicators?: boolean | {
      *   compareTemplate?:string;
      *   fallbackTemplate?:string;
@@ -151,6 +156,8 @@ const props = defineProps({
       enableBackToPOIs: true,
       enableSearch: true,
       enableZoom: true,
+      enableGlobe: true,
+      searchParams: {},
     }),
   },
 });
@@ -192,8 +199,13 @@ const btnsProps = computed(() => ({
   backToPOIs: props.btns.enableBackToPOIs ?? true,
   enableSearch: props.btns.enableSearch ?? true,
   enableZoom: props.btns.enableZoom ?? true,
+  enableGlobe: props.btns.enableGlobe ?? true,
+  searchParams: props.btns.searchParams,
 }));
 
+if (btnsProps.value.enableGlobe) {
+  await import("@eox/map/src/plugins/globe");
+}
 // Prepare containers for scale line and cursor coordinates
 const scaleLineRef = useTemplateRef("scale-line");
 const cursorCoordsRef = useTemplateRef("cursor-coords");
@@ -382,7 +394,7 @@ onMounted(() => {
   left: 24px;
   bottom: 54px; /* Tighter spacing: watermark at 6px + ~48px */
   color: rgba(0, 0, 0, 0.9);
-  font-size: 11px;
+  font-size: 10px;
   font-family: var(--eox-body-font-family);
   background: #fffe;
   border-radius: 4px;

package/widgets/EodashMap/methods/btns.js

@@ -0,0 +1,155 @@
+import { getLayers, setActiveTemplate } from "@/store/actions";
+import { useSTAcStore } from "@/store/stac";
+import { activeTemplate, isGlobe, mapEl } from "@/store/states";
+import { easeOut } from "ol/easing.js";
+import { storeToRefs } from "pinia";
+import { ref } from "vue";
+import { triggerRef } from "vue";
+
+export const switchGlobe = () => {
+  if (!mapEl.value) {
+    return;
+  }
+  if (!isGlobe.value) {
+    mapEl.value.layers = addCorsAnonym([...getLayers()]);
+  }
+  mapEl.value.projection = isGlobe.value ? "EPSG:3857" : "globe";
+  if (isGlobe.value) {
+    showAllPanels();
+  } else hideAllPanels();
+  isGlobe.value = !isGlobe.value;
+};
+
+function hideAllPanels() {
+  const allPanels = document.querySelectorAll(
+    "eox-layout-item:not([class='bg-panel'])",
+  );
+  allPanels.forEach((panel) => {
+    if (!panel || !(panel instanceof HTMLElement)) {
+      return;
+    }
+    panel.style.display = "none";
+  });
+}
+function showAllPanels() {
+  const allPanels = document.querySelectorAll(
+    "eox-layout-item:not([class='bg-panel'])",
+  );
+  allPanels.forEach((panel) => {
+    if (!panel || !(panel instanceof HTMLElement)) {
+      return;
+    }
+    panel.style.display = "";
+  });
+}
+/**
+ *
+ * @param {import("@eox/map").EoxLayer[]} layers
+ * @return {import("@eox/map").EoxLayer[]}
+ */
+function addCorsAnonym(layers) {
+  //@ts-expect-error todo
+  return layers.map((layer) => {
+    if (layer.type === "Group") {
+      layer.layers = addCorsAnonym([...(layer.layers ?? [])]);
+      return layer;
+    }
+    // check if not mapbox style as a fix for ts error
+    if (layer.type === "MapboxStyle") {
+      return layer;
+    }
+
+    return {
+      ...layer,
+      ...(layer.source && {
+        source: {
+          ...layer.source,
+          crossOrigin: "anonymous",
+        },
+        ...(layer.sources && {
+          sources: layer.sources.map((source) => ({
+            ...source,
+            crossOrigin: "anonymous",
+          })),
+        }),
+      }),
+    };
+  });
+}
+
+export const onMapZoomOut = () => {
+  const map = mapEl.value?.map;
+  const currentZoom = map?.getView().getZoom();
+  if (currentZoom !== undefined && currentZoom !== null) {
+    const view = map?.getView();
+
+    if (view !== undefined && view.getZoom()) {
+      view.animate({
+        zoom: currentZoom - 1,
+        duration: 250,
+        easing: easeOut,
+      });
+    }
+  }
+};
+
+export const onMapZoomIn = () => {
+  const map = mapEl.value?.map;
+  const currentZoom = map?.getView().getZoom();
+  if (currentZoom !== undefined && currentZoom !== null) {
+    const view = map?.getView();
+
+    if (view !== undefined && view.getZoom()) {
+      view.animate({
+        zoom: currentZoom + 1,
+        duration: 250,
+        easing: easeOut,
+      });
+    }
+  }
+};
+
+export const showCompareIndicators = ref(false);
+/**
+ *
+ * @param {boolean | {
+ * compareTemplate?:string;
+ * fallbackTemplate?:string;
+ * itemFilterConfig?:Partial<InstanceType<import("./EodashItemFilter.vue").default>["$props"]>
+ * }} compareIndicators
+ */
+export const onSelectCompareIndicator = (compareIndicators) => {
+  const compareTemplate =
+    (typeof compareIndicators === "object" &&
+      compareIndicators.compareTemplate) ||
+    "compare";
+  setActiveTemplate(compareTemplate);
+  showCompareIndicators.value = !showCompareIndicators.value;
+};
+
+/**
+ *
+ * @param {boolean | {
+ * compareTemplate?:string;
+ * fallbackTemplate?:string;
+ * itemFilterConfig?:Partial<InstanceType<import("./EodashItemFilter.vue").default>["$props"]>
+ * }} compareIndicators
+ */
+export const onCompareClick = (compareIndicators) => {
+  const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
+  const { resetSelectedCompareSTAC } = useSTAcStore();
+  showCompareIndicators.value =
+    activeTemplate.value !==
+    ((typeof compareIndicators === "object" &&
+      compareIndicators.compareTemplate) ||
+      "compare");
+
+  const fallbackTemplate =
+    (typeof compareIndicators === "object" &&
+      compareIndicators.fallbackTemplate) ||
+    "expert";
+  selectedCompareStac.value = null;
+  resetSelectedCompareSTAC();
+  setActiveTemplate(fallbackTemplate);
+  triggerRef(selectedStac);
+};

package/widgets/EodashMap/methods/create-layers-config.js

@@ -52,6 +52,29 @@ export const createLayersConfig = async (
     dataLayers.layers.push(...layers);
   }
 
+  /* check for roles in indicator links to assign visibility property for the data layers */
+  if (selectedIndicator?.links) {
+    const visibilityLinks = selectedIndicator.links.filter(
+      (link) =>
+        Array.isArray(link.roles) &&
+        (link.roles.includes("disable") || link.roles.includes("hidden")),
+    );
+    if (visibilityLinks.length > 0) {
+      visibilityLinks.forEach((vl) => {
+        const targetLayerId = vl.id;
+        const targetLayer = dataLayers.layers.find(
+          (dl) => dl.properties.id.split(";:;")[0] === targetLayerId,
+        );
+        if (targetLayer) {
+          if (Array.isArray(vl.roles) && vl.roles.includes("disable")) {
+            targetLayer.properties.visible = false;
+          } else if (Array.isArray(vl.roles) && vl.roles.includes("hidden")) {
+            targetLayer.properties.layerControlHide = true;
+          }
+        }
+      });
+    }
+  }
   layersCollection.push(dataLayers);
   const indicatorLayers =
     //@ts-expect-error indicator is collection
@@ -59,7 +82,7 @@ export const createLayersConfig = async (
   const observationPointsLayer =
     EodashCollection.getObservationPointsLayer(eodashCols);
   if (observationPointsLayer) {
-    dataLayers.layers.unshift(observationPointsLayer);
+    dataLayers.layers.push(observationPointsLayer);
   }
   const baseLayers = {
     type: "Group",
@@ -130,7 +153,7 @@ export const createLayersConfig = async (
   }
 
   if (baseLayers.layers.length) {
-    layersCollection.push(baseLayers);
+    layersCollection.unshift(baseLayers);
   }
 
   const overlayLayers = {
@@ -148,7 +171,7 @@ export const createLayersConfig = async (
 
   if (indicatorOverlays.length) {
     overlayLayers.layers.push(...indicatorOverlays);
-    layersCollection.unshift(overlayLayers);
+    layersCollection.push(overlayLayers);
   }
 
   return layersCollection;

package/widgets/EodashMap/methods/index.js

@@ -8,6 +8,7 @@ import { isFirstLoad } from "@/utils/states";
 import { useEmitLayersUpdate, useOnLayersUpdate } from "@/composables";
 import { mapPosition } from "@/store/states";
 import { sanitizeBbox } from "@/eodashSTAC/helpers";
+import { transformExtent } from "@eox/map";
 /**
  * Holder for previous compare map view as it is overwritten by sync
  * @type { import("ol").View | null} mapElement
@@ -201,7 +202,7 @@ export const useInitMap = (
             const b = updatedStac.extent?.spatial.bbox[0];
             const sanitizedExtent = sanitizeBbox([...b]);
 
-            const reprojExtent = mapElement.value?.transformExtent(
+            const reprojExtent = transformExtent(
               sanitizedExtent,
               "EPSG:4326",
               mapElement.value?.map?.getView().getProjection(),

package/widgets/EodashProcess/ProcessList.vue

@@ -25,8 +25,8 @@
               >{{
                 new Date(item.job_start_datetime).toISOString().slice(0, 16)
               }}
-              <v-icon>mdi-open-in-new</v-icon></a
-            >
+              <v-icon :icon="[mdiOpenInNew]" />
+            </a>
           </td>
           <td>{{ item.status }}</td>
           <td style="padding: 0px">
@@ -73,7 +73,6 @@
   </div>
 </template>
 <script setup>
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   mdiUploadBox,
   mdiDownloadBox,