New Release v1.20.0 - #minor

src/api/iframeFeatureEvent.api.js

@@ -0,0 +1,45 @@
+import log from '@/utils/logging.js'
+
+/**
+ * Sends information to the iFrame's parent about features, through the use of the postMessage
+ * HTML/Javascript API.
+ *
+ * @param {LayerFeature[]} features List of features for which we want to send information to the
+ *   iFrame's parent
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
+ */
+export function sendFeatureInformationToIFrameParent(features) {
+    const targetWindow = parent ?? window.parent ?? window.opener ?? window.top
+    if (!targetWindow) {
+        log.debug(
+            'Embed view loaded as root document of a browser tab, cannot communicate with opener/parent'
+        )
+        return
+    }
+    // if no features are given, nothing to do
+    if (!Array.isArray(features) || features.length === 0) {
+        return
+    }
+    log.debug('sending information about selected features to iframe parent')
+    // from what I can understand from the codepen, one event is fired per feature with a structured response
+    features.forEach((feature) => {
+        targetWindow.postMessage(
+            {
+                // see codepen above, for backward compatibility reasons we need to use the same type as mf-geoadmin3
+                type: 'gaFeatureSelection',
+                payload: {
+                    layerId: feature.layer.id,
+                    featureId: feature.id,
+                    // if we want to expose more stuff from our features (EGID, EWID, etc...), it should come here...
+                },
+            },
+            // meaning anyone, any host, can receive this event when adding our app as embedded on their website,
+            // so let's be cautious with what we add to the payload
+            '*'
+        )
+        // mf-geoadmin3 was also sending the same feature in a different unstructured/string format "layerId#featureId"
+        // but this comment here https://github.com/geoadmin/mf-geoadmin3/blob/6a7b99a2cc9980eec27b394ee709305a239549f1/src/components/tooltip/TooltipDirective.js#L661-L668
+        // suggest that this was already to accommodate some legacy support, and was supposed to be removed "soon"
+        // so let's not implement this format in the new viewer and see what happens.
+    })
+}

src/api/layers/AbstractLayer.class.js

@@ -1,3 +1,5 @@
+import { cloneDeep } from 'lodash'
+
 import { InvalidLayerDataError } from '@/api/layers/InvalidLayerData.error'
 
 /**
@@ -121,15 +123,36 @@ export default class AbstractLayer {
         this.isLoading = isLoading
         this.hasDescription = hasDescription
         this.hasLegend = hasLegend
-        this.errorKey = null
+        this.errorKeys = new Set()
         this.hasError = false
         this.timeConfig = timeConfig
         this.hasMultipleTimestamps = this.timeConfig?.timeEntries?.length > 1
     }
 
+    hasErrorKey(key) {
+        return this.errorKeys.has(key)
+    }
+
+    getFirstErrorKey() {
+        return this.errorKeys.values().next().value
+    }
+
+    addErrorKey(key) {
+        this.errorKeys.add(key)
+        this.hasError = true
+    }
+
+    removeErrorKey(key) {
+        this.errorKeys.delete(key)
+        this.hasError = !!this.errorKeys.size
+    }
+
+    clearErrorKeys() {
+        this.errorKeys.clear()
+        this.hasError = false
+    }
+
     clone() {
-        let clone = Object.assign(Object.create(Object.getPrototypeOf(this)), this)
-        clone.attributions = this.attributions.map((attribution) => attribution.clone())
-        return clone
+        return cloneDeep(this)
     }
 }

src/modules/i18n/locales/de.json

@@ -681,5 +681,6 @@
     "3d_vegetation": "Vegetationen",
     "3d_constructions": "Gebäude und Konstruktionen",
     "webmapviewer_live_disclaimer": "Grosse Veränderungen stehen bevor, <a target='_blank' href='https://www.swisstopo.admin.ch/de'>erfahren Sie mehr</a>",
-    "drawing_too_large": "Deine Zeichnung ist zu gross, entferne einige Details."
+    "drawing_too_large": "Deine Zeichnung ist zu gross, entferne einige Details.",
+    "3d_unsupported_projection": "Dieser Datensatz (externe Quelle) kann wegen fehlender Unterstützung der Projektion EPSG:4326 nicht in 3D dargestellt werden"
 }

src/modules/i18n/locales/en.json

@@ -663,7 +663,7 @@
     "operation_successful": "Operation successful!",
     "operation_failed": "Oops! Something went wrong. Please try again.",
     "operation_aborted": "Operation aborted",
-    "outside_valid_year_range": "The entered year is outside ot the available range:",
+    "outside_valid_year_range": "The entered year is outside of the available range:",
     "linkedin_tooltip": "Share this map on LinkedIn",
     "share_map_title": "Link to the geoportal of the Swiss Confederation",
     "link_description": "Link description (optional)",
@@ -681,5 +681,6 @@
     "3d_vegetation": "Vegetations",
     "3d_constructions": "Buildings and constructions",
     "webmapviewer_live_disclaimer": "Big changes are coming soon, <a target='_blank' href='https://www.swisstopo.admin.ch/en'>learn more</a>",
-    "drawing_too_large": "Your drawing is too large, remove some features"
+    "drawing_too_large": "Your drawing is too large, remove some features",
+    "3d_unsupported_projection": "This map provided by external source can't be displayed in 3d because it doesn't support the projection EPSG:4326"
 }

src/modules/i18n/locales/fr.json

@@ -681,5 +681,6 @@
     "3d_vegetation": "Végétations",
     "3d_constructions": "Bâtiments et constructions",
     "webmapviewer_live_disclaimer": "De grands changements sont à venir, <a target='_blank' href='https://www.swisstopo.admin.ch/fr'>en savoir plus</a>",
-    "drawing_too_large": "Ton dessin est trop grand, enlève quelques éléments"
+    "drawing_too_large": "Ton dessin est trop grand, enlève quelques éléments",
+    "3d_unsupported_projection": "La carte ne peut pas être affichées en 3d parce qu'elle ne supporte pas la projection EPSG:4326"
 }

src/modules/i18n/locales/it.json

@@ -681,5 +681,6 @@
     "3d_vegetation": "Vegetazione",
     "3d_constructions": "Edifici e costruzioni",
     "webmapviewer_live_disclaimer": "Grandi cambiamenti in arrivo, <a target='_blank' href='https://www.swisstopo.admin.ch/it'>per saperne di più</a>",
-    "drawing_too_large": "Il tuo disegno è troppo grande, rimuovi alcune caratteristiche"
+    "drawing_too_large": "Il tuo disegno è troppo grande, rimuovi alcune caratteristiche",
+    "3d_unsupported_projection": "La mappa non può essere visualizzata in 3D perché non supporta la proiezione EPSG:4326"
 }

src/modules/i18n/locales/rm.json

@@ -679,5 +679,6 @@
     "3d_vegetation": "Vegietaziun",
     "3d_constructions": "Edifizis ed installaziuns",
     "webmapviewer_live_disclaimer": "Grondas midadas vegnan prest, <a target='_blank' href='https://www.swisstopo.admin.ch/de'>emprender dapli</a>",
-    "drawing_too_large": "Tes dissegn è memia grond, allontanescha intgins detagls"
+    "drawing_too_large": "Tes dissegn è memia grond, allontanescha intgins detagls",
+    "3d_unsupported_projection": "La carta na po betg vegnir mussada en 3D perquai ch'ella na sustegna betg la projecziun EPSG:4326"
 }

src/modules/infobox/InfoboxModule.vue

@@ -66,24 +66,23 @@ function onClose() {
 <template>
     <div v-if="showContainer" class="infobox card rounded-0" data-cy="infobox" @contextmenu.stop>
         <div class="infobox-header card-header d-flex justify-content-end" data-cy="infobox-header">
+            <button class="btn btn-light btn-sm d-flex align-items-center" @click.stop="onPrint">
+                <FontAwesomeIcon icon="print" />
+            </button>
             <button
                 v-if="showTooltipToggle"
                 class="btn btn-light btn-sm d-flex align-items-center"
                 data-cy="infobox-toggle-floating"
                 @click.stop="setTooltipInfoPosition"
             >
-                <FontAwesomeIcon icon="caret-up" />
-            </button>
-            <button class="btn btn-light btn-sm d-flex align-items-center" @click.stop="onPrint">
-                <FontAwesomeIcon icon="print" />
+                <FontAwesomeIcon icon="angles-up" />
             </button>
             <button
                 class="btn btn-light btn-sm d-flex align-items-center"
                 data-cy="infobox-minimize-maximize"
                 @click="onToggleContent"
             >
-                <FontAwesomeIcon v-if="!showContent" icon="window-maximize" />
-                <FontAwesomeIcon v-if="showContent" icon="window-minimize" />
+                <FontAwesomeIcon :icon="`caret-${showContent ? 'down' : 'right'}`" />
             </button>
             <button
                 class="btn btn-light btn-sm d-flex align-items-center"
@@ -100,6 +99,7 @@ function onClose() {
                 v-if="isSelectedFeatureEditable && showFeatureInfoInBottomPanel"
                 :feature="selectedFeature"
                 :read-only="!showDrawingOverlay"
+                class="p-3"
             />
             <FeatureList v-if="!showDrawingOverlay && showFeatureInfoInBottomPanel" />
         </div>

src/modules/infobox/components/FeatureList.vue

@@ -102,17 +102,17 @@ function loadMoreResultForLayer(layerId) {
 <style lang="scss" scoped>
 @import '@/scss/variables.module';
 .feature-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax($overlay-width, 1fr));
-    justify-content: stretch;
-    align-content: stretch;
     &.fluid {
         max-height: 100%;
         overflow: hidden;
     }
     &:not(.fluid) {
         max-height: 33vh;
         overflow-y: auto;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax($overlay-width, 1fr));
+        justify-content: stretch;
+        align-content: stretch;
     }
 }
 </style>

src/modules/infobox/components/FeatureListCategory.vue

@@ -37,7 +37,7 @@ const { t } = useI18n()
 <template>
     <div class="feature-list-category border-start">
         <div
-            class="p-2 sticky-top bg-secondary-subtle border-bottom border-secondary-subtle d-flex"
+            class="p-2 sticky-top bg-secondary-subtle border-bottom border-secondary-subtle d-flex cursor-pointer"
             @click="showContent = !showContent"
         >
             <FontAwesomeIcon :icon="`caret-${showContent ? 'down' : 'right'}`" class="me-2" />

src/modules/infobox/components/FeatureListCategoryItem.vue

@@ -7,8 +7,7 @@ import EditableFeature from '@/api/features/EditableFeature.class'
 import LayerFeature from '@/api/features/LayerFeature.class'
 import FeatureDetail from '@/modules/infobox/components/FeatureDetail.vue'
 import ShowGeometryProfileButton from '@/modules/infobox/components/ShowGeometryProfileButton.vue'
-import { canFeatureShowProfile } from '@/store/modules/features.store.js'
-import { FeatureInfoPositions } from '@/store/modules/ui.store.js'
+import { canFeatureShowProfile } from '@/store/modules/features.store'
 import ZoomToExtentButton from '@/utils/components/ZoomToExtentButton.vue'
 
 const dispatcher = { dispatcher: 'FeatureListCategoryItem.vue' }
@@ -39,7 +38,6 @@ const store = useStore()
 const isHighlightedFeature = computed(
     () => store.state.features.highlightedFeatureId === item.value.id
 )
-const selectedFeaturesCount = computed(() => store.getters.selectedFeatures?.length)
 
 function highlightFeature(feature) {
     store.dispatch('setHighlightedFeatureId', {
@@ -76,34 +74,11 @@ function showContentAndScrollIntoView(event) {
         return false
     }
 }
-
-function forceFeatureInfoAtBottom() {
-    store.dispatch('setFeatureInfoPosition', {
-        position: FeatureInfoPositions.BOTTOMPANEL,
-        ...dispatcher,
-    })
-}
-
-function onShowProfile(event) {
-    showContentAndScrollIntoView(event)
-    // as the profile will be stored at the bottom of the screen, we do not want to have
-    // a floating tooltip while some information are at the bottom, so we force the tooltip down
-    forceFeatureInfoAtBottom()
-}
-
-function onZoomToExtent(event) {
-    showContentAndScrollIntoView(event)
-    // if more than one feature are currently selected, we can't be sure the new extent of the map will
-    // contain all of them, so we switch the feature list to be at the bottom of the screen
-    if (selectedFeaturesCount.value > 0) {
-        forceFeatureInfoAtBottom()
-    }
-}
 </script>
 
 <template>
     <div
-        class="feature-list-category-item-name p-2 align-middle position-relative"
+        class="feature-list-category-item-name p-2 align-middle position-relative cursor-pointer"
         :class="{ highlighted: isHighlightedFeature, 'border-bottom': !showContent }"
         data-cy="feature-item"
         @click="toggleShowContent"
@@ -117,7 +92,7 @@ function onZoomToExtent(event) {
             v-if="item.extent"
             :extent="item.extent"
             class="float-end"
-            @click="onZoomToExtent"
+            @click="showContentAndScrollIntoView"
         />
     </div>
     <div
@@ -130,7 +105,7 @@ function onZoomToExtent(event) {
     >
         <FeatureDetail :feature="item" />
         <div v-if="canDisplayProfile" class="d-grid p-1">
-            <ShowGeometryProfileButton :feature="item" @click="onShowProfile" />
+            <ShowGeometryProfileButton :feature="item" @click="showContentAndScrollIntoView" />
         </div>
     </div>
 </template>

src/modules/map/components/LocationPopup.vue

@@ -11,6 +11,7 @@ import { createShortLink } from '@/api/shortlink.api'
 import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
 import LocationPopupPosition from '@/modules/map/components/LocationPopupPosition.vue'
 import LocationPopupShare from '@/modules/map/components/LocationPopupShare.vue'
+import { MapPopoverMode } from '@/modules/map/components/MapPopover.vue'
 import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
 import log from '@/utils/logging'
 import { stringifyQuery } from '@/utils/url-router'
@@ -159,9 +160,10 @@ function clearClick() {
     <component
         :is="mappingFrameworkSpecificPopup"
         v-if="coordinate"
-        :title="selectedTab == 'position' ? i18n.t('position') : i18n.t('link_bowl_crosshair')"
+        :title="selectedTab === 'position' ? i18n.t('position') : i18n.t('link_bowl_crosshair')"
         :coordinates="coordinate"
         :projection="projection"
+        :mode="MapPopoverMode.FEATURE_TOOLTIP"
         use-content-padding
         class="location-popup"
         data-cy="location-popup"
@@ -201,8 +203,7 @@ function clearClick() {
                     <!-- Italian text does not fit on one line with normal sized text -->
                     <div
                         :class="{
-                            small: currentLang == 'it',
-                            '': currentLang != 'it',
+                            small: currentLang === 'it',
                         }"
                     >
                         {{ i18n.t('link_bowl_crosshair') }} &nbsp;&nbsp;<FontAwesomeIcon