Merge pull request #253 from orangemug/maintenance/openlayers-update

Updated openlayers

config/wdio.conf.js

@@ -35,7 +35,7 @@ exports.config = {
   mochaOpts: {
     ui: 'bdd',
     // Because we don't know how long the initial build will take...
-    timeout: 2*60*1000
+    timeout: 4*60*1000
   },
   onPrepare: function (config, capabilities) {
     var compiler = webpack(webpackConfig);

config/webpack.config.js

@@ -25,8 +25,7 @@ module.exports = {
   },
   module: {
     noParse: [
-      /mapbox-gl\/dist\/mapbox-gl.js/,
-      /openlayers\/dist\/ol.js/
+      /mapbox-gl\/dist\/mapbox-gl.js/
     ],
     loaders: loaders
   },

config/webpack.loaders.js

@@ -17,7 +17,8 @@ module.exports = [
   },
   {
     test: /\.jsx?$/,
-    exclude: /(.*node_modules(?![\/\\]@mapbox[\/\\]mapbox-gl-style-spec)|bower_components|public)/,
+    // Note: These modules aren't ES5 therefore we much compile them.
+    exclude: /(.*node_modules(?![\/\\](@mapbox[\/\\]mapbox-gl-style-spec|ol|mapbox-to-ol-style))|bower_components|public)/,
     loader: 'babel-loader',
     query: {
       presets: ['env', 'react'],

config/webpack.production.config.js

@@ -7,6 +7,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 var CopyWebpackPlugin = require('copy-webpack-plugin');
+var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 var OUTPATH;
 if(process.env.CIRCLE_ARTIFACTS) {
@@ -49,8 +50,7 @@ module.exports = {
   },
   module: {
     noParse: [
-      /mapbox-gl\/dist\/mapbox-gl.js/,
-      /openlayers\/dist\/ol.js/
+      /mapbox-gl\/dist\/mapbox-gl.js/
     ],
     loaders
   },
@@ -68,12 +68,7 @@ module.exports = {
         NODE_ENV: '"production"'
       }
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false,
-        screw_ie8: true,
-      }
-    }),
+    new UglifyJsPlugin(),
     new ExtractTextPlugin('[contenthash].css', {
       allChunks: true
     }),

package.json

@@ -37,8 +37,8 @@
     "mapbox-gl-inspect": "^1.2.6",
     "maputnik-design": "github:maputnik/design",
     "mousetrap": "^1.6.1",
-    "ol-mapbox-style": "^1.0.1",
-    "openlayers": "^4.4.2",
+    "ol-mapbox-style": "^2.10.1",
+    "ol": "^4.6.4",
     "prop-types": "^15.6.0",
     "react": "16.0.0",
     "react-addons-pure-render-mixin": "^15.6.2",
@@ -97,6 +97,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.24.1",
     "babel-runtime": "^6.26.0",
@@ -124,6 +125,7 @@
     "stylelint": "^7.13.0",
     "stylelint-config-standard": "^15.0.1",
     "transform-loader": "^0.2.4",
+    "uglifyjs-webpack-plugin": "^1.1.8",
     "wdio-mocha-framework": "^0.5.11",
     "wdio-phantomjs-service": "^0.2.2",
     "wdio-spec-reporter": "^0.1.2",

src/components/map/OpenLayers3Map.jsx

@@ -3,66 +3,8 @@ import PropTypes from 'prop-types'
 import style from '../../libs/style.js'
 import isEqual from 'lodash.isequal'
 import { loadJSON } from '../../libs/urlopen'
-import 'openlayers/dist/ol.css'
+import 'ol/ol.css'
 
-function suitableVectorSource(mapStyle) {
-  const sources = Object.keys(mapStyle.sources)
-    .map(sourceId => {
-      return {
-        id: sourceId,
-        source: mapStyle.sources[sourceId]
-      }
-    })
-    .filter(({source}) => (source.type === 'vector' || source.type === 'geojson'))
-  return sources[0]
-}
-
-function toVectorLayer(source, tilegrid, cb) {
-  function newMVTLayer(tileUrl) {
-    const ol = require('openlayers')
-    return new ol.layer.VectorTile({
-      source: new ol.source.VectorTile({
-        format: new ol.format.MVT(),
-        tileGrid: tilegrid,
-        tilePixelRatio: 8,
-        url: tileUrl
-      })
-    })
-  }
-
-  function newGeoJSONLayer(sourceUrl) {
-    const ol = require('openlayers')
-    return new ol.layer.Vector({
-      source: new ol.source.Vector({
-        format: new ol.format.GeoJSON(),
-        url: sourceUrl
-      })
-    })
-  }
-  if (source.type === 'vector') {
-    if(!source.tiles) {
-      sourceFromTileJSON(source.url, tileSource => {
-        cb(newMVTLayer(tileSource.tiles[0]))
-      })
-    } else {
-      cb(newMVTLayer(source.tiles[0]))
-    }
-  } else if (source.type === 'geojson') {
-    cb(newGeoJSONLayer(source.data))
-  }
-}
-
-function sourceFromTileJSON(url, cb) {
-  loadJSON(url, null, tilejson => {
-    if(!tilejson) return
-    cb({
-      type: 'vector',
-      tiles: tilejson.tiles,
-      minzoom: tilejson.minzoom,
-      maxzoom: tilejson.maxzoom,
-    })
-  })
-}
 
 class OpenLayers3Map extends React.Component {
   static propTypes = {
@@ -79,49 +21,17 @@ class OpenLayers3Map extends React.Component {
 
   constructor(props) {
     super(props)
-    this.tilegrid = null
-    this.resolutions = null
-    this.layer = null
     this.map = null
   }
 
   updateStyle(newMapStyle) {
-    const oldSource = suitableVectorSource(this.props.mapStyle)
-    const newSource = suitableVectorSource(newMapStyle)
-    const resolutions = this.resolutions
-
-      function setStyleFunc(map, layer) {
-        const olms = require('ol-mapbox-style')
-        const styleFunc = olms.getStyleFunction(newMapStyle, newSource.id, resolutions)
-        layer.setStyle(styleFunc)
-        //NOTE: We need to mark the source as changed in order
-        //to trigger a rerender
-        layer.getSource().changed()
-        map.render()
-    }
-
-    if(newSource) {
-      if(this.layer && !isEqual(oldSource, newSource)) {
-        this.map.removeLayer(this.layer)
-        this.layer = null
-      }
-
-      if(!this.layer) {
-        var self = this
-        toVectorLayer(newSource.source, this.tilegrid, vectorLayer => {
-          self.layer = vectorLayer
-          self.map.addLayer(self.layer)
-          setStyleFunc(self.map, self.layer)
-        })
-      } else {
-        setStyleFunc(this.map, this.layer)
-      }
-    }
+    const olms = require('ol-mapbox-style');
+    const styleFunc = olms.apply(this.map, newMapStyle)
   }
 
   componentWillReceiveProps(nextProps) {
-    require.ensure(["openlayers", "ol-mapbox-style"], () => {
-      if(!this.map || !this.resolutions) return
+    require.ensure(["ol", "ol-mapbox-style"], () => {
+      if(!this.map) return
       this.updateStyle(nextProps.mapStyle)
     })
   }
@@ -129,24 +39,22 @@ class OpenLayers3Map extends React.Component {
   componentDidMount() {
     //Load OpenLayers dynamically once we need it
     //TODO: Make this more convenient
-    require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
+    require.ensure(["ol", "ol/map", "ol/view", "ol/control/zoom", "ol-mapbox-style"], ()=> {
       console.log('Loaded OpenLayers3 renderer')
 
-      const ol = require('openlayers')
-      const olms = require('ol-mapbox-style')
+      const olMap = require('ol/map').default
+      const olView = require('ol/view').default
+      const olZoom = require('ol/control/zoom').default
 
-      this.tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
-      this.resolutions = this.tilegrid.getResolutions()
-
-      const map = new ol.Map({
+      const map = new olMap({
         target: this.container,
         layers: [],
-        view: new ol.View({
+        view: new olView({
           zoom: 2,
           center: [52.5, -78.4]
         })
       })
-      map.addControl(new ol.control.Zoom())
+      map.addControl(new olZoom())
       this.map = map
       this.updateStyle(this.props.mapStyle)
     })