From 6207416b32622a5abb33dbc9cdfcacc7f8659b61 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 22 Aug 2018 22:05:46 +0100
Subject: [PATCH] Added no WebGL error message to MapboxGL map component

---
 src/components/map/MapboxGlMap.jsx | 28 ++++++++++++++++++++++++----
 src/styles/_components.scss        | 11 +++++++++++
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx
index eb27609..6eec79b 100644
--- a/src/components/map/MapboxGlMap.jsx
+++ b/src/components/map/MapboxGlMap.jsx
@@ -15,6 +15,9 @@ import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
 import '../../libs/mapbox-rtl'
 
+
+const IS_SUPPORTED = MapboxGl.supported();
+
 function renderPropertyPopup(features) {
   var mountNode = document.createElement('div');
   ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
@@ -82,6 +85,8 @@ export default class MapboxGlMap extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
+    if(!IS_SUPPORTED) return;
+
     if(!this.state.map) return
     const metadata = nextProps.mapStyle.metadata || {}
     MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox
@@ -94,6 +99,8 @@ export default class MapboxGlMap extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
+    if(!IS_SUPPORTED) return;
+
     const map = this.state.map;
 
     if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
@@ -108,6 +115,8 @@ export default class MapboxGlMap extends React.Component {
   }
 
   componentDidMount() {
+    if(!IS_SUPPORTED) return;
+
     const mapOpts = {
       ...this.props.options,
       container: this.container,
@@ -164,9 +173,20 @@ export default class MapboxGlMap extends React.Component {
   }
 
   render() {
-    return <div
-      className="maputnik-map"
-      ref={x => this.container = x}
-    ></div>
+    if(IS_SUPPORTED) {
+      return <div
+        className="maputnik-map"
+        ref={x => this.container = x}
+      ></div>
+    }
+    else {
+      return <div
+        className="maputnik-map maputnik-map--error"
+      >
+        <div className="maputnik-map__error-message">
+          Error: Cannot load MapboxGL, WebGL is either unsupported or disabled
+        </div>
+      </div>
+    }
   }
 }
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index e257211..302ec52 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -1,5 +1,6 @@
 // MAP
 .maputnik-map {
+  display: flex;
   position: fixed !important;
   top: $toolbar-height + $toolbar-offset;
   right: 0;
@@ -10,6 +11,16 @@
     - 200px /* layer list */
     - 350px /* layer editor */
   );
+
+  &--error {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__error-message {
+    margin: 16px;
+    text-align: center;
+  }
 }
 
 // DOC LABEL