Merge remote-tracking branch 'upstream/master' into fix/remove-componentWillUpdate

Conflicts:
	src/components/map/MapboxGlMap.jsx
	src/components/modals/ExportModal.jsx

src/components/map/FeatureLayerPopup.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
 import LayerIcon from '../icons/LayerIcon'
 
 function groupFeaturesBySourceLayer(features) {

src/components/map/MapboxGlMap.jsx

@@ -5,7 +5,6 @@ import MapboxGl from 'mapbox-gl'
 import MapboxInspect from 'mapbox-gl-inspect'
 import FeatureLayerPopup from './FeatureLayerPopup'
 import FeaturePropertyPopup from './FeaturePropertyPopup'
-import style from '../../libs/style.js'
 import tokens from '../../config/tokens.json'
 import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'
@@ -15,6 +14,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 +84,8 @@ export default class MapboxGlMap extends React.Component {
   }
 
   updateMapFromProps(props) {
+    if(!IS_SUPPORTED) return;
+
     if(!this.state.map) return
     const metadata = props.mapStyle.metadata || {}
     MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox
@@ -94,6 +98,8 @@ export default class MapboxGlMap extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
+    if(!IS_SUPPORTED) return;
+
     const map = this.state.map;
 
     this.updateMapFromProps(this.props);
@@ -106,9 +112,12 @@ export default class MapboxGlMap extends React.Component {
     }
 
     map.showTileBoundaries = this.props.options.showTileBoundaries;
+    map.showCollisionBoxes = this.props.options.showCollisionBoxes;
   }
 
   componentDidMount() {
+    if(!IS_SUPPORTED) return;
+
     const mapOpts = {
       ...this.props.options,
       container: this.container,
@@ -119,6 +128,7 @@ export default class MapboxGlMap extends React.Component {
     const map = new MapboxGl.Map(mapOpts);
 
     map.showTileBoundaries = mapOpts.showTileBoundaries;
+    map.showCollisionBoxes = mapOpts.showCollisionBoxes;
 
     const zoom = new ZoomControl;
     map.addControl(zoom, 'top-right');
@@ -164,9 +174,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>
+    }
   }
 }

src/components/map/OpenLayers3Map.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import style from '../../libs/style.js'
-import isEqual from 'lodash.isequal'
 import { loadJSON } from '../../libs/urlopen'
 import 'ol/ol.css'