Merge branch 'feature/multiple-renderers'

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,72 +1,24 @@
 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 = {
-		mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-		accessToken: React.PropTypes.string,
-	}
+  static propTypes = {
+    mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+    accessToken: React.PropTypes.string,
+  }
 
-	componentWillReceiveProps(nextProps) {
-		const hasTokenChanged = nextProps.accessToken !== MapboxGl.accessToken
-    MapboxGl.accessToken = nextProps.accessToken
+  shouldComponentUpdate(nextProps, nextState) {
+    //TODO: If we enable this React mixin for immutable comparison we can remove this?
+    return nextProps.mapStyle !== this.props.mapStyle
+  }
 
-		// 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}
-				style={{
-					...fullHeight,
-					width: "100%",
-				}}></div>
-	}
+  render() {
+    return <div
+    ref={x => this.container = x}
+    style={{
+      ...fullHeight,
+      width: "100%",
+    }}></div>
+  }
 }

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 });
+  }
+}