Merge branch 'feature/multiple-renderers'

package.json

@@ -23,6 +23,8 @@
     "immutable": "^3.8.1",
     "mapbox-gl": "^0.24.0",
     "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#83b1a3e5837d785af582efd5ed1a212f2df6a4ae",
+    "ol-mapbox-style": "0.0.11",
+    "openlayers": "^3.19.1",
     "randomcolor": "^0.4.4",
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",

src/app.jsx

@@ -6,7 +6,8 @@ import Container from 'rebass/dist/Container'
 import Block from 'rebass/dist/Block'
 import Fixed from 'rebass/dist/Fixed'
 
-import { Map } from './map.jsx'
+import { MapboxGlMap } from './gl.jsx'
+import { OpenLayers3Map } from './ol3.jsx'
 import {Toolbar} from './toolbar.jsx'
 import style from './style.js'
 import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js'
@@ -116,7 +117,7 @@ export default class App extends React.Component {
         accessToken={this.state.accessToken}
         onAccessTokenChanged={this.onAccessTokenChanged.bind(this)}
       />
-      <Map
+      <OpenLayers3Map
         mapStyle={this.state.currentStyle}
         accessToken={this.state.accessToken}
       />

src/gl.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import MapboxGl from 'mapbox-gl';
+import { fullHeight } from './theme.js'
+import style from './style.js'
+import { Map } from './map.jsx'
+import Immutable from 'immutable'
+import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
+
+export class MapboxGlMap extends Map {
+  componentWillReceiveProps(nextProps) {
+    const tokenChanged = nextProps.accessToken !== MapboxGl.accessToken
+
+    // If the id has changed a new style has been uplaoded and
+    // it is safer to do a full new render
+    // TODO: might already be handled in diff algorithm?
+    const mapIdChanged = this.props.mapStyle.get('id') !== nextProps.mapStyle.get('id')
+
+    if(mapIdChanged || tokenChanged) {
+      this.state.map.setStyle(style.toJSON(nextProps.mapStyle))
+      return
+    }
+
+    // TODO: If there is no map yet we need to apply the changes later?
+    if(this.state.map) {
+      style.diffStyles(this.props.mapStyle, nextProps.mapStyle).forEach(change => {
+
+        //TODO: Invalid outline color can cause map to freeze?
+        if(change.command === "setPaintProperty" && change.args[1] === "fill-outline-color" ) {
+          const value = change.args[2]
+          if(validateColor({value}).length > 0) {
+            return
+          }
+        }
+
+        console.log(change.command, ...change.args)
+        this.state.map[change.command].apply(this.state.map, change.args);
+      });
+    }
+  }
+
+  componentDidMount() {
+    MapboxGl.accessToken = this.props.accessToken
+
+    const map = new MapboxGl.Map({
+      container: this.container,
+      style: style.toJSON(this.props.mapStyle),
+    });
+
+    map.on("style.load", (...args) => {
+      this.setState({ map });
+    });
+  }
+}

src/map.jsx

@@ -1,9 +1,6 @@
 import React from 'react'
-import MapboxGl from 'mapbox-gl';
 import { fullHeight } from './theme.js'
-import style from './style.js'
 import Immutable from 'immutable'
-import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 
 export class Map extends React.Component {
   static propTypes = {
@@ -11,56 +8,11 @@ export class Map extends React.Component {
     accessToken: React.PropTypes.string,
   }
 
-	componentWillReceiveProps(nextProps) {
-		const hasTokenChanged = nextProps.accessToken !== MapboxGl.accessToken
-    MapboxGl.accessToken = nextProps.accessToken
-
-		// If the id has changed a new style has been uplaoded and
-		// it is safer to do a full new render
-		// TODO: might already be handled in diff algorithm?
-		const mapIdChanged = this.props.mapStyle.get('id') !== nextProps.mapStyle.get('id')
-
-		if(mapIdChanged || hasTokenChanged) {
-			this.state.map.setStyle(style.toJSON(nextProps.mapStyle))
-			return
-		}
-
-		// TODO: If there is no map yet we need to apply the changes later?
-		if(this.state.map) {
-			style.diffStyles(this.props.mapStyle, nextProps.mapStyle).forEach(change => {
-
-				//TODO: Invalid outline color can cause map to freeze?
-				if(change.command === "setPaintProperty" && change.args[1] === "fill-outline-color" ) {
-					const value = change.args[2]
-					if(validateColor({value}).length > 0) {
-						return
-					}
-				}
-
-				console.log(change.command, ...change.args)
-				this.state.map[change.command].apply(this.state.map, change.args);
-			});
-		}
-	}
-
   shouldComponentUpdate(nextProps, nextState) {
     //TODO: If we enable this React mixin for immutable comparison we can remove this?
     return nextProps.mapStyle !== this.props.mapStyle
   }
 
-	componentDidMount() {
-		MapboxGl.accessToken = this.props.accessToken
-
-		const map = new MapboxGl.Map({
-			container: this.container,
-			style: style.toJSON(this.props.mapStyle),
-		});
-
-		map.on("style.load", (...args) => {
-			this.setState({ map });
-		});
-	}
-
   render() {
     return <div
     ref={x => this.container = x}

src/ol3.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import style from './style.js'
+import { Map } from './map.jsx'
+import ol from 'openlayers'
+import olms from 'ol-mapbox-style'
+
+export class OpenLayers3Map extends Map {
+  constructor(props) {
+    super(props)
+
+    const tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
+    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> ' +
+          '© <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'
+      })
+    })
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const jsonStyle = style.toJSON(nextProps.mapStyle)
+    const styleFunc = olms.getStyleFunction(jsonStyle, 'mapbox', this.resolutions)
+    this.layer.setStyle(styleFunc)
+    this.state.map.render()
+  }
+
+
+  componentDidMount() {
+    const styleFunc = olms.getStyleFunction(style.toJSON(this.props.mapStyle), 'mapbox', this.resolutions)
+    this.layer.setStyle(styleFunc)
+
+    const map = new ol.Map({
+    target: this.container,
+      layers: [this.layer],
+      view: new ol.View({
+        center: [949282, 6002552],
+        zoom: 4
+      })
+    })
+    this.setState({ map });
+  }
+}

webpack.production.config.js

@@ -42,6 +42,9 @@ module.exports = {
         //"react-icons",
         "react-motion",
         "rebass",
+        // Open Layers
+        'openlayers',
+        'ol-mapbox-style'
     ]
   },
   output: {