{},
- 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 this.container = x}
- style={{
- position: "fixed",
- top: 40,
- right: 0,
- bottom: 0,
- height: 'calc(100% - 40px)',
- width: "75%",
- backgroundColor: '#fff',
- ...this.props.style,
- }}>
-
- }
-}
-
-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 this.container = x}
+ style={{
+ position: "fixed",
+ top: 40,
+ right: 0,
+ bottom: 0,
+ height: 'calc(100% - 40px)',
+ width: "75%",
+ backgroundColor: '#fff',
+ ...this.props.style,
+ }}>
+
+ }
+}
+
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index a79d8ee..69726f3 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 (experimental)'],
]}
value={metadata['maputnik:renderer'] || 'mbgljs'}
onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}