Add more view controls to group map

lib/www/client/source/src/components/groups/group-map.vue

@@ -118,6 +118,33 @@
               @click="zoomOut"
               >mdi-magnify-minus-outline</v-icon>
           </div>
+          <div>
+            <v-icon
+              class="my-1"
+              title="Tilt out"
+              @click="tiltOut"
+              >mdi-chevron-up</v-icon>
+          </div>
+          <div>
+            <v-icon
+              class="my-1"
+              title="Tilt out"
+              @click="tiltIn"
+              >mdi-chevron-down</v-icon>
+          </div>
+          <div>
+            <v-icon v-if="bearing==0"
+              class="my-1"
+              title="Bin up"
+              @click="setBearing('ζ')"
+              >mdi-view-grid-outline</v-icon>
+            <v-icon v-else
+              class="my-1"
+              title="North up"
+              :style="`transform: rotate(${-bearing}deg);`"
+              @click="setBearing(0)"
+              >mdi-navigation</v-icon>
+          </div>
           <div>
             <v-icon
               class="my-1"
@@ -363,6 +390,7 @@ export default {
         //maxZoom: 18,
         maxPitch: 89
       },
+      bearing: 0,
 
       heatmapValue: "total_error",
       isFullscreen: false,
@@ -407,6 +435,11 @@ export default {
   watch: {
 
     baseline () {
+      // We need the configuration of the baseline project so that
+      // the "bin up" orientation control will work.
+      if (this.baseline?.pid) {
+        this.$store.dispatch('getProject', this.baseline.pid);
+      }
       this.populateDataLayersAvailable();
     },
 
@@ -518,6 +551,41 @@ export default {
       }
     },
 
+    tiltIn () {
+      if (deck) {
+        const viewState = deck.getViewports()[0];
+        const initialViewState = {...this.viewStateDefaults, ...viewState};
+        initialViewState.pitch -= 10;
+        initialViewState.transitionDuration = 300;
+        deck.setProps({initialViewState});
+      }
+    },
+
+    tiltOut () {
+      if (deck) {
+        const viewState = deck.getViewports()[0];
+        const initialViewState = {...this.viewStateDefaults, ...viewState};
+        initialViewState.pitch += 10;
+        initialViewState.transitionDuration = 300;
+        deck.setProps({initialViewState});
+      }
+    },
+
+    setBearing (bearing) {
+      if (deck) {
+
+        if (bearing === 'ζ') {
+          bearing = this.$store.getters.projectConfiguration?.binning?.theta ?? 0;
+        }
+
+        const viewState = deck.getViewports()[0];
+        const initialViewState = {...this.viewStateDefaults, ...viewState};
+        initialViewState.bearing = (bearing + 360) % 360;
+        initialViewState.transitionDuration = 300;
+        deck.setProps({initialViewState});
+      }
+    },
+
     toggleFullscreen() {
       const mapElement = document.getElementById('map-container');
       if (!this.isFullscreen) {
@@ -760,6 +828,10 @@ export default {
       }
     },
 
+    viewStateUpdated ({viewState}) {
+      this.bearing = viewState.bearing;
+    },
+
     checkWebGLSupport() {
       const canvas = document.createElement('canvas');
       const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
@@ -1182,7 +1254,8 @@ export default {
       layers: [],
       getTooltip: this.getTooltip,
       pickingRadius: 24,
-      onWebGLInitialized: this.initLayers
+      onWebGLInitialized: this.initLayers,
+      onViewStateChange: this.viewStateUpdated,
     });
     //console.log("deck = ", deck);
 
@@ -1194,6 +1267,10 @@ export default {
 
       this.layersPendingLoad.push(`${this.baseline.pid}-seqfl`);
       this.layersPendingLoad.push(`${this.baseline.pid}-seqfp`);
+
+      // We need the configuration of the baseline project so that
+      // the "bin up" orientation control will work.
+      this.$store.dispatch('getProject', this.baseline.pid);
     }
 
     if (this.monitors) {