Fix displaying OL3

src/components/map/OpenLayers3Map.jsx

@@ -5,16 +5,25 @@ import style from '../../libs/style.js'
 class OpenLayers3Map extends Map {
   constructor(props) {
     super(props)
+  }
 
-    this.state = {
+  componentWillReceiveProps(nextProps) {
-      map: null,
+    require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
-      ol: null,
+      const ol = require('openlayers')
-      olms: null
+      const olms = require('ol-mapbox-style')
-    }
+      const jsonStyle = nextProps.mapStyle
+      const styleFunc = olms.getStyleFunction(jsonStyle, 'openmaptiles', this.resolutions)
+      this.layer.setStyle(styleFunc)
+      this.state.map.render()
+    })
+  }
 
+  componentDidMount() {
     //Load OpenLayers dynamically once we need it
     //TODO: Make this more convenient
     require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
+      console.log('Loaded OpenLayers3 renderer')
+
       const ol = require('openlayers')
       const olms = require('ol-mapbox-style')
 
@@ -22,55 +31,32 @@ class OpenLayers3Map extends Map {
       this.resolutions = tilegrid.getResolutions()
       this.layer = new ol.layer.VectorTile({
         source: new ol.source.VectorTile({
-          attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
+          attributions: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
-            '© <a href="http://www.openstreetmap.org/copyright">' +
-            'OpenStreetMap contributors</a>',
           format: new ol.format.MVT(),
           tileGrid: tilegrid,
           tilePixelRatio: 8,
-          url: 'http://osm2vectortiles-0.tileserver.com/v2/{z}/{x}/{y}.pbf'
+          url: 'https://free-0.tilehosting.com/data/v3/{z}/{x}/{y}.pbf?key=tXiQqN3lIgskyDErJCeY'
         })
       })
 
-      this.setState({
+      const jsonStyle = this.props.mapStyle
-        ol: ol,
+      const styleFunc = olms.getStyleFunction(jsonStyle, 'openmaptiles', this.resolutions)
-        olms: olms,
+      this.layer.setStyle(styleFunc)
+
+      console.log(jsonStyle.center, jsonStyle.zoom)
+      const map = new ol.Map({
+      target: this.container,
+        layers: [this.layer],
+        view: new ol.View({
+          center: jsonStyle.center,
+          zoom: 2,
+          //zoom: jsonStyle.zoom,
+        })
       })
-      console.log('Loaded OpenLayers3 renderer')
+      map.addControl(new ol.control.Zoom());
+      this.setState({ map });
     })
   }
-
-  componentWillReceiveProps(nextProps) {
-    const olms = this.state.olms
-    const ol = this.state.ol
-    if(!olms || !ol) return
-
-    const jsonStyle = style.toJSON(nextProps.mapStyle)
-    const styleFunc = olms.getStyleFunction(jsonStyle, 'mapbox', this.resolutions)
-    this.layer.setStyle(styleFunc)
-    this.state.map.render()
-  }
-
-  componentDidMount() {
-    const olms = this.state.olms
-    const ol = this.state.ol
-    if(!olms || !ol) return
-
-    const jsonStyle = style.toJSON(this.props.mapStyle)
-    const styleFunc = olms.getStyleFunction(jsonStyle, 'mapbox', this.resolutions)
-    this.layer.setStyle(styleFunc)
-
-    const map = new ol.Map({
-    target: this.container,
-      layers: [this.layer],
-      view: new ol.View({
-        center: jsonStyle.center,
-        zoom: jsonStyle.zoom,
-      })
-    })
-    map.addControl(new ol.control.Zoom());
-    this.setState({ map });
-  }
 }
 
 export default OpenLayers3Map