BGDIINF_SB-2981: Add cesium-compass widget

package.json

@@ -35,6 +35,7 @@
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
+        "@geoblocks/cesium-compass": "^0.4.2",
         "@geoblocks/ol-maplibre-layer": "^0.1.1",
         "@ivanv/vue-collapse-transition": "^1.0.2",
         "@popperjs/core": "^2.11.8",

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

@@ -1,5 +1,6 @@
 <template>
     <div id="cesium" ref="map" data-cy="cesium"></div>
+    <cesium-compass ref="compass"></cesium-compass>
     <slot />
 </template>
 <script>
@@ -15,6 +16,7 @@ import { addSwisstopoWMTSLayer } from './utils/imageryLayerUtils'
 import { mapGetters, mapState } from 'vuex'
 import { TERRAIN_URL } from './constants'
 import { IS_TESTING_WITH_CYPRESS } from '@/config'
+import '@geoblocks/cesium-compass'
 export default {
     provide() {
         return {
@@ -74,6 +76,10 @@ export default {
             requestRenderMode: true,
         })
 
+        const compass = this.$refs.compass
+        compass.scene = this.viewer.scene
+        compass.clock = this.viewer.clock
+
         if (IS_TESTING_WITH_CYPRESS) {
             window.cesiumViewer = this.viewer
         }
@@ -142,4 +148,12 @@ export default {
         position: absolute;
     }
 }
+cesium-compass {
+    position: absolute;
+    bottom: 130px;
+    right: 50%;
+    z-index: 3;
+    --cesium-compass-stroke-color: rgba(0, 0, 0, 0.6);
+    --cesium-compass-fill-color: rgb(224, 225, 226);
+}
 </style>

vite.config.ts

@@ -27,7 +27,13 @@ export default defineConfig(({ command, mode }) => {
             outDir: `./dist/${mode}`,
         },
         plugins: [
-            vue(),
+            vue({
+                template: {
+                    compilerOptions: {
+                        isCustomElement: (tag) => tag === 'cesium-compass',
+                    },
+                },
+            }),
             generateBuildInfo(appVersion),
             // CesiumJS requires static files from the following 4 folders to be included in the build
             // https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/#install-with-npm