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