From 7ef9136f7453a80df3ff243e030a147934fd15dd Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Fri, 13 Dec 2024 11:51:38 +0100
Subject: [PATCH] PB-1204 : split CesiumMap component into multiple sub-parts

with the same logic/approach that we had with the OpenLayers counterpart, leaving only the responsibility to create and share the Cesium instance to the main component, and giving all others (interactions, layer management, feature highlighting) to sub-components.
---
 .../constants.js => config/cesium.config.js}  |   0
 .../map/components/cesium/CesiumCamera.vue    | 180 +++++
 .../cesium/CesiumHighlightedFeatures.vue      | 119 +++
 .../components/cesium/CesiumInteractions.vue  | 131 ++++
 .../map/components/cesium/CesiumMap.vue       | 715 ++++--------------
 .../components/cesium/CesiumMouseTracker.vue  |   3 +-
 .../utils/addPrimitiveFromOLLayer.mixins.js   |   2 +-
 tests/cypress/tests-e2e/3d/navigation.cy.js   |   5 +-
 8 files changed, 570 insertions(+), 585 deletions(-)
 rename src/{modules/map/components/cesium/constants.js => config/cesium.config.js} (100%)
 create mode 100644 src/modules/map/components/cesium/CesiumCamera.vue
 create mode 100644 src/modules/map/components/cesium/CesiumHighlightedFeatures.vue
 create mode 100644 src/modules/map/components/cesium/CesiumInteractions.vue

diff --git a/src/modules/map/components/cesium/constants.js b/src/config/cesium.config.js
similarity index 100%
rename from src/modules/map/components/cesium/constants.js
rename to src/config/cesium.config.js
diff --git a/src/modules/map/components/cesium/CesiumCamera.vue b/src/modules/map/components/cesium/CesiumCamera.vue
new file mode 100644
index 000000000..d7d7a6643
--- /dev/null
+++ b/src/modules/map/components/cesium/CesiumCamera.vue
@@ -0,0 +1,180 @@
+<script setup>
+import { Cartesian2, Cartesian3, defined, Ellipsoid, Math as CesiumMath } from 'cesium'
+import { isEqual } from 'lodash'
+import proj4 from 'proj4'
+import { computed, inject, onBeforeUnmount, onMounted, watch } from 'vue'
+import { useStore } from 'vuex'
+
+import {
+    CAMERA_MAX_PITCH,
+    CAMERA_MAX_ZOOM_DISTANCE,
+    CAMERA_MIN_PITCH,
+    CAMERA_MIN_ZOOM_DISTANCE,
+} from '@/config/cesium.config'
+import {
+    calculateHeight,
+    limitCameraCenter,
+    limitCameraPitchRoll,
+} from '@/modules/map/components/cesium/utils/cameraUtils'
+import { LV95, WGS84 } from '@/utils/coordinates/coordinateSystems'
+import log from '@/utils/logging'
+import { wrapDegrees } from '@/utils/numberUtils'
+
+const dispatcher = {
+    dispatcher: 'useCesiumCamera.composable',
+}
+
+const getViewer = inject('getViewer')
+
+const store = useStore()
+const cameraPosition = computed(() => store.state.position.camera)
+
+onMounted(() => {
+    initCamera()
+})
+onBeforeUnmount(() => {
+    const viewer = getViewer()
+    if (viewer) {
+        // the camera position that is for now dispatched to the store doesn't correspond where the 2D
+        // view is looking at, as if the camera is tilted, its position will be over swaths of lands that
+        // have nothing to do with the top-down 2D view.
+        // here we ray trace the coordinate of where the camera is looking at, and send this "target"
+        // to the store as the new center
+        setCenterToCameraTarget(viewer, store)
+    }
+})
+
+watch(cameraPosition, flyToPosition, {
+    flush: 'post',
+    deep: true,
+})
+
+function flyToPosition() {
+    try {
+        if (getViewer()) {
+            log.debug(
+                `[Cesium] Fly to camera position ${cameraPosition.value.x}, ${cameraPosition.value.y}, ${cameraPosition.value.z}`
+            )
+            getViewer().camera.flyTo({
+                destination: Cartesian3.fromDegrees(
+                    cameraPosition.value.x,
+                    cameraPosition.value.y,
+                    cameraPosition.value.z
+                ),
+                orientation: {
+                    heading: CesiumMath.toRadians(cameraPosition.value.heading),
+                    pitch: CesiumMath.toRadians(cameraPosition.value.pitch),
+                    roll: CesiumMath.toRadians(cameraPosition.value.roll),
+                },
+                duration: 1,
+            })
+        }
+    } catch (error) {
+        log.error('[Cesium] Error while moving the camera', error, cameraPosition.value)
+    }
+}
+
+function setCenterToCameraTarget() {
+    const viewer = getViewer()
+    if (!viewer) {
+        return
+    }
+    const ray = viewer.camera.getPickRay(
+        new Cartesian2(
+            Math.round(viewer.scene.canvas.clientWidth / 2),
+            Math.round(viewer.scene.canvas.clientHeight / 2)
+        )
+    )
+    const cameraTarget = viewer.scene.globe.pick(ray, viewer.scene)
+    if (defined(cameraTarget)) {
+        const cameraTargetCartographic = Ellipsoid.WGS84.cartesianToCartographic(cameraTarget)
+        const lat = CesiumMath.toDegrees(cameraTargetCartographic.latitude)
+        const lon = CesiumMath.toDegrees(cameraTargetCartographic.longitude)
+        store.dispatch('setCenter', {
+            center: proj4(WGS84.epsg, store.state.position.projection.epsg, [lon, lat]),
+            ...dispatcher,
+        })
+    }
+}
+
+function onCameraMoveEnd() {
+    const viewer = getViewer()
+    if (!viewer) {
+        return
+    }
+    const camera = viewer.camera
+    const position = camera.positionCartographic
+    const newCameraPosition = {
+        x: parseFloat(CesiumMath.toDegrees(position.longitude).toFixed(6)),
+        y: parseFloat(CesiumMath.toDegrees(position.latitude).toFixed(6)),
+        z: parseFloat(position.height.toFixed(1)),
+        // Wrap degrees, cesium might return 360, which is internally wrapped to 0 in store.
+        heading: wrapDegrees(parseFloat(CesiumMath.toDegrees(camera.heading).toFixed(0))),
+        pitch: wrapDegrees(parseFloat(CesiumMath.toDegrees(camera.pitch).toFixed(0))),
+        roll: wrapDegrees(parseFloat(CesiumMath.toDegrees(camera.roll).toFixed(0))),
+    }
+    if (!isEqual(newCameraPosition, cameraPosition.value)) {
+        store.dispatch('setCameraPosition', {
+            position: newCameraPosition,
+            ...dispatcher,
+        })
+    }
+}
+
+function initCamera() {
+    const viewer = getViewer()
+    let destination
+    let orientation
+    if (cameraPosition.value) {
+        // a camera position was already define in the URL, we use it
+        log.debug('[Cesium] Existing camera position found at startup, using', cameraPosition.value)
+        destination = Cartesian3.fromDegrees(
+            cameraPosition.value.x,
+            cameraPosition.value.y,
+            cameraPosition.value.z
+        )
+        orientation = {
+            heading: CesiumMath.toRadians(cameraPosition.value.heading),
+            pitch: CesiumMath.toRadians(cameraPosition.value.pitch),
+            roll: CesiumMath.toRadians(cameraPosition.value.roll),
+        }
+    } else {
+        // no camera position was ever calculated, so we create one using the 2D coordinates
+        log.debug(
+            '[Cesium] No camera initial position defined, creating one using 2D coordinates',
+            store.getters.centerEpsg4326
+        )
+        destination = Cartesian3.fromDegrees(
+            store.getters.centerEpsg4326[0],
+            store.getters.centerEpsg4326[1],
+            calculateHeight(store.getters.resolution, viewer.canvas.clientWidth)
+        )
+        orientation = {
+            heading: -CesiumMath.toRadians(store.state.position.rotation),
+            pitch: -CesiumMath.PI_OVER_TWO,
+            roll: 0,
+        }
+    }
+
+    const sscController = viewer.scene.screenSpaceCameraController
+    sscController.minimumZoomDistance = CAMERA_MIN_ZOOM_DISTANCE
+    sscController.maximumZoomDistance = CAMERA_MAX_ZOOM_DISTANCE
+
+    viewer.scene.postRender.addEventListener(limitCameraCenter(LV95.getBoundsAs(WGS84).flatten))
+    viewer.scene.postRender.addEventListener(
+        limitCameraPitchRoll(CAMERA_MIN_PITCH, CAMERA_MAX_PITCH, 0.0, 0.0)
+    )
+
+    viewer.camera.flyTo({
+        destination,
+        orientation,
+        duration: 0,
+    })
+
+    viewer.camera.moveEnd.addEventListener(onCameraMoveEnd)
+}
+</script>
+
+<template>
+    <slot />
+</template>
diff --git a/src/modules/map/components/cesium/CesiumHighlightedFeatures.vue b/src/modules/map/components/cesium/CesiumHighlightedFeatures.vue
new file mode 100644
index 000000000..dda3c0f61
--- /dev/null
+++ b/src/modules/map/components/cesium/CesiumHighlightedFeatures.vue
@@ -0,0 +1,119 @@
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { LineString, Point, Polygon } from 'ol/geom'
+import { computed, inject, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
+
+import FeatureEdit from '@/modules/infobox/components/FeatureEdit.vue'
+import FeatureList from '@/modules/infobox/components/FeatureList.vue'
+import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
+import {
+    highlightGroup,
+    unhighlightGroup,
+} from '@/modules/map/components/cesium/utils/highlightUtils'
+import { FeatureInfoPositions } from '@/store/modules/ui.store'
+
+const dispatcher = {
+    dispatcher: 'CesiumHighlightedFeatures.vue',
+}
+
+const popoverCoordinates = ref([])
+
+const getViewer = inject('getViewer')
+
+const store = useStore()
+const projection = computed(() => store.state.position.projection)
+const selectedFeatures = computed(() => store.getters.selectedFeatures)
+const isFeatureInfoInTooltip = computed(() => store.getters.showFeatureInfoInTooltip)
+const showFeaturesPopover = computed(
+    () => isFeatureInfoInTooltip.value && selectedFeatures.value.length > 0
+)
+const editFeature = computed(() => selectedFeatures.value.find((feature) => feature.isEditable))
+
+watch(
+    selectedFeatures,
+    (newSelectedFeatures) => {
+        if (newSelectedFeatures.length > 0) {
+            highlightSelectedFeatures()
+        }
+    },
+    {
+        deep: true,
+    }
+)
+
+onMounted(() => {
+    if (selectedFeatures.value.length > 0) {
+        highlightSelectedFeatures()
+    }
+})
+
+function highlightSelectedFeatures() {
+    const viewer = getViewer()
+    if (!viewer) {
+        return
+    }
+    const [firstFeature] = selectedFeatures.value
+    const geometries = selectedFeatures.value.map((f) => {
+        // GeoJSON and KML layers have different geometry structure
+        if (!f.geometry.type) {
+            let type
+            if (f.geometry instanceof Polygon) {
+                type = 'Polygon'
+            } else if (f.geometry instanceof LineString) {
+                type = 'LineString'
+            } else if (f.geometry instanceof Point) {
+                type = 'Point'
+            }
+            const coordinates = f.geometry.getCoordinates()
+            return {
+                type,
+                coordinates,
+            }
+        }
+        return f.geometry
+    })
+    highlightGroup(viewer, geometries)
+    popoverCoordinates.value = Array.isArray(firstFeature.coordinates[0])
+        ? firstFeature.coordinates[firstFeature.coordinates.length - 1]
+        : firstFeature.coordinates
+}
+function onPopupClose() {
+    const viewer = getViewer()
+    if (viewer) {
+        unhighlightGroup(viewer)
+        store.dispatch('clearAllSelectedFeatures', dispatcher)
+        store.dispatch('clearClick', dispatcher)
+    }
+}
+function setBottomPanelFeatureInfoPosition() {
+    store.dispatch('setFeatureInfoPosition', {
+        position: FeatureInfoPositions.BOTTOMPANEL,
+        ...dispatcher,
+    })
+}
+</script>
+
+<template>
+    <CesiumPopover
+        v-if="showFeaturesPopover"
+        :coordinates="popoverCoordinates"
+        :projection="projection"
+        authorize-print
+        :use-content-padding="!!editFeature"
+        @close="onPopupClose"
+    >
+        <template #extra-buttons>
+            <button
+                class="btn btn-sm btn-light d-flex align-items-center"
+                data-cy="toggle-floating-off"
+                @click="setBottomPanelFeatureInfoPosition()"
+                @mousedown.stop=""
+            >
+                <FontAwesomeIcon icon="angles-down" />
+            </button>
+        </template>
+        <FeatureEdit v-if="editFeature" :read-only="true" :feature="editFeature" />
+        <FeatureList />
+    </CesiumPopover>
+</template>
diff --git a/src/modules/map/components/cesium/CesiumInteractions.vue b/src/modules/map/components/cesium/CesiumInteractions.vue
new file mode 100644
index 000000000..18cfeaf76
--- /dev/null
+++ b/src/modules/map/components/cesium/CesiumInteractions.vue
@@ -0,0 +1,131 @@
+<script setup>
+import { Cartesian2, Cartographic, ScreenSpaceEventType } from 'cesium'
+import proj4 from 'proj4'
+import { computed, inject, onMounted } from 'vue'
+import { useStore } from 'vuex'
+
+import { extractOlFeatureGeodesicCoordinates } from '@/api/features/features.api'
+import GeoAdminGeoJsonLayer from '@/api/layers/GeoAdminGeoJsonLayer.class'
+import GPXLayer from '@/api/layers/GPXLayer.class'
+import KMLLayer from '@/api/layers/KMLLayer.class'
+import { unhighlightGroup } from '@/modules/map/components/cesium/utils/highlightUtils'
+import { ClickInfo, ClickType } from '@/store/modules/map.store'
+import { WEBMERCATOR, WGS84 } from '@/utils/coordinates/coordinateSystems'
+import { identifyGeoJSONFeatureAt } from '@/utils/identifyOnVectorLayer'
+import log from '@/utils/logging'
+
+const dispatcher = { dispatcher: 'CesiumInteractions.vue' }
+
+const getViewer = inject('getViewer')
+
+const store = useStore()
+const projection = computed(() => store.state.position.projection)
+const resolution = computed(() => store.getters.resolution)
+const visibleLayers = computed(() => store.getters.visibleLayers)
+const visiblePrimitiveLayers = computed(() =>
+    visibleLayers.value.filter(
+        (l) => l instanceof GeoAdminGeoJsonLayer || l instanceof KMLLayer || l instanceof GPXLayer
+    )
+)
+
+onMounted(() => {
+    const viewer = getViewer()
+    if (viewer) {
+        viewer.screenSpaceEventHandler.setInputAction(onClick, ScreenSpaceEventType.LEFT_CLICK)
+        viewer.screenSpaceEventHandler.setInputAction(
+            onContextMenu,
+            ScreenSpaceEventType.RIGHT_CLICK
+        )
+    }
+})
+
+function getCoordinateAtScreenCoordinate(x, y) {
+    const cartesian = getViewer()?.scene.pickPosition(new Cartesian2(x, y))
+    let coordinates = []
+    if (cartesian) {
+        const cartCoords = Cartographic.fromCartesian(cartesian)
+        coordinates = proj4(WGS84.epsg, projection.value.epsg, [
+            (cartCoords.longitude * 180) / Math.PI,
+            (cartCoords.latitude * 180) / Math.PI,
+        ])
+    } else {
+        log.error('no coordinate found at this screen coordinates', [x, y])
+    }
+    return coordinates
+}
+
+function onClick(event) {
+    const viewer = getViewer()
+    unhighlightGroup(viewer)
+    const features = []
+    let coordinates = getCoordinateAtScreenCoordinate(event.position.x, event.position.y)
+
+    let objects = viewer.scene.drillPick(event.position)
+    const kmlFeatures = {}
+    // if there is a GeoJSON layer currently visible, we will find it and search for features under the mouse cursor
+    visiblePrimitiveLayers.value
+        .filter((l) => l instanceof GeoAdminGeoJsonLayer)
+        .forEach((geoJSonLayer) => {
+            features.push(
+                ...identifyGeoJSONFeatureAt(
+                    geoJSonLayer,
+                    [event.position.x, event.position.y],
+                    projection.value,
+                    resolution.value
+                )
+            )
+        })
+    visiblePrimitiveLayers.value
+        .filter((l) => l instanceof KMLLayer)
+        .forEach((KMLLayer) => {
+            objects
+                .filter((obj) => obj.primitive?.olLayer?.get('id') === KMLLayer.id)
+                .forEach((obj) => {
+                    const feature = obj.primitive.olFeature
+                    if (!kmlFeatures[feature.getId()]) {
+                        const editableFeature = feature.get('editableFeature')
+                        if (editableFeature) {
+                            editableFeature.geodesicCoordinates =
+                                extractOlFeatureGeodesicCoordinates(feature)
+                            editableFeature.geometry = feature.getGeometry()
+                            kmlFeatures[feature.getId()] = editableFeature
+                        } else {
+                            // TODO
+                            log.debug(
+                                'KMLs which are not editable Features are not supported for selection'
+                            )
+                        }
+                    }
+                })
+            features.push(...Object.values(kmlFeatures))
+        })
+    // Cesium can't pick position when click on primitive
+    if (!coordinates.length && features.length) {
+        const featureCoords = Array.isArray(features[0].coordinates[0])
+            ? features[0].coordinates[0]
+            : features[0].coordinates
+        coordinates = proj4(projection.value.epsg, WEBMERCATOR.epsg, featureCoords)
+    }
+    store.dispatch('click', {
+        clickInfo: new ClickInfo({
+            coordinate: coordinates,
+            pixelCoordinate: [event.position.x, event.position.y],
+            features,
+            clickType: ClickType.LEFT_SINGLECLICK,
+        }),
+        ...dispatcher,
+    })
+}
+
+function onContextMenu(event) {
+    const coordinates = getCoordinateAtScreenCoordinate(event.position.x, event.position.y)
+    store.dispatch('click', {
+        clickInfo: new ClickInfo({
+            coordinate: coordinates,
+            pixelCoordinate: [event.position.x, event.position.y],
+            clickType: ClickType.CONTEXTMENU,
+        }),
+        ...dispatcher,
+    })
+}
+</script>
diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index a75b88baf..073935def 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -1,613 +1,170 @@
-<template>
-    <div
-        v-if="isProjectionWebMercator"
-        id="cesium"
-        ref="viewer"
-        class="cesium-map"
-        data-cy="cesium-map"
-        @touchstart.passive="onTouchStart"
-        @touchmove.passive="clearLongPressTimer"
-        @touchend.passive="clearLongPressTimer"
-        @touchcancel="clearLongPressTimer"
-        @contextmenu="onContextMenu"
-    >
-        <CesiumBackgroundLayer v-if="viewerCreated" />
-        <CesiumVisibleLayers v-if="viewerCreated" />
-        <CesiumPopover
-            v-if="viewerCreated && showFeaturesPopover"
-            :coordinates="popoverCoordinates"
-            :projection="projection"
-            authorize-print
-            :use-content-padding="!!editFeature"
-            @close="onPopupClose"
-        >
-            <template #extra-buttons>
-                <button
-                    class="btn btn-sm btn-light d-flex align-items-center"
-                    data-cy="toggle-floating-off"
-                    @click="setBottomPanelFeatureInfoPosition()"
-                    @mousedown.stop=""
-                >
-                    <FontAwesomeIcon icon="angles-down" />
-                </button>
-            </template>
-            <FeatureEdit v-if="editFeature" :read-only="true" :feature="editFeature" />
-            <FeatureList />
-        </CesiumPopover>
-        <CesiumGeolocationFeedback v-if="viewerCreated" />
-
-        <cesium-compass
-            v-show="isDesktopMode"
-            ref="compass"
-            class="position-absolute start-50 translate-middle-x cesium-compass"
-        />
-        <slot />
-    </div>
-</template>
-<script>
+<script setup>
 import '@geoblocks/cesium-compass'
 
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import * as cesium from 'cesium'
 import {
-    Cartesian2,
-    Cartesian3,
-    Cartographic,
     CesiumTerrainProvider,
     Color,
-    defined,
-    Ellipsoid,
-    Math as CesiumMath,
     PostProcessStageCollection,
-    RequestScheduler,
-    ScreenSpaceEventType,
     ShadowMode,
     Viewer,
 } from 'cesium'
-import { isEqual } from 'lodash'
-import { LineString, Point, Polygon } from 'ol/geom'
-import proj4 from 'proj4'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { computed, onBeforeMount, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
-import { extractOlFeatureGeodesicCoordinates } from '@/api/features/features.api'
-import GeoAdminGeoJsonLayer from '@/api/layers/GeoAdminGeoJsonLayer.class'
-import GPXLayer from '@/api/layers/GPXLayer.class'
-import KMLLayer from '@/api/layers/KMLLayer.class'
-import { get3dTilesBaseUrl, getWmsBaseUrl, getWmtsBaseUrl } from '@/config/baseUrl.config'
-import { CESIUM_STATIC_PATH, DEFAULT_PROJECTION } from '@/config/map.config'
+import { TERRAIN_URL } from '@/config/cesium.config'
+import { CESIUM_STATIC_PATH } from '@/config/map.config'
 import { IS_TESTING_WITH_CYPRESS } from '@/config/staging.config'
-import FeatureEdit from '@/modules/infobox/components/FeatureEdit.vue'
-import FeatureList from '@/modules/infobox/components/FeatureList.vue'
 import CesiumBackgroundLayer from '@/modules/map/components/cesium/CesiumBackgroundLayer.vue'
+import CesiumCamera from '@/modules/map/components/cesium/CesiumCamera.vue'
 import CesiumGeolocationFeedback from '@/modules/map/components/cesium/CesiumGeolocationFeedback.vue'
-import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
+import CesiumHighlightedFeatures from '@/modules/map/components/cesium/CesiumHighlightedFeatures.vue'
+import CesiumInteractions from '@/modules/map/components/cesium/CesiumInteractions.vue'
 import CesiumVisibleLayers from '@/modules/map/components/cesium/CesiumVisibleLayers.vue'
-import {
-    CAMERA_MAX_PITCH,
-    CAMERA_MAX_ZOOM_DISTANCE,
-    CAMERA_MIN_PITCH,
-    CAMERA_MIN_ZOOM_DISTANCE,
-    TERRAIN_URL,
-} from '@/modules/map/components/cesium/constants'
-import {
-    calculateHeight,
-    limitCameraCenter,
-    limitCameraPitchRoll,
-} from '@/modules/map/components/cesium/utils/cameraUtils'
-import {
-    highlightGroup,
-    unhighlightGroup,
-} from '@/modules/map/components/cesium/utils/highlightUtils'
-import { ClickInfo, ClickType } from '@/store/modules/map.store'
-import { FeatureInfoPositions, UIModes } from '@/store/modules/ui.store'
-import { WEBMERCATOR, WGS84 } from '@/utils/coordinates/coordinateSystems'
-import CustomCoordinateSystem from '@/utils/coordinates/CustomCoordinateSystem.class'
-import { identifyGeoJSONFeatureAt } from '@/utils/identifyOnVectorLayer'
+import { WEBMERCATOR } from '@/utils/coordinates/coordinateSystems'
 import log from '@/utils/logging'
-import { wrapDegrees } from '@/utils/numberUtils.js'
 
 const dispatcher = { dispatcher: 'CesiumMap.vue' }
-export default {
-    components: {
-        CesiumVisibleLayers,
-        CesiumBackgroundLayer,
-        CesiumGeolocationFeedback,
-        FontAwesomeIcon,
-        CesiumPopover,
-        FeatureEdit,
-        FeatureList,
-    },
-    provide() {
-        return {
-            // sharing cesium viewer object with children components
-            getViewer: () => this.viewer,
-        }
-    },
-    data() {
-        return {
-            viewerCreated: false,
-            cameraInitialized: false,
-            popoverCoordinates: [],
-        }
-    },
-    computed: {
-        ...mapState({
-            zoom: (state) => state.position.zoom,
-            rotation: (state) => state.position.rotation,
-            cameraPosition: (state) => state.position.camera,
-            uiMode: (state) => state.ui.mode,
-            projection: (state) => state.position.projection,
-            isTimeSliderActive: (state) => state.ui.isTimeSliderActive,
-            layersConfig: (state) => state.layers.config,
-        }),
-        ...mapGetters([
-            'selectedFeatures',
-            'centerEpsg4326',
-            'resolution',
-            'hasDevSiteWarning',
-            'visibleLayers',
-            'showFeatureInfoInTooltip',
-        ]),
-        isProjectionWebMercator() {
-            return this.projection.epsg === WEBMERCATOR.epsg
-        },
-        isDesktopMode() {
-            return this.uiMode === UIModes.DESKTOP
-        },
-        isFeatureInfoInTooltip() {
-            return this.showFeatureInfoInTooltip
-        },
-        visiblePrimitiveLayers() {
-            return this.visibleLayers.filter(
-                (l) =>
-                    l instanceof GeoAdminGeoJsonLayer ||
-                    l instanceof KMLLayer ||
-                    l instanceof GPXLayer
-            )
-        },
-        showFeaturesPopover() {
-            return this.isFeatureInfoInTooltip && this.selectedFeatures.length > 0
-        },
-        editFeature() {
-            return this.selectedFeatures.find((feature) => feature.isEditable)
-        },
-    },
-    watch: {
-        selectedFeatures: {
-            // we need to deep watch this as otherwise we aren't triggered when
-            // coordinates are changed (but only when one feature is added/removed)
-            handler(newSelectedFeatures) {
-                if (newSelectedFeatures.length > 0) {
-                    this.highlightSelectedFeatures()
-                }
-            },
-            deep: true,
-        },
-        isProjectionWebMercator: {
-            handler() {
-                if (!this.viewer && this.isProjectionWebMercator) {
-                    this.createViewer()
-                } else {
-                    log.error('Cesium only supports WebMercator as projection')
-                }
-            },
-            // so that we trigger the handler AFTER the component has updated
-            // (meaning after the main <div> has been added and can be linked to Cesium)
-            // see https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing
-            flush: 'post',
-        },
-        cameraPosition: {
-            handler() {
-                this.flyToPosition()
-            },
-            flush: 'post',
-            deep: true,
-        },
-    },
-    beforeCreate() {
-        // Global variable required for Cesium and point to the URL where four static directories (see vite.config) are served
-        // https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/#install-with-npm
-        window['CESIUM_BASE_URL'] = CESIUM_STATIC_PATH
 
-        // required for ol-cesium
-        window['Cesium'] = cesium
+let viewer = null
 
-        const withoutSchemeAndTrailingSlash = (url) => {
-            const urlWithoutScheme = url.replace('https://', '')
-            return urlWithoutScheme.endsWith('/')
-                ? urlWithoutScheme.slice(0, urlWithoutScheme.length - 1)
-                : urlWithoutScheme
-        }
-        const backendUsedToServe3dData = {}
-        backendUsedToServe3dData[`${withoutSchemeAndTrailingSlash(get3dTilesBaseUrl())}:443`] = 18
-        backendUsedToServe3dData[`${withoutSchemeAndTrailingSlash(getWmtsBaseUrl())}:443`] = 18
-        backendUsedToServe3dData[`${withoutSchemeAndTrailingSlash(getWmsBaseUrl())}:443`] = 18
-        // A per server key list of overrides to use for throttling limits.
-        // Useful when streaming data from a known HTTP/2 or HTTP/3 server.
-        Object.assign(RequestScheduler.requestsByServer, backendUsedToServe3dData)
-    },
-    mounted() {
-        if (this.isProjectionWebMercator) {
-            this.createViewer()
+const viewerElement = ref(null)
+const compassElement = ref(null)
+const viewerCreated = ref(false)
+
+const store = useStore()
+const projection = computed(() => store.state.position.projection)
+const hasDevSiteWarning = computed(() => store.getters.hasDevSiteWarning)
+const isDesktopMode = computed(() => store.getters.isDesktopMode)
+const isProjectionWebMercator = computed(() => projection.value.epsg === WEBMERCATOR.epsg)
+
+watch(
+    isProjectionWebMercator,
+    () => {
+        if (!viewer && isProjectionWebMercator.value) {
+            createViewer()
         } else {
-            log.warn('Projection is not yet set to WebMercator, Cesium will not load yet')
-        }
-        log.info('CesiumMap component mounted and ready')
-    },
-    beforeUnmount() {
-        if (this.viewer) {
-            // the camera position that is for now dispatched to the store doesn't correspond where the 2D
-            // view is looking at, as if the camera is tilted, its position will be over swaths of lands that
-            // have nothing to do with the top-down 2D view.
-            // here we ray trace the coordinate of where the camera is looking at, and send this "target"
-            // to the store as the new center
-            this.setCenterToCameraTarget()
+            log.error('[Cesium] Cesium only supports WebMercator as projection')
         }
     },
-    unmounted() {
-        this.setCameraPosition({ position: null, ...dispatcher })
-        this.viewer.destroy()
-        delete this.viewer
-    },
-    methods: {
-        ...mapActions([
-            'setCameraPosition',
-            'clearAllSelectedFeatures',
-            'click',
-            'clearClick',
-            'setFeatureInfoPosition',
-            'setCenter',
-            'mapModuleReady',
-            'setViewerReady',
-        ]),
-        toggleTooltip() {
-            this.toggleFloatingTooltip(dispatcher)
-        },
-        async createViewer() {
-            this.viewer = new Viewer(this.$refs.viewer, {
-                showRenderLoopErrors: this.hasDevSiteWarning,
-                // de-activating default Cesium UI elements
-                animation: false,
-                baseLayerPicker: false,
-                fullscreenButton: false,
-                vrButton: false,
-                geocoder: false,
-                homeButton: false,
-                infoBox: false,
-                sceneModePicker: false,
-                selectionIndicator: false,
-                timeline: false,
-                navigationHelpButton: false,
-                navigationInstructionsInitiallyVisible: false,
-                // each geometry instance will only be rendered in 3D to save GPU memory.
-                scene3DOnly: true,
-                // activating shadows so that buildings cast shadows on the ground/roof elements
-                shadows: false,
-                // no casting of buildings shadow on the terrain
-                terrainShadows: ShadowMode.DISABLED,
-                baseLayer: false,
-                useBrowserRecommendedResolution: true,
-                terrainProvider: await CesiumTerrainProvider.fromUrl(TERRAIN_URL),
-                requestRenderMode: true,
-            })
-
-            if (this.hasDevSiteWarning) {
-                this.viewer.scene.debugShowFramesPerSecond = true
-            }
-
-            const scene = this.viewer.scene
-            scene.useDepthPicking = true
-            scene.pickTranslucentDepth = true
-            scene.backgroundColor = Color.TRANSPARENT
-
-            const postProcessStages = new PostProcessStageCollection()
-            postProcessStages.ambientOcclusion.enabled = true
-            postProcessStages.bloom.enabled = false
-            postProcessStages.fxaa.enabled = true
-            scene.postProcessStages = postProcessStages
-
-            this.viewer.camera.moveEnd.addEventListener(this.onCameraMoveEnd)
-            this.viewer.screenSpaceEventHandler.setInputAction(
-                this.onClick,
-                ScreenSpaceEventType.LEFT_CLICK
-            )
-
-            const globe = scene.globe
-            globe.baseColor = Color.WHITE
-            globe.depthTestAgainstTerrain = true
-            globe.showGroundAtmosphere = false
-            globe.showWaterEffect = false
-            // increases the LOD (Cesium will load one tile further down the zoom pyramid) => higher rez WMTS
-            // currently we do not set it, as the loading of the higher rez slows down the 3D user experience
-            //globe.maximumScreenSpaceError = 0.5
-
-            const sscController = scene.screenSpaceCameraController
-            sscController.minimumZoomDistance = CAMERA_MIN_ZOOM_DISTANCE
-            sscController.maximumZoomDistance = CAMERA_MAX_ZOOM_DISTANCE
-
-            this.viewerCreated = true
+    {
+        // so that we trigger the handler AFTER the component has updated
+        // (meaning after the main <div> has been added and can be linked to Cesium)
+        // see https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing
+        flush: 'post',
+    }
+)
+
+onBeforeMount(() => {
+    // Global variable required for Cesium and point to the URL where four static directories (see vite.config) are served
+    // https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/#install-with-npm
+    window['CESIUM_BASE_URL'] = CESIUM_STATIC_PATH
+})
+onMounted(() => {
+    if (isProjectionWebMercator.value) {
+        log.debug('[Cesium] Projection is now WebMercator, Cesium will start loading')
+        createViewer()
+    } else {
+        log.warn('[Cesium] Projection is not set to WebMercator, Cesium will not load yet')
+    }
+})
+onUnmounted(() => {
+    if (viewer) {
+        store.dispatch('setCameraPosition', { position: null, ...dispatcher })
+        viewer.destroy()
+    }
+})
+
+async function createViewer() {
+    viewer = new Viewer(viewerElement.value, {
+        showRenderLoopErrors: hasDevSiteWarning.value,
+        // de-activating default Cesium UI elements
+        animation: false,
+        baseLayerPicker: false,
+        fullscreenButton: false,
+        vrButton: false,
+        geocoder: false,
+        homeButton: false,
+        infoBox: false,
+        sceneModePicker: false,
+        selectionIndicator: false,
+        timeline: false,
+        navigationHelpButton: false,
+        navigationInstructionsInitiallyVisible: false,
+        // each geometry instance will only be rendered in 3D to save GPU memory.
+        scene3DOnly: true,
+        // activating shadows so that buildings cast shadows on the ground/roof elements
+        shadows: false,
+        // no casting of buildings shadow on the terrain
+        terrainShadows: ShadowMode.DISABLED,
+        baseLayer: false,
+        useBrowserRecommendedResolution: true,
+        terrainProvider: await CesiumTerrainProvider.fromUrl(TERRAIN_URL),
+        requestRenderMode: true,
+    })
+
+    if (hasDevSiteWarning.value) {
+        viewer.scene.debugShowFramesPerSecond = true
+    }
 
-            // if the default projection is a national projection (or custom projection), we then constrain
-            // the camera to only move in bounds of this custom projection
-            if (DEFAULT_PROJECTION instanceof CustomCoordinateSystem) {
-                this.viewer.scene.postRender.addEventListener(
-                    limitCameraCenter(DEFAULT_PROJECTION.getBoundsAs(WGS84).flatten)
-                )
-            }
-            this.viewer.scene.postRender.addEventListener(
-                limitCameraPitchRoll(CAMERA_MIN_PITCH, CAMERA_MAX_PITCH, 0.0, 0.0)
-            )
-            this.initCamera()
+    const scene = viewer.scene
+    scene.useDepthPicking = true
+    scene.pickTranslucentDepth = true
+    scene.backgroundColor = Color.TRANSPARENT
 
-            if (this.$refs.compass) {
-                this.$refs.compass.scene = this.viewer.scene
-                this.$refs.compass.clock = this.viewer.clock
-            }
+    const postProcessStages = new PostProcessStageCollection()
+    postProcessStages.ambientOcclusion.enabled = true
+    postProcessStages.bloom.enabled = false
+    postProcessStages.fxaa.enabled = true
+    scene.postProcessStages = postProcessStages
 
-            if (this.selectedFeatures.length > 0) {
-                this.highlightSelectedFeatures()
-            }
+    const globe = scene.globe
+    globe.baseColor = Color.WHITE
+    globe.depthTestAgainstTerrain = true
+    globe.showGroundAtmosphere = false
+    globe.showWaterEffect = false
 
-            if (IS_TESTING_WITH_CYPRESS) {
-                window.cesiumViewer = this.viewer
-                // reduce screen space error to downgrade visual quality but speed up tests
-                globe.maximumScreenSpaceError = 30
-            }
-            this.mapModuleReady(dispatcher)
-            this.setViewerReady({
-                isViewerReady: true,
-                ...dispatcher,
-            })
-        },
-        highlightSelectedFeatures() {
-            const [firstFeature] = this.selectedFeatures
-            const geometries = this.selectedFeatures.map((f) => {
-                // GeoJSON and KML layers have different geometry structure
-                if (!f.geometry.type) {
-                    let type
-                    if (f.geometry instanceof Polygon) {
-                        type = 'Polygon'
-                    } else if (f.geometry instanceof LineString) {
-                        type = 'LineString'
-                    } else if (f.geometry instanceof Point) {
-                        type = 'Point'
-                    }
-                    const coordinates = f.geometry.getCoordinates()
-                    return {
-                        type,
-                        coordinates,
-                    }
-                }
-                return f.geometry
-            })
-            highlightGroup(this.viewer, geometries)
-            this.popoverCoordinates = Array.isArray(firstFeature.coordinates[0])
-                ? firstFeature.coordinates[firstFeature.coordinates.length - 1]
-                : firstFeature.coordinates
-        },
-        initCamera() {
-            if (this.cameraInitialized) {
-                return
-            }
-            let destination
-            let orientation
-            if (this.cameraPosition) {
-                // a camera position was already define in the URL, we use it
-                log.debug('Existing camera position found at startup, using', this.cameraPosition)
-                destination = Cartesian3.fromDegrees(
-                    this.cameraPosition.x,
-                    this.cameraPosition.y,
-                    this.cameraPosition.z
-                )
-                orientation = {
-                    heading: CesiumMath.toRadians(this.cameraPosition.heading),
-                    pitch: CesiumMath.toRadians(this.cameraPosition.pitch),
-                    roll: CesiumMath.toRadians(this.cameraPosition.roll),
-                }
-            } else {
-                // no camera position was ever calculated, so we create one using the 2D coordinates
-                log.debug(
-                    'No camera position defined, creating one using 2D coordinates',
-                    this.centerEpsg4326
-                )
-                destination = Cartesian3.fromDegrees(
-                    this.centerEpsg4326[0],
-                    this.centerEpsg4326[1],
-                    calculateHeight(this.resolution, this.viewer.canvas.clientWidth)
-                )
-                orientation = {
-                    heading: -CesiumMath.toRadians(this.rotation),
-                    pitch: -CesiumMath.PI_OVER_TWO,
-                    roll: 0,
-                }
-            }
+    viewerCreated.value = true
 
-            this.viewer.camera.flyTo({
-                destination,
-                orientation,
-                duration: 0,
-            })
-            this.cameraInitialized = true
-        },
-        flyToPosition() {
-            try {
-                if (this.cameraPosition) {
-                    log.debug(
-                        `Fly to camera position ${this.cameraPosition.x}, ${this.cameraPosition.y}, ${this.cameraPosition.z}`
-                    )
-                    this.viewer.camera.flyTo({
-                        destination: Cartesian3.fromDegrees(
-                            this.cameraPosition.x,
-                            this.cameraPosition.y,
-                            this.cameraPosition.z
-                        ),
-                        orientation: {
-                            heading: CesiumMath.toRadians(this.cameraPosition.heading),
-                            pitch: CesiumMath.toRadians(this.cameraPosition.pitch),
-                            roll: CesiumMath.toRadians(this.cameraPosition.roll),
-                        },
-                        duration: 1,
-                    })
-                }
-            } catch (error) {
-                log.error('Error while moving the camera', error, this.cameraPosition)
-            }
-        },
-        onCameraMoveEnd() {
-            const camera = this.viewer.camera
-            const position = camera.positionCartographic
-            const cameraPosition = {
-                x: parseFloat(CesiumMath.toDegrees(position.longitude).toFixed(6)),
-                y: parseFloat(CesiumMath.toDegrees(position.latitude).toFixed(6)),
-                z: parseFloat(position.height.toFixed(1)),
-                // Wrap degrees, cesium might return 360, which is internally wrapped to 0 in
-                // store.
-                heading: wrapDegrees(parseFloat(CesiumMath.toDegrees(camera.heading).toFixed(0))),
-                pitch: wrapDegrees(parseFloat(CesiumMath.toDegrees(camera.pitch).toFixed(0))),
-                roll: wrapDegrees(parseFloat(CesiumMath.toDegrees(camera.roll).toFixed(0))),
-            }
-            if (!isEqual(cameraPosition, this.cameraPosition)) {
-                this.setCameraPosition({
-                    position: cameraPosition,
-                    ...dispatcher,
-                })
-            }
-        },
-        getCoordinateAtScreenCoordinate(x, y) {
-            const cartesian = this.viewer?.scene.pickPosition(new Cartesian2(x, y))
-            let coordinates = []
-            if (cartesian) {
-                const cartCoords = Cartographic.fromCartesian(cartesian)
-                coordinates = proj4(WGS84.epsg, this.projection.epsg, [
-                    (cartCoords.longitude * 180) / Math.PI,
-                    (cartCoords.latitude * 180) / Math.PI,
-                ])
-            } else {
-                log.error('no coordinate found at this screen coordinates', [x, y])
-            }
-            return coordinates
-        },
-        onClick(event) {
-            unhighlightGroup(this.viewer)
-            const features = []
-            let coordinates = this.getCoordinateAtScreenCoordinate(
-                event.position.x,
-                event.position.y
-            )
+    if (compassElement.value) {
+        compassElement.value.scene = viewer.scene
+        compassElement.value.clock = viewer.clock
+    }
 
-            let objects = this.viewer.scene.drillPick(event.position)
-            const kmlFeatures = {}
-            // if there is a GeoJSON layer currently visible, we will find it and search for features under the mouse cursor
-            this.visiblePrimitiveLayers
-                .filter((l) => l instanceof GeoAdminGeoJsonLayer)
-                .forEach((geoJSonLayer) => {
-                    features.push(
-                        ...identifyGeoJSONFeatureAt(
-                            geoJSonLayer,
-                            [event.position.x, event.position.y],
-                            this.projection,
-                            this.resolution
-                        )
-                    )
-                })
-            this.visiblePrimitiveLayers
-                .filter((l) => l instanceof KMLLayer)
-                .forEach((KMLLayer) => {
-                    objects
-                        .filter((obj) => obj.primitive?.olLayer?.get('id') === KMLLayer.id)
-                        .forEach((obj) => {
-                            const feature = obj.primitive.olFeature
-                            if (!kmlFeatures[feature.getId()]) {
-                                const editableFeature = feature.get('editableFeature')
-                                if (editableFeature) {
-                                    editableFeature.geodesicCoordinates =
-                                        extractOlFeatureGeodesicCoordinates(feature)
-                                    editableFeature.geometry = feature.getGeometry()
-                                    kmlFeatures[feature.getId()] = editableFeature
-                                } else {
-                                    // TODO
-                                    log.debug(
-                                        'KMLs which are not editable Features are not supported for selection'
-                                    )
-                                }
-                            }
-                        })
-                    features.push(...Object.values(kmlFeatures))
-                })
-            // Cesium can't pick position when click on primitive
-            if (!coordinates.length && features.length) {
-                const featureCoords = Array.isArray(features[0].coordinates[0])
-                    ? features[0].coordinates[0]
-                    : features[0].coordinates
-                coordinates = proj4(this.projection.epsg, WEBMERCATOR.epsg, featureCoords)
-            }
-            this.click({
-                clickInfo: new ClickInfo({
-                    coordinate: coordinates,
-                    pixelCoordinate: [event.position.x, event.position.y],
-                    features,
-                    clickType: ClickType.LEFT_SINGLECLICK,
-                }),
-                ...dispatcher,
-            })
-        },
-        onContextMenu(event) {
-            const coordinates = this.getCoordinateAtScreenCoordinate(event.clientX, event.clientY)
-            this.click({
-                clickInfo: new ClickInfo({
-                    coordinate: coordinates,
-                    pixelCoordinate: [event.clientX, event.clientY],
-                    clickType: ClickType.CONTEXTMENU,
-                }),
-                ...dispatcher,
-            })
-        },
-        onPopupClose() {
-            unhighlightGroup(this.viewer)
-            this.clearAllSelectedFeatures(dispatcher)
-            this.clearClick(dispatcher)
-        },
-        onTouchStart(event) {
-            this.clearLongPressTimer()
-            if (event.touches.length === 1) {
-                this.contextMenuTimeoutId = setTimeout(() => {
-                    const touch = event.touches[0]
-                    this.onContextMenu(touch)
-                }, 500)
-            }
-        },
-        clearLongPressTimer() {
-            clearTimeout(this.contextMenuTimeoutId)
-        },
-        setCenterToCameraTarget() {
-            const ray = this.viewer.camera.getPickRay(
-                new Cartesian2(
-                    Math.round(this.viewer.scene.canvas.clientWidth / 2),
-                    Math.round(this.viewer.scene.canvas.clientHeight / 2)
-                )
-            )
-            const cameraTarget = this.viewer.scene.globe.pick(ray, this.viewer.scene)
-            if (defined(cameraTarget)) {
-                const cameraTargetCartographic =
-                    Ellipsoid.WGS84.cartesianToCartographic(cameraTarget)
-                const lat = CesiumMath.toDegrees(cameraTargetCartographic.latitude)
-                const lon = CesiumMath.toDegrees(cameraTargetCartographic.longitude)
-                this.setCenter({
-                    center: proj4(WGS84.epsg, this.projection.epsg, [lon, lat]),
-                    ...dispatcher,
-                })
-            }
-        },
-        setBottomPanelFeatureInfoPosition() {
-            this.setFeatureInfoPosition({
-                position: FeatureInfoPositions.BOTTOMPANEL,
-                ...dispatcher,
-            })
-        },
-    },
+    if (IS_TESTING_WITH_CYPRESS) {
+        window.cesiumViewer = viewer
+        // reduce screen space error to downgrade visual quality but speed up tests
+        globe.maximumScreenSpaceError = 30
+    }
+    await store.dispatch('mapModuleReady', dispatcher)
+    await store.dispatch('setViewerReady', {
+        isViewerReady: true,
+        ...dispatcher,
+    })
+    log.info('[Cesium] CesiumMap component mounted and ready')
 }
+
+provide('getViewer', () => viewer)
 </script>
 
+<template>
+    <div ref="viewerElement" class="cesium-map" data-cy="cesium-map" @contextmenu.prevent>
+        <template v-if="viewerCreated">
+            <CesiumInteractions />
+            <CesiumCamera />
+            <CesiumBackgroundLayer />
+            <CesiumVisibleLayers />
+            <CesiumHighlightedFeatures />
+            <CesiumGeolocationFeedback />
+            <cesium-compass
+                v-show="isDesktopMode"
+                ref="compassElement"
+                class="position-absolute start-50 translate-middle-x cesium-compass"
+            />
+        </template>
+        <slot />
+    </div>
+</template>
+
 <style lang="scss" scoped>
 @import '@/scss/webmapviewer-bootstrap-theme';
 @import '@/scss/media-query.mixin';
diff --git a/src/modules/map/components/cesium/CesiumMouseTracker.vue b/src/modules/map/components/cesium/CesiumMouseTracker.vue
index 32d1d4baf..96820bb32 100644
--- a/src/modules/map/components/cesium/CesiumMouseTracker.vue
+++ b/src/modules/map/components/cesium/CesiumMouseTracker.vue
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import allFormats, { LV03Format, LV95Format } from '@/utils/coordinates/coordinateFormat'
+import { WGS84 } from '@/utils/coordinates/coordinateSystems'
 import log from '@/utils/logging'
 
 const mousePosition = ref(null)
@@ -58,7 +59,7 @@ function setupHandler() {
             const cartographic = Cartographic.fromCartesian(cartesian)
             const longitude = Math.toDegrees(cartographic.longitude)
             const latitude = Math.toDegrees(cartographic.latitude)
-            let coordinate = proj4('EPSG:4326', projection.value.getCode(), [longitude, latitude])
+            let coordinate = proj4(WGS84.epsg, projection.value.epsg, [longitude, latitude])
             coordinate.push(cartographic.height)
 
             mousePosition.value.textContent = formatCoordinate(coordinate)
diff --git a/src/modules/map/components/cesium/utils/addPrimitiveFromOLLayer.mixins.js b/src/modules/map/components/cesium/utils/addPrimitiveFromOLLayer.mixins.js
index 29d04b783..30cfcd0c3 100644
--- a/src/modules/map/components/cesium/utils/addPrimitiveFromOLLayer.mixins.js
+++ b/src/modules/map/components/cesium/utils/addPrimitiveFromOLLayer.mixins.js
@@ -1,8 +1,8 @@
 import { PrimitiveCollection } from 'cesium'
 import { Vector as VectorLayer } from 'ol/layer'
 
+import { PRIMITIVE_DISABLE_DEPTH_TEST_DISTANCE } from '@/config/cesium.config'
 import { IS_TESTING_WITH_CYPRESS } from '@/config/staging.config'
-import { PRIMITIVE_DISABLE_DEPTH_TEST_DISTANCE } from '@/modules/map/components/cesium/constants'
 import addLayerToViewer from '@/modules/map/components/cesium/utils/addLayerToViewer-mixins'
 import FeatureConverter from '@/modules/map/components/cesium/utils/olcs/FeatureConverter'
 import { updateCollectionProperties } from '@/modules/map/components/cesium/utils/primitiveLayerUtils'
diff --git a/tests/cypress/tests-e2e/3d/navigation.cy.js b/tests/cypress/tests-e2e/3d/navigation.cy.js
index b20fa9349..fcd6d2f8a 100644
--- a/tests/cypress/tests-e2e/3d/navigation.cy.js
+++ b/tests/cypress/tests-e2e/3d/navigation.cy.js
@@ -2,10 +2,7 @@
 import { Cartesian3 } from 'cesium'
 import proj4 from 'proj4'
 
-import {
-    CAMERA_MAX_ZOOM_DISTANCE,
-    CAMERA_MIN_ZOOM_DISTANCE,
-} from '@/modules/map/components/cesium/constants'
+import { CAMERA_MAX_ZOOM_DISTANCE, CAMERA_MIN_ZOOM_DISTANCE } from '@/config/cesium.config'
 import { calculateResolution } from '@/modules/map/components/cesium/utils/cameraUtils'
 import { WGS84 } from '@/utils/coordinates/coordinateSystems'