Merge pull request #397 from orangemug/feature/ol-experimental-support

Added back in experimental OpenLayers support

src/components/map/OpenLayers3Map.jsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { loadJSON } from '../../libs/urlopen'
-import 'ol/ol.css'
-
-
-class OpenLayers3Map extends React.Component {
-  static propTypes = {
-    onDataChange: PropTypes.func,
-    mapStyle: PropTypes.object.isRequired,
-    accessToken: PropTypes.string,
-    style: PropTypes.object,
-  }
-
-  static defaultProps = {
-    onMapLoaded: () => {},
-    onDataChange: () => {},
-  }
-
-  constructor(props) {
-    super(props)
-    this.map = null
-  }
-
-  updateStyle(newMapStyle) {
-    const olms = require('ol-mapbox-style');
-    const styleFunc = olms.apply(this.map, newMapStyle)
-  }
-
-  componentDidUpdate() {
-    require.ensure(["ol", "ol-mapbox-style"], () => {
-      if(!this.map) return
-      this.updateStyle(this.props.mapStyle)
-    })
-  }
-
-  componentDidMount() {
-    //Load OpenLayers dynamically once we need it
-    //TODO: Make this more convenient
-    require.ensure(["ol", "ol/map", "ol/view", "ol/control/zoom", "ol-mapbox-style"], ()=> {
-      console.log('Loaded OpenLayers3 renderer')
-
-      const olMap = require('ol/map').default
-      const olView = require('ol/view').default
-      const olZoom = require('ol/control/zoom').default
-
-      const map = new olMap({
-        target: this.container,
-        layers: [],
-        view: new olView({
-          zoom: 2,
-          center: [52.5, -78.4]
-        })
-      })
-      map.addControl(new olZoom())
-      this.map = map
-      this.updateStyle(this.props.mapStyle)
-    })
-  }
-
-  render() {
-    return <div
-      ref={x => this.container = x}
-      style={{
-        position: "fixed",
-        top: 40,
-        right: 0,
-        bottom: 0,
-        height: 'calc(100% - 40px)',
-        width: "75%",
-        backgroundColor: '#fff',
-        ...this.props.style,
-      }}>
-    </div>
-  }
-}
-
-export default OpenLayers3Map

src/components/map/OpenLayersMap.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { loadJSON } from '../../libs/urlopen'
+
+import 'ol/ol.css'
+import {apply} from 'ol-mapbox-style';
+import {Map, View} from 'ol';
+
+
+export default class OpenLayersMap extends React.Component {
+  static propTypes = {
+    onDataChange: PropTypes.func,
+    mapStyle: PropTypes.object.isRequired,
+    accessToken: PropTypes.string,
+    style: PropTypes.object,
+  }
+
+  static defaultProps = {
+    onMapLoaded: () => {},
+    onDataChange: () => {},
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  updateStyle(newMapStyle) {
+    if(!this.map) return;
+    apply(this.map, newMapStyle);
+  }
+
+  componentDidUpdate() {
+    this.updateStyle(this.props.mapStyle);
+  }
+
+  componentDidMount() {
+    this.updateStyle(this.props.mapStyle);
+
+    const map = new Map({
+      target: this.container,
+      layers: [],
+      view: new View({
+        zoom: 2,
+        center: [52.5, -78.4]
+      })
+    })
+    this.map = map;
+  }
+
+  render() {
+    return <div
+      ref={x => this.container = x}
+      style={{
+        position: "fixed",
+        top: 40,
+        right: 0,
+        bottom: 0,
+        height: 'calc(100% - 40px)',
+        width: "75%",
+        backgroundColor: '#fff',
+        ...this.props.style,
+      }}>
+    </div>
+  }
+}
+