@eodash/eodash 5.1.0 → 5.2.0

package/templates/compare.js

@@ -118,26 +118,6 @@ export default {
           },
         },
     },
-    {
-      defineWidget: (selected) => {
-        return selected
-          ? {
-              id: "Buttons",
-              layout: { x: "8/8/9", y: 0, w: 1, h: 2 },
-              title: "Buttons",
-              type: "internal",
-              widget: {
-                name: "EodashMapBtns",
-                properties: {
-                  compareIndicators: {
-                    fallbackTemplate: "expert",
-                  },
-                },
-              },
-            }
-          : null;
-      },
-    },
     {
       defineWidget: (selectedSTAC) => {
         return selectedSTAC

package/templates/expert.js

@@ -25,6 +25,22 @@ export default {
       name: "EodashMap",
       properties: {
         enableCompare: true,
+        zoomToExtent: true,
+        btns: {
+          enableZoom: true,
+          enableExportMap: true,
+          enableChangeProjection: true,
+          enableCompareIndicators: {
+            fallbackTemplate: "expert",
+          },
+          enableBackToPOIs: true,
+          enableSearch: true,
+        },
+        btnsPosition: {
+          x: "12/9/9",
+          y: 1,
+          gap: 16
+        }
       },
     },
   },
@@ -92,21 +108,6 @@ export default {
           : null;
       },
     },
-    {
-      defineWidget: (selected) => {
-        return selected
-          ? {
-              id: "Buttons",
-              layout: { x: "8/8/9", y: 0, w: 1, h: 2 },
-              title: "Buttons",
-              type: "internal",
-              widget: {
-                name: "EodashMapBtns",
-              },
-            }
-          : null;
-      },
-    },
     {
       defineWidget: (selectedSTAC) =>
         includesProcess(selectedSTAC) && {

package/templates/light.js

@@ -19,12 +19,21 @@ export default {
     },
   },
   background: {
-    id: "background-map",
+    id: "lite-map",
     type: "internal",
     widget: {
       name: "EodashMap",
       properties: {
         enableCompare: true,
+        enableCursorCoordinates: false,
+        enableScaleLine: false,
+        btns: {
+          enableExportMap: false,
+          enableChangeProjection: false,
+          enableCompareIndicators: false,
+          enableBackToPOIs: false,
+          enableSearch: true,
+        },
       },
     },
   },

package/widgets/EodashMap/EodashMapBtns.vue

@@ -0,0 +1,269 @@
+<template>
+  <div ref="rootRef" class="map-buttons d-flex flex-column align-end">
+    <button
+      v-if="enableZoom"
+      class="primary small circle small-elevate"
+      @click="onMapZoomIn"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiPlus" /></svg
+      ></i>
+      <div class="tooltip left">Zoom in</div>
+    </button>
+
+    <button
+      v-if="enableZoom"
+      class="primary small circle small-elevate"
+      @click="onMapZoomOut"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiMinus" /></svg
+      ></i>
+      <div class="tooltip left">Zoom out</div>
+    </button>
+
+    <button
+      v-if="exportMap"
+      class="primary small circle small-elevate"
+      @click="showMapState = !showMapState"
+    >
+      <i class="small"
+        ><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" />
+
+    <button
+      v-if="changeProjection && !!availableMapProjection"
+      class="primary small circle small-elevate"
+      @click="changeMapProjection(availableMapProjection)"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="mdiEarthBox" /></svg
+      ></i>
+      <div class="tooltip left">Change map projection</div>
+    </button>
+    <button
+      v-if="compareIndicators"
+      class="primary small circle small-elevate"
+      @click="onCompareClick"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24"><path :d="compareIcon" /></svg
+      ></i>
+      <div class="tooltip left">Compare mode</div>
+    </button>
+    <button
+      v-if="backToPOIs && (poi || comparePoi)"
+      class="primary small circle small-elevate"
+      @click="loadPOiIndicator()"
+    >
+      <i class="small"
+        ><svg viewBox="0 0 24 24">
+          <path :d="mdiStarFourPointsCircleOutline" /></svg
+      ></i>
+      <div class="tooltip left">Back to POIs</div>
+    </button>
+    <eox-geosearch
+      v-if="mapEl && enableSearch"
+      :for="mapEl"
+      :endpoint="opencageUrl"
+      class="geosearch-detached"
+      label="Search"
+      small
+      button
+      list-direction="left"
+      results-direction="down"
+      tooltip="Search"
+      tooltip-direction="left"
+    ></eox-geosearch>
+    <PopUp
+      v-model="showCompareIndicators"
+      :maxWidth="popupWidth"
+      :width="popupWidth"
+      :max-height="popupHeight"
+      :height="popupHeight"
+    >
+      <EodashItemFilter
+        :enableCompare="true"
+        :enableHighlighting="false"
+        resultType="cards"
+        style="--select-filter-max-items: 8"
+        filters-title="Select an indicator to compare"
+        subTitleProperty="subtitle"
+        imageProperty="thumbnail"
+        aggregateResults="collection_group"
+        results-title=""
+        @select="onSelectCompareIndicator"
+      />
+    </PopUp>
+  </div>
+</template>
+<script setup>
+import { useTransparentPanel } from "@/composables";
+import { changeMapProjection, setActiveTemplate } from "@/store/actions";
+import {
+  activeTemplate,
+  availableMapProjection,
+  comparePoi,
+  mapEl,
+  poi,
+} from "@/store/states";
+import {
+  mdiCompare,
+  mdiCompareRemove,
+  mdiEarthBox,
+  mdiMapPlus,
+  mdiMinus,
+  mdiPlus,
+  mdiStarFourPointsCircleOutline,
+} from "@mdi/js";
+import ExportState from "^/ExportState.vue";
+import { computed, ref, triggerRef } 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 "@eox/geosearch";
+
+const {
+  compareIndicators,
+  changeProjection,
+  exportMap,
+  backToPOIs,
+  enableSearch,
+  enableZoom,
+} = defineProps({
+  exportMap: {
+    type: Boolean,
+    default: true,
+  },
+  changeProjection: {
+    type: Boolean,
+    default: true,
+  },
+  compareIndicators: {
+    /** @type {import("vue").PropType<boolean | {compareTemplate?:string;fallbackTemplate?:string}> }*/
+    type: [Boolean, Object],
+    default: true,
+  },
+  backToPOIs: {
+    type: Boolean,
+    default: true,
+  },
+  enableSearch: {
+    type: Boolean,
+    default: true,
+  },
+  enableZoom: {
+    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 compareIcon = computed(() =>
+  activeTemplate.value ===
+  ((typeof compareIndicators === "object" &&
+    compareIndicators?.compareTemplate) ||
+    "compare")
+    ? mdiCompareRemove
+    : mdiCompare,
+);
+
+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");
+
+.map-buttons button {
+  margin-bottom: 5px;
+  background-color: var(--primary);
+}
+
+/* Container constraints removal */
+eox-geosearch {
+  position: relative !important;
+  overflow: visible !important;
+  z-index: 10;
+}
+</style>

package/widgets/EodashMap/index.vue

@@ -1,45 +1,88 @@
 <template>
-  <eox-map-compare
-    class="fill-height fill-width overflow-none"
-    .enabled="showCompare"
-  >
-    <eox-map
+  <span>
+    <eox-map-compare
       class="fill-height fill-width overflow-none"
-      slot="first"
-      ref="eoxMap"
-      id="main"
-      .animationOptions="animationOptions"
-      .center="initialCenter"
-      .zoom="initialZoom"
-      .layers="eoxMapLayers"
-      .controls="controls"
+      .enabled="showCompare"
     >
-      <eox-map-tooltip
-        :style="mainTooltipStyles"
-        .propertyTransform="tooltipPropertyTransform('main')"
-      />
-    </eox-map>
-    <eox-map
-      class="fill-height fill-width overflow-none"
-      id="compare"
-      slot="second"
-      ref="compareMap"
-      .layers="eoxMapCompareLayers"
+      <eox-map
+        class="fill-height fill-width overflow-none"
+        slot="first"
+        ref="eoxMap"
+        id="main"
+        .animationOptions="animationOptions"
+        .center="initialCenter"
+        .zoom="initialZoom"
+        .layers="eoxMapLayers"
+        .controls="controls"
+      >
+        <eox-map-tooltip
+          :style="mainTooltipStyles"
+          .propertyTransform="tooltipPropertyTransform('main')"
+        />
+      </eox-map>
+      <eox-map
+        class="fill-height fill-width overflow-none"
+        id="compare"
+        slot="second"
+        ref="compareMap"
+        .layers="eoxMapCompareLayers"
+      >
+        <eox-map-tooltip
+          :style="compareTooltipStyles"
+          .propertyTransform="tooltipPropertyTransform('compare')"
+        />
+      </eox-map>
+    </eox-map-compare>
+    <div
+      v-if="enableCursorCoordinates"
+      id="cursor-coordinates"
+      ref="cursor-coords"
+    />
+    <span v-if="enableScaleLine" id="scale-line" ref="scale-line" />
+    <div
+      class="map-buttons-container"
+      :style="`margin: ${btnsPosition.gap}px 0 ${btnsPosition.gap}px 0`"
     >
-      <eox-map-tooltip
-        :style="compareTooltipStyles"
-        .propertyTransform="tooltipPropertyTransform('compare')"
+      <EodashMapBtns
+        :style="{
+          gridColumn: indicator || compareIndicator ? responsiveX : '12',
+          gridRow: responsiveY,
+        }"
+        :exportMap="(indicator || compareIndicator) ? btnsProps.exportMap : false"
+        :changeProjection="
+          (indicator || compareIndicator) ? btnsProps.changeProjection : false
+        "
+        :compareIndicators="
+          (indicator || compareIndicator) ? btnsProps.compareIndicators : false
+        "
+        :backToPOIs="
+          (indicator || compareIndicator) ? btnsProps.backToPOIs : false
+        "
+        :enableSearch="
+          (indicator || compareIndicator) ? btnsProps.enableSearch : false
+        "
+        :enableZoom="
+          (indicator || compareIndicator) ? btnsProps.enableZoom : false
+        "
       />
-    </eox-map>
-  </eox-map-compare>
+    </div>
+  </span>
 </template>
 <script setup>
 import "@eox/map";
 import "@eox/map/src/plugins/advancedLayersAndSources";
-import { computed, onMounted, ref, toRaw } from "vue";
-import { datetime, mapEl, mapPosition, mapCompareEl } from "@/store/states";
+import { computed, onMounted, ref, toRaw, useTemplateRef } from "vue";
+import {
+  datetime,
+  mapEl,
+  mapPosition,
+  mapCompareEl,
+  indicator,
+  compareIndicator,
+} from "@/store/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
+import { useDisplay } from "vuetify";
 import {
   eodashCollections,
   eodashCompareCollections,
@@ -53,6 +96,7 @@ import {
 } from "^/EodashMap/methods";
 import { inAndOut } from "ol/easing.js";
 import mustache from "mustache";
+import EodashMapBtns from "^/EodashMap/EodashMapBtns.vue";
 
 const props = defineProps({
   enableCompare: {
@@ -73,18 +117,118 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  enableCursorCoordinates: {
+    type: Boolean,
+    default: true,
+  },
+  enableScaleLine: {
+    type: Boolean,
+    default: true,
+  },
+  btnsPosition: {
+    type: Object,
+    default: () => ({
+      x: "12/9/10",
+      y: 1,
+      gap: 16,
+    }),
+  },
+  btns: {
+    type: Object,
+    default: () => ({
+      enableExportMap: true,
+      enableChangeProjection: true,
+      enableCompareIndicators: true,
+      enableBackToPOIs: true,
+      enableSearch: true,
+      enableZoom: true,
+    }),
+  },
 });
 
+// Responsive positioning logic
+const { width } = useDisplay();
+
+/**
+ * Parse responsive string values (e.g., "1/5/10") into values for different screen sizes
+ * Breakpoints: [0, 960, 1920] based on properties passed to eox-layout in DashboardLayout.vue
+ * @param {string | number} value
+ * @returns {number}
+ */
+const parseResponsiveValue = (value) => {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parts = value.split("/");
+    const currentWidth = width.value;
+
+    if (currentWidth < 960) {
+      return parseInt(parts[0]) || 1;
+    } else if (currentWidth < 1920) {
+      return parseInt(parts[1] || parts[0]) || 1;
+    } else {
+      return parseInt(parts[2] || parts[1] || parts[0]) || 1;
+    }
+  }
+  return 1;
+};
+
+const responsiveX = computed(() => parseResponsiveValue(props.btnsPosition.x));
+const responsiveY = computed(() => parseResponsiveValue(props.btnsPosition.y));
+const btnsProps = computed(() => ({
+  exportMap: props.btns.enableExportMap ?? true,
+  changeProjection: props.btns.enableChangeProjection ?? true,
+  compareIndicators: props.btns.enableCompareIndicators ?? true,
+  backToPOIs: props.btns.enableBackToPOIs ?? true,
+  enableSearch: props.btns.enableSearch ?? true,
+  enableZoom: props.btns.enableZoom ?? true,
+}));
+
+// Prepare containers for scale line and cursor coordinates
+const scaleLineRef = useTemplateRef("scale-line");
+const cursorCoordsRef = useTemplateRef("cursor-coords");
+
 /** @type {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"], undefined>>} */
 const tooltipProperties = ref([]);
 /** @type {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"], undefined>>} */
 const compareTooltipProperties = ref([]);
-/** @type {import("@eox/map").EOxMap["controls"]} */
-const controls = {
-  Attribution: {
-    collapsible: true,
-  },
-};
+/** @type {import("vue").ComputedRef<{
+  Attribution: { collapsible: boolean };
+  ScaleLine?: { target: HTMLElement };
+  MousePosition?: { projection: string; coordinateFormat: (c: [number, number]) => string; target: HTMLElement };
+}>} */
+const controls = computed(() => {
+  /** @type {{
+    Attribution: { collapsible: boolean };
+    ScaleLine?: { target: HTMLElement };
+    MousePosition?: { projection: string; coordinateFormat: (c: [number, number]) => string; target: HTMLElement };
+  }} */
+  const controlsObj = {
+    Attribution: {
+      collapsible: true,
+    },
+  };
+
+  if (props.enableScaleLine && scaleLineRef.value) {
+    controlsObj.ScaleLine = {
+      target: scaleLineRef.value,
+    };
+  }
+
+  if (props.enableCursorCoordinates && cursorCoordsRef.value) {
+    controlsObj.MousePosition = {
+      projection: "EPSG:4326",
+      coordinateFormat: (/** @type {[number, number]} */ c) => {
+        return `${c[1].toFixed(3)} °N, ${c[0].toFixed(3)} °E`;
+      },
+      target: cursorCoordsRef.value,
+    };
+  }
+
+  return controlsObj;
+});
+
 const initialCenter = toRaw(props.center);
 const initialZoom = toRaw(mapPosition.value?.[2] ?? props.zoom);
 /** @type {import("vue").Ref<Record<string,any>[]>} */
@@ -210,3 +354,74 @@ const tooltipPropertyTransform = (map) => {
   };
 };
 </script>
+
+<style scoped>
+#cursor-coordinates {
+  position: fixed;
+  left: 24px;
+  bottom: 54px; /* Tighter spacing: watermark at 6px + ~48px */
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 11px;
+  font-family: var(--eox-body-font-family);
+  background: #fffe;
+  border-radius: 4px;
+  border: none;
+  padding: 0px 3px;
+  max-height: 24px;
+}
+
+@media (max-width: 959px) {
+  #cursor-coordinates {
+    display: none; /* Hidden in mobile mode */
+  }
+}
+
+#scale-line {
+  position: fixed;
+  left: 24px;
+  bottom: 28px; /* Tighter spacing: watermark at 6px + ~22px */
+  color: #fff;
+}
+
+@media (max-width: 959px) {
+  #scale-line {
+    bottom: 102px; /* Adjusted for mobile bottom nav - closer to coordinates */
+  }
+}
+
+:deep(.ol-scale-line) {
+  background: #fffe !important;
+  border-radius: 4px !important;
+  border: none !important;
+  padding: 0px 3px 3px 3px !important;
+  font-size: 10px !important;
+  font-family: var(--eox-body-font-family);
+  max-height: 20px;
+}
+:deep(.ol-scale-line-inner) {
+  display: flex;
+  justify-content: center;
+  border: 1px solid rgba(0, 0, 0, 0.5) !important;
+  border-top: none !important;
+  color: #333 !important;
+  font-weight: 500 !important;
+  transform: translateY(1px);
+}
+
+.map-buttons-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(12, 1fr);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.map-buttons-container > * {
+  pointer-events: auto;
+}
+</style>