Have both Mapbox GL and OL3 as map targets

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,7 @@ 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, OpenLayer3Map } from './map.jsx'
 import {Toolbar} from './toolbar.jsx'
 import style from './style.js'
 import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js'
@@ -110,7 +110,7 @@ export default class App extends React.Component {
 				accessToken={this.state.accessToken}
 				onAccessTokenChanged={this.onAccessTokenChanged.bind(this)}
 			/>
-			<Map
+			<OpenLayer3Map
 				mapStyle={this.state.currentStyle}
 				accessToken={this.state.accessToken}
 			/>

src/map.jsx

@@ -4,6 +4,8 @@ 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'
+import ol from 'openlayers'
+import olms from 'ol-mapbox-style'
 
 export class Map extends React.Component {
 	static propTypes = {
@@ -11,6 +13,22 @@ export class Map extends React.Component {
 		accessToken: React.PropTypes.string,
 	}
 
+	shouldComponentUpdate(nextProps, nextState) {
+		//TODO: If we enable this React mixin for immutable comparison we can remove this?
+		return nextProps.mapStyle !== this.props.mapStyle
+	}
+
+	render() {
+		return <div
+		ref={x => this.container = x}
+		style={{
+			...fullHeight,
+			width: "100%",
+		}}></div>
+	}
+}
+
+export class MapboxGlMap extends Map {
 	componentWillReceiveProps(nextProps) {
 		const tokenChanged = nextProps.accessToken !== MapboxGl.accessToken
 
@@ -42,11 +60,6 @@ export class Map extends React.Component {
 		}
 	}
 
-	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
 
@@ -59,13 +72,47 @@ export class Map extends React.Component {
 			this.setState({ map });
 		});
   }
+}
 
-	render() {
+export class OpenLayer3Map extends Map {
-			return <div
+	constructor(props) {
-				ref={x => this.container = x}
+		super(props)
-				style={{
+
-					...fullHeight,
+		const tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
-					width: "100%",
+		this.resolutions = tilegrid.getResolutions()
-				}}></div>
+		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 });
 	}
 }