Added no WebGL error message to MapboxGL map component

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
+    if(IS_SUPPORTED) {
-      className="maputnik-map"
+      return <div
-      ref={x => this.container = x}
+        className="maputnik-map"
-    ></div>
+        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>
+    }
   }
 }

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