Manage rotation with ctrl key

src/assets/ol.css

@@ -32,10 +32,25 @@
     @apply left-2 top-36 right-auto;
   }
 
+  .ol-rotate {
+    @apply left-2 top-[200px] right-auto;
+  }
+
+  .ol-hidden {
+    @apply hidden;
+  }
+
   .ol-zoom-extent {
     @apply left-2 top-[86px];
   }
 
+  .ol-compass {
+    display: block;
+    font-weight: normal;
+    font-size: 1.2em;
+    will-change: transform;
+  }
+
   .lux-control {
     @apply p-0 right-2 z-[2] border-[color:var(--color-border-default)] border-[1px];
   }

src/components/map-controls/rotate-control.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import Rotate from 'ol/control/Rotate'
+import { Options } from 'ol/control/Control'
+import useControl from '@/composables/control/control.composable'
+
+const props = withDefaults(
+  defineProps<{
+    className?: string
+    label?: string
+  }>(),
+  {}
+)
+
+useControl(Rotate, <Options>props)
+</script>
+
+<template>
+  <div v-if="false"></div>
+</template>

src/components/map/map-container.vue

@@ -14,10 +14,13 @@ import LocationControl from '../map-controls/location-control.vue'
 import Map3dControl from '../map-controls/map-3d.vue'
 import FullscreenControl from '../map-controls/fullscreen-control.vue'
 import ZoomControl from '../map-controls/zoom-control.vue'
+import RotateControl from '../map-controls/rotate-control.vue'
 import ZoomToExtentControl from '../map-controls/zoom-to-extent-control.vue'
 import useDraw from '@/composables/draw/draw.composable'
 import useDrawSelect from '@/composables/draw/draw-select.composable'
 import useFeatureInfo from '@/composables/info/feature-info.composable'
+import { DragRotate } from 'ol/interaction'
+import { platformModifierKeyOnly } from 'ol/events/condition'
 
 const appStore = useAppStore()
 const { embedded } = storeToRefs(appStore)
@@ -34,6 +37,18 @@ const props = withDefaults(
   }
 )
 
+// Remove the default dragRotate interaction
+olMap.getInteractions().forEach(interaction => {
+  if (interaction instanceof DragRotate) {
+    olMap.removeInteraction(interaction)
+  }
+})
+const dragRotateInteraction = new DragRotate({
+  condition: platformModifierKeyOnly,
+})
+
+olMap.addInteraction(dragRotateInteraction)
+
 // add draw layer after map init to allow restoring draw features (not in v3 for now)
 // TODO: remove v4_standalone condition or move calls outside of it, once v4 draw or feature info is used in v3
 if (props.v4_standalone) {
@@ -96,6 +111,7 @@ provide('olMap', olMap)
       <attribution-control />
       <map-3d-control v-if="v4_standalone" />
       <location-control />
+      <rotate-control />
     </template>
   </div>
 </template>

src/composables/map/map.composable.ts

@@ -38,7 +38,7 @@ export default function useMap() {
       view: new OlView({
         center: [682439, 6379152],
         constrainResolution: true, // Prevent intermediates zooms
-        enableRotation: true,
+        enableRotation: true, // Add an dragRotateInteraction to be able to change the key condition
         extent: transformExtent(MAX_EXTENT, 'EPSG:4326', 'EPSG:3857'),
         multiWorld: false,
         zoom: DEFAULT_VIEW_ZOOM,