Add check for WebGL support.

The intention is to fall back to the legacy map if WebGL is not
supported on a client.

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

@@ -597,12 +597,50 @@ export default {
       }
     },
 
+    checkWebGLSupport() {
+      const canvas = document.createElement('canvas');
+      const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+      if (!gl) {
+        //this.error = 'WebGL is not supported in this browser or device.';
+        //this.loading = false;
+        console.error('WebGL not supported');
+        return false;
+      }
+      const isWebGL2 = gl instanceof WebGL2RenderingContext;
+      console.log('WebGL Support:', isWebGL2 ? 'WebGL2' : 'WebGL1');
+      return true;
+    },
+
+    toBase64 (binary) {
+      return btoa(String.fromCharCode(...new Uint8Array(binary)));
+    },
+
+    fromBase64 (text) {
+      const decoded = atob(text);
+      const arr = new Uint8Array(decoded.length);
+      for (let i=0; i<decoded.length; i++) {
+        arr[i] = decoded.charCodeAt(i);
+      }
+      return arr.buffer;
+    },
+
     ...mapActions(["api"])
 
   },
 
   async mounted () {
 
+    if (!this.checkWebGLSupport()) {
+      for (const countdown = 5; countdown > 0; countdown--) {
+        if (countdown) {
+          this.error = `This browser does not support WebGL. Switching to legacy map view in ${countdown} seconds.`;
+          await new Promise( (resolve) => setTimeout(() => resolve, 1000) );
+        }
+      }
+      this.error = null;
+      console.log("TODO: Should switch to legacy map view");
+    }
+
     const COLOR_SCALE = [
       // negative
       [65, 182, 196],