From 0973dcee8ababb84e6c0d7ed896e0a522b04dd30 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 24 Sep 2018 14:05:53 +0100
Subject: [PATCH] Added back in experimental OpenLayers support

---
 package.json                            |  4 +-
 src/components/App.jsx                  |  7 ++-
 src/components/map/OpenLayers3Map.jsx   | 78 -------------------------
 src/components/map/OpenLayersMap.jsx    | 66 +++++++++++++++++++++
 src/components/modals/SettingsModal.jsx |  2 +-
 5 files changed, 74 insertions(+), 83 deletions(-)
 delete mode 100644 src/components/map/OpenLayers3Map.jsx
 create mode 100644 src/components/map/OpenLayersMap.jsx

diff --git a/package.json b/package.json
index 90d191b..4d2712c 100644
--- a/package.json
+++ b/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-mapbox-style": "^3.0.1",
+    "ol": "^5.0.0",
     "prop-types": "^15.6.0",
     "react": "^16.3.2",
     "react-aria-menubutton": "^5.1.1",
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 8c9eae4..877d5ed 100644
--- a/src/components/App.jsx
+++ b/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'
@@ -442,8 +443,10 @@ export default class App extends React.Component {
     let mapElement;
 
     // Check if OL3 code has been loaded?
-    if(renderer === 'ol3') {
-      mapElement = <div>TODO</div>
+    if(renderer === 'ol') {
+      mapElement = <OpenLayersMap
+        {...mapProps}
+      />
     } else {
       mapElement = <MapboxGlMap {...mapProps}
         inspectModeEnabled={this.state.inspectModeEnabled}
diff --git a/src/components/map/OpenLayers3Map.jsx b/src/components/map/OpenLayers3Map.jsx
deleted file mode 100644
index fade6b2..0000000
--- a/src/components/map/OpenLayers3Map.jsx
+++ /dev/null
@@ -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
diff --git a/src/components/map/OpenLayersMap.jsx b/src/components/map/OpenLayersMap.jsx
new file mode 100644
index 0000000..faa5606
--- /dev/null
+++ b/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>
+  }
+}
+
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index a79d8ee..d3f906f 100644
--- a/src/components/modals/SettingsModal.jsx
+++ b/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 3 (experimental)'],
           ]}
           value={metadata['maputnik:renderer'] || 'mbgljs'}
           onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}