BGDIINF_SB-2977 : updates according to comments

src/modules/infobox/FeatureElevationProfilePlotCesiumBridge.vue

@@ -58,6 +58,7 @@ export default {
     },
     unmounted() {
         this.removeTrackingPoint()
+        delete this.removeTrackingPoint()
     },
     methods: {
         addTrackingPoint() {

src/modules/map/components/MapPopover.vue

@@ -1,5 +1,11 @@
 <template>
-    <div ref="mapPopover" class="map-popover" data-cy="popover" @contextmenu.stop>
+    <div
+        ref="mapPopover"
+        class="map-popover"
+        :class="{ cesium: is3DActive }"
+        data-cy="popover"
+        @contextmenu.stop
+    >
         <div class="card">
             <div class="card-header d-flex">
                 <span class="flex-grow-1 align-self-center">
@@ -31,16 +37,31 @@
             </div>
         </div>
     </div>
+    <OpenLayersPopover v-if="!is3DActive" :coordinates="coordinates"></OpenLayersPopover>
+    <CesiumPopover v-if="is3DActive" :coordinates="coordinates"></CesiumPopover>
 </template>
 
 <script>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import promptUserToPrintHtmlContent from '@/utils/print'
+import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
+import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
+import { mapState } from 'vuex'
 
 /** Map popover content and styles. Position handling is done in corresponding library components */
 export default {
-    components: { FontAwesomeIcon },
+    components: { CesiumPopover, OpenLayersPopover, FontAwesomeIcon },
+    provide() {
+        return {
+            onClose: () => this.onClose(),
+            getMapPopoverRef: () => this.getMapPopoverRef(),
+        }
+    },
     props: {
+        coordinates: {
+            type: Array,
+            required: true,
+        },
         authorizePrint: {
             type: Boolean,
             default: false,
@@ -55,6 +76,11 @@ export default {
         },
     },
     emits: ['close'],
+    computed: {
+        ...mapState({
+            is3DActive: (state) => state.ui.showIn3d,
+        }),
+    },
     methods: {
         getMapPopoverRef() {
             return this.$refs.mapPopover
@@ -109,6 +135,10 @@ export default {
         margin-left: -$arrow-border-height;
     }
 }
+.map-popover.cesium {
+    position: absolute;
+    z-index: 1;
+}
 @media (min-height: 600px) {
     .map-popover .card-body {
         max-height: 510px;

src/modules/map/components/cesium/CesiumMap.vue

@@ -24,7 +24,7 @@
                 :z-index="index"
             />
         </div>
-        <CesiumPopover
+        <MapPopover
             v-if="showFeaturesPopover"
             :coordinates="popoverCoordinates"
             authorize-print
@@ -42,7 +42,7 @@
             </template>
             <FeatureEdit v-if="editFeature" :read-only="true" :feature="editFeature" />
             <FeatureList direction="column" />
-        </CesiumPopover>
+        </MapPopover>
     </div>
     <cesium-compass v-show="isDesktopMode" ref="compass"></cesium-compass>
     <slot />
@@ -68,9 +68,8 @@ import {
     Color,
     Math as CesiumMath,
     RequestScheduler,
-    ScreenSpaceEventHandler,
-    Viewer,
     ScreenSpaceEventType,
+    Viewer,
 } from 'cesium'
 import { mapActions, mapGetters, mapState } from 'vuex'
 import CesiumInternalLayer from './CesiumInternalLayer.vue'
@@ -87,7 +86,6 @@ import { ClickInfo, ClickType } from '@/store/modules/map.store'
 import GeoAdminWMSLayer from '@/api/layers/GeoAdminWMSLayer.class'
 import GeoAdminGeoJsonLayer from '@/api/layers/GeoAdminGeoJsonLayer.class'
 import KMLLayer from '@/api/layers/KMLLayer.class'
-import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
 import proj4 from 'proj4'
 import { LV95, WEBMERCATOR, WGS84 } from '@/utils/coordinateSystems'
 import FeatureList from '@/modules/infobox/components/FeatureList.vue'
@@ -102,9 +100,10 @@ import { extractOlFeatureGeodesicCoordinates } from '@/modules/drawing/lib/drawi
 import log from '@/utils/logging'
 import { LineString, Point, Polygon } from 'ol/geom'
 import FeatureEdit from '@/modules/infobox/components/FeatureEdit.vue'
+import MapPopover from '@/modules/map/components/MapPopover.vue'
 
 export default {
-    components: { FeatureEdit, FeatureList, CesiumPopover, CesiumInternalLayer },
+    components: { MapPopover, FeatureEdit, FeatureList, CesiumInternalLayer },
     provide() {
         return {
             // sharing cesium viewer object with children components
@@ -207,9 +206,9 @@ export default {
                         featureCoords[0],
                         featureCoords[1]
                     )
-                    this.viewer.camera.changed.addEventListener(this.onCameraMove)
+                    this.viewer?.camera.changed.addEventListener(this.onCameraMove)
                 } else {
-                    this.viewer.camera.changed.removeEventListener(this.onCameraMove)
+                    this.viewer?.camera.changed.removeEventListener(this.onCameraMove)
                 }
             },
             deep: true,

src/modules/map/components/cesium/CesiumPopover.vue

@@ -1,20 +1,11 @@
 <template>
-    <MapPopover
-        ref="mapPopoverContainer"
-        :authorize-print="authorizePrint"
-        :title="title"
-        :use-content-padding="useContentPadding"
-    >
-        <template #extra-buttons>
-            <slot name="extra-buttons"></slot>
-        </template>
-        <slot></slot>
-    </MapPopover>
+    <div>
+        <slot />
+    </div>
 </template>
 
 <script>
 import { Cartesian2, Cartesian3, Ellipsoid, SceneTransforms } from 'cesium'
-import MapPopover from '@/modules/map/components/MapPopover.vue'
 
 const popup3DCoordScratch = new Cartesian3()
 const popup2DCoordScratch = new Cartesian2()
@@ -24,25 +15,12 @@ const popup2DCoordScratch = new Cartesian2()
  * the content of the popover
  */
 export default {
-    components: { MapPopover },
-    inject: ['getViewer'],
+    inject: ['getViewer', 'onClose', 'getMapPopoverRef'],
     props: {
         coordinates: {
             type: Array,
             required: true,
         },
-        authorizePrint: {
-            type: Boolean,
-            default: false,
-        },
-        title: {
-            type: String,
-            default: '',
-        },
-        useContentPadding: {
-            type: Boolean,
-            default: false,
-        },
     },
     watch: {
         coordinates() {
@@ -70,7 +48,7 @@ export default {
     methods: {
         updatePosition() {
             if (!this.coordinates?.length) {
-                this.$refs.mapPopoverContainer.onClose()
+                this.onClose()
                 return
             }
             const cartesianCoords = Cartesian3.fromDegrees(
@@ -90,7 +68,7 @@ export default {
                     popup2DCoordScratch
                 )
                 if (pixel) {
-                    const mapPopover = this.$refs.mapPopoverContainer.getMapPopoverRef()
+                    const mapPopover = this.getMapPopoverRef()
                     const width = mapPopover.getBoundingClientRect().width
                     mapPopover.style.left = `${pixel.x - width / 2}px`
                     mapPopover.style.top = `${pixel.y + 10}px`
@@ -100,10 +78,3 @@ export default {
     },
 }
 </script>
-
-<style lang="scss" scoped>
-.map-popover {
-    position: absolute;
-    z-index: 1;
-}
-</style>

src/modules/map/components/openlayers/OpenLayersMap.vue

@@ -65,7 +65,7 @@
             :feature="feature"
             :z-index="index + startingZIndexForHighlightedFeatures"
         />
-        <OpenLayersPopover
+        <MapPopover
             v-if="showFeaturesPopover"
             :coordinates="popoverCoordinates"
             authorize-print
@@ -87,7 +87,7 @@
                 :feature="editFeature"
             />
             <FeatureList v-else direction="column" />
-        </OpenLayersPopover>
+        </MapPopover>
         <!-- Adding marker and accuracy circle for Geolocation -->
         <OpenLayersAccuracyCircle
             v-if="geolocationActive"
@@ -118,7 +118,6 @@ import {
 import { extractOlFeatureGeodesicCoordinates } from '@/modules/drawing/lib/drawingUtils'
 import FeatureEdit from '@/modules/infobox/components/FeatureEdit.vue'
 import FeatureList from '@/modules/infobox/components/FeatureList.vue'
-import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
 import OpenLayersVectorLayer from '@/modules/map/components/openlayers/OpenLayersVectorLayer.vue'
 import { ClickInfo, ClickType } from '@/store/modules/map.store'
 import { CrossHairs } from '@/store/modules/position.store'
@@ -141,6 +140,7 @@ import OpenLayersHighlightedFeature from './OpenLayersHighlightedFeature.vue'
 import OpenLayersInternalLayer from './OpenLayersInternalLayer.vue'
 import OpenLayersMarker, { markerStyles } from './OpenLayersMarker.vue'
 import { createGeoJSONFeature } from '@/utils/layerUtils'
+import MapPopover from '@/modules/map/components/MapPopover.vue'
 
 /**
  * Main OpenLayers map component responsible for building the OL map instance and telling the view
@@ -152,14 +152,14 @@ import { createGeoJSONFeature } from '@/utils/layerUtils'
  */
 export default {
     components: {
+        MapPopover,
         FontAwesomeIcon,
         FeatureEdit,
         FeatureList,
         OpenLayersAccuracyCircle,
         OpenLayersHighlightedFeature,
         OpenLayersInternalLayer,
         OpenLayersMarker,
-        OpenLayersPopover,
         OpenLayersVectorLayer,
     },
     provide() {

src/modules/map/components/openlayers/OpenLayersPopover.vue

@@ -1,45 +1,23 @@
 <template>
-    <MapPopover
-        ref="mapPopoverContainer"
-        :authorize-print="authorizePrint"
-        :title="title"
-        :use-content-padding="useContentPadding"
-    >
-        <template #extra-buttons>
-            <slot name="extra-buttons"></slot>
-        </template>
-        <slot></slot>
-    </MapPopover>
+    <div>
+        <slot />
+    </div>
 </template>
 
 <script>
 import Overlay from 'ol/Overlay'
-import MapPopover from '@/modules/map/components/MapPopover.vue'
 
 /**
  * Shows a popover on the map at the given position (coordinates) and with the slot as the content
  * of the popover
  */
 export default {
-    components: { MapPopover },
-    inject: ['getMap'],
+    inject: ['getMap', 'getMapPopoverRef'],
     props: {
         coordinates: {
             type: Array,
             required: true,
         },
-        authorizePrint: {
-            type: Boolean,
-            default: false,
-        },
-        title: {
-            type: String,
-            default: '',
-        },
-        useContentPadding: {
-            type: Boolean,
-            default: false,
-        },
     },
     watch: {
         coordinates(newCoordinates) {
@@ -57,7 +35,7 @@ export default {
         })
     },
     mounted() {
-        this.overlay.setElement(this.$refs.mapPopoverContainer.getMapPopoverRef())
+        this.overlay.setElement(this.getMapPopoverRef())
         this.getMap().addOverlay(this.overlay)
         this.overlay.setPosition(this.coordinates)
     },

src/utils/layerUtils.js

@@ -45,7 +45,11 @@ export function getTimestampFromConfig(config, previewYear) {
 }
 
 /**
- * Creates geoJsonFeature for query
+ * Describes a GeoJSON feature from the backend
+ *
+ * for GeoJSON features, there's a catch as they only provide us with the inner tooltip content
+ * we have to wrap it around the "usual" wrapper from the backend
+ * (not very fancy but otherwise the look and feel is different from a typical backend tooltip)
  *
  * @param feature
  * @param geoJsonLayer
@@ -54,9 +58,6 @@ export function getTimestampFromConfig(config, previewYear) {
  */
 export function createGeoJSONFeature(feature, geoJsonLayer, geometry) {
     const featureGeometry = feature.getGeometry()
-    // for GeoJSON features, there's a catch as they only provide us with the inner tooltip content
-    // we have to wrap it around the "usual" wrapper from the backend
-    // (not very fancy but otherwise the look and feel is different from a typical backend tooltip)
     const geoJsonFeature = new LayerFeature(
         geoJsonLayer,
         geoJsonLayer.getID(),