Split OL3 and GL map into separate files

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