Replace Mapbox GL with OL3

package.json

@@ -17,10 +17,12 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
+    "color-string": "^1.2.0",
     "file-saver": "^1.3.2",
     "immutable": "^3.8.1",
     "mapbox-gl": "^0.24.0",
     "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#83b1a3e5837d785af582efd5ed1a212f2df6a4ae",
+    "openlayers": "^3.18.2",
     "randomcolor": "^0.4.4",
     "react": "^15.3.0",
     "react-addons-pure-render-mixin": "15.3.1",

src/map.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import MapboxGl from 'mapbox-gl';
+import ol from 'openlayers'
+import olms from 'ol-mapbox-gl-style'
 import { fullHeight } from './theme.js'
 import style from './style.js'
 import Immutable from 'immutable'
@@ -11,35 +12,29 @@ export class Map extends React.Component {
 		accessToken: React.PropTypes.string,
 	}
 
-	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 => {
+	constructor(props) {
+		super(props)
 
-				//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
-					}
-				}
+		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'
+			})
+		})
+	}
 
-				console.log(change.command, ...change.args)
-				this.state.map[change.command].apply(this.state.map, change.args);
-			});
-		}
+	componentWillReceiveProps(nextProps) {
+		const jsonStyle = style.toJSON(nextProps.mapStyle)
+		const styleFunc = olms.getStyleFunction(jsonStyle, 'mapbox', this.resolutions)
+		this.layer.setStyle(styleFunc)
+		this.state.map.render()
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
@@ -48,16 +43,18 @@ export class Map extends React.Component {
 	}
 
 	componentDidMount() {
-		MapboxGl.accessToken = this.props.accessToken
-
-		const map = new MapboxGl.Map({
-			container: this.container,
-			style: style.toJSON(this.props.mapStyle),
-		});
+		const styleFunc = olms.getStyleFunction(style.toJSON(this.props.mapStyle), 'mapbox', this.resolutions)
+		this.layer.setStyle(styleFunc)
 
-		map.on("style.load", (...args) => {
-			this.setState({ map });
-		});
+		const map = new ol.Map({
+			target: this.container,
+			layers: [this.layer],
+			view: new ol.View({
+				center: [949282, 6002552],
+				zoom: 4
+			})
+		})
+		this.setState({ map });
 	}
 
 	render() {