very wip

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

@@ -0,0 +1,33 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useStore } from 'vuex'
+
+const autoRotate = ref(false)
+const store = useStore()
+
+onMounted(() => {
+    window.addEventListener('deviceorientation', handleOrientation)
+})
+onUnmounted(() => {
+    window.removeEventListener('deviceorientation', handleOrientation)
+})
+
+function handleOrientation(event) {
+    console.error(autoRotate.value, event.alpha, (event.alpha / 180) * Math.PI)
+    if (autoRotate.value) {
+        store.dispatch('setRotation', (event.alpha / 180) * Math.PI)
+    }
+}
+
+function rotate() {
+    autoRotate.value = !autoRotate.value
+}
+</script>
+
+<template>
+    <div>
+        <button class="p-0" @click="rotate">
+            {{ autoRotate ? 'AUTO-ROTATE ENABLED' : 'AUTO-ROTATE DISABLED' }}
+        </button>
+    </div>
+</template>

src/modules/map/components/toolbox/MapToolbox.vue

@@ -8,6 +8,7 @@
 import { computed, toRefs } from 'vue'
 import { useStore } from 'vuex'
 
+import CompassButton from '@/modules/map/components/openlayers/CompassButton.vue'
 import OpenLayersCompassButton from '@/modules/map/components/openlayers/OpenLayersCompassButton.vue'
 import FullScreenButton from '@/modules/map/components/toolbox/FullScreenButton.vue'
 import GeolocButton from '@/modules/map/components/toolbox/GeolocButton.vue'
@@ -54,6 +55,7 @@ const is3dActive = computed(() => store.state.cesium.active)
         <ZoomButtons v-if="!isFullscreenMode" />
         <Toggle3dButton v-if="toggle3dButton && !isFullscreenMode" />
         <OpenLayersCompassButton v-if="compassButton && !is3dActive && !isFullscreenMode" />
+        <CompassButton />
         <slot />
     </div>
 </template>