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

Added back in experimental OpenLayers support

Dockerfile

@@ -1,4 +1,4 @@
-FROM nodesource/xenial:6.1.0
+FROM node:10
 
 EXPOSE 8888
 

package.json

@@ -35,8 +35,8 @@
     "mapbox-gl": "^0.47.0",
     "mapbox-gl-inspect": "^1.3.1",
     "maputnik-design": "github:maputnik/design",
-    "ol-mapbox-style": "^2.10.1",
-    "ol": "^4.6.5",
+    "ol": "^5.2.0",
+    "ol-mapbox-style": "^3.1.0",
     "prop-types": "^15.6.0",
     "react": "^16.3.2",
     "react-aria-menubutton": "^5.1.1",

src/components/App.jsx

@@ -6,6 +6,7 @@ import {arrayMove} from 'react-sortable-hoc'
 import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
+import OpenLayersMap from './map/OpenLayersMap'
 import LayerList from './layers/LayerList'
 import LayerEditor from './layers/LayerEditor'
 import Toolbar from './Toolbar'
@@ -440,9 +441,11 @@ export default class App extends React.Component {
 
     let mapElement;
 
-    // Check if OL3 code has been loaded?
-    if(renderer === 'ol3') {
-      mapElement = <div>TODO</div>
+    // Check if OL code has been loaded?
+    if(renderer === 'ol') {
+      mapElement = <OpenLayersMap
+        {...mapProps}
+      />
     } else {
       mapElement = <MapboxGlMap {...mapProps}
         inspectModeEnabled={this.state.mapState === "inspect"}

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>
+  }
+}
+

src/components/modals/SettingsModal.jsx

@@ -103,7 +103,7 @@ class SettingsModal extends React.Component {
           data-wd-key="modal-settings.maputnik:renderer" 
           options={[
             ['mbgljs', 'MapboxGL JS'],
-            // ['ol3', 'Open Layers 3'],
+            ['ol', 'Open Layers (experimental)'],
           ]}
           value={metadata['maputnik:renderer'] || 'mbgljs'}
           onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}