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(, 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
this.container = x}
- >
+ if(IS_SUPPORTED) {
+ return this.container = x}
+ >
+ }
+ else {
+ return
+
+ Error: Cannot load MapboxGL, WebGL is either unsupported or disabled
+
+
+ }
}
}
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