Add full screen control to map

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

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div id="map-container">
   <v-overlay :value="error">
     <v-alert type="error">{{ error }}</v-alert>
   </v-overlay>
@@ -367,6 +367,13 @@
           @click="zoomOut"
           >mdi-magnify-minus-outline</v-icon>
       </div>
+      <div>
+        <v-icon
+          class="my-1"
+          :title="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
+          @click="toggleFullscreen"
+        >{{ isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen' }}</v-icon>
+      </div>
     </div>
 
     <div class="map-overlay bottom right">
@@ -548,6 +555,7 @@ export default {
       },
 
       heatmapValue: "total_error",
+      isFullscreen: false,
       crosshairsPosition: [],
 
       searchText: "",
@@ -753,6 +761,29 @@ export default {
       }
     },
 
+    toggleFullscreen() {
+      const mapElement = document.getElementById('map-container');
+      if (!this.isFullscreen) {
+        if (mapElement.requestFullscreen) {
+          mapElement.requestFullscreen();
+        } else if (mapElement.webkitRequestFullscreen) { // Safari
+          mapElement.webkitRequestFullscreen();
+        } else if (mapElement.msRequestFullscreen) { // IE11
+          mapElement.msRequestFullscreen();
+        }
+        this.isFullscreen = true;
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+        this.isFullscreen = false;
+      }
+    },
+
     async refresh () {
       const cache = await caches.open("dougal");
       for (const key of await cache.keys()) {
@@ -1192,6 +1223,18 @@ export default {
       onWebGLInitialized: this.initLayers
     });
 
+    // Get fullscreen state
+
+    document.addEventListener('fullscreenchange', () => {
+      this.isFullscreen = !!document.fullscreenElement;
+    });
+    document.addEventListener('webkitfullscreenchange', () => {
+      this.isFullscreen = !!document.fullscreenElement;
+    });
+    document.addEventListener('msfullscreenchange', () => {
+      this.isFullscreen = !!document.fullscreenElement;
+    });
+
     //this.layerSelection = [ "seq" ];
     this.getSequenceData();
   }