Add more view controls to map

lib/www/client/source/src/views/Map.vue

@@ -470,6 +470,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"
@@ -661,6 +688,7 @@ export default {
         //maxZoom: 18,
         maxPitch: 89
       },
+      bearing: 0,
 
       vesselPosition: null,
       vesselTrackLastRefresh: 0,
@@ -977,6 +1005,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) {
@@ -1368,7 +1431,7 @@ export default {
       //console.log("SHOULD BE INITIALISING LAYERS HERE", gl);
       this.decodeURL();
       this.decodeURLHash();
-      deck.onViewStateChange = this.updateURL;
+      //deck.onViewStateChange = this.viewStateUpdated;
     },
 
     setViewState () {
@@ -1383,6 +1446,11 @@ export default {
       }
     },
 
+    viewStateUpdated ({viewState}) {
+      this.bearing = viewState.bearing;
+      this.updateURL({viewState});
+    },
+
     updateURL ({viewState} = {}) {
       if (!viewState && deck?.viewManager) {
         viewState = deck.getViewports()[0];
@@ -1709,7 +1777,8 @@ export default {
       layers: [],
       getTooltip: this.getTooltip,
       pickingRadius: 24,
-      onWebGLInitialized: this.initLayers
+      onWebGLInitialized: this.initLayers,
+      onViewStateChange: this.viewStateUpdated,
     });
 
     // Get fullscreen state