@eodash/eodash 5.4.0 → 5.5.1

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,12 +61,27 @@
     >
       <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"
@@ -96,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";
@@ -112,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 {
@@ -133,6 +154,7 @@ const {
   enableSearch,
   enableZoom,
   searchParams,
+  enableGlobe,
 } = defineProps({
   exportMap: {
     type: Boolean,
@@ -167,22 +189,26 @@ const {
     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,
@@ -197,74 +223,13 @@ 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>

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,7 @@
         "
         :enableZoom="(indicator || compareIndicator || poi) ? btnsProps.enableZoom : false
         "
+        :enableGlobe="(indicator || compareIndicator || poi) ? btnsProps.enableGlobe : false"
         :searchParams="btnsProps.searchParams"
       />
     </div>
@@ -77,6 +78,7 @@ import {
   indicator,
   compareIndicator,
   poi,
+  isGlobe,
 } from "@/store/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
@@ -139,6 +141,7 @@ const props = defineProps({
      * enableSearch?: boolean;
      * searchParams?: object;
      * enableZoom?: boolean;
+     * enableGlobe?: boolean;
      * enableCompareIndicators?: boolean | {
      *   compareTemplate?:string;
      *   fallbackTemplate?:string;
@@ -153,6 +156,7 @@ const props = defineProps({
       enableBackToPOIs: true,
       enableSearch: true,
       enableZoom: true,
+      enableGlobe: true,
       searchParams: {},
     }),
   },
@@ -195,9 +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");
@@ -386,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

@@ -82,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",
@@ -153,7 +153,7 @@ export const createLayersConfig = async (
   }
 
   if (baseLayers.layers.length) {
-    layersCollection.push(baseLayers);
+    layersCollection.unshift(baseLayers);
   }
 
   const overlayLayers = {
@@ -171,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,