Restructure and rename components

src/components/map/Map.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import Immutable from 'immutable'
+
+export default class Map extends React.Component {
+  static propTypes = {
+    mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+    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={{
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      height: "100%",
+      width: "100%",
+    }}></div>
+  }
+}

src/components/map/MapboxGlMap.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import MapboxGl from 'mapbox-gl'
+import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
+
+import Map from './Map.jsx'
+import style from '../../libs/style.js'
+
+export default class MapboxGlMap extends Map {
+  static propTypes = {
+    onMapLoaded: React.PropTypes.func,
+  }
+
+  static defaultProps = {
+    onMapLoaded: () => {}
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = { map: null }
+  }
+  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')
+
+    // TODO: If there is no map yet we need to apply the changes later?
+    if(this.state.map) {
+      if(mapIdChanged || tokenChanged) {
+        this.state.map.setStyle(style.toJSON(nextProps.mapStyle))
+        return
+      }
+
+      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.props.onMapLoaded(map)
+      this.setState({ map });
+    });
+  }
+}

src/components/map/OpenLayers3Map.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import ol from 'openlayers'
+import olms from 'ol-mapbox-style'
+
+import Map from './Map'
+import style from '../../libs/style.js'
+
+export default 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 jsonStyle = style.toJSON(this.props.mapStyle)
+    const styleFunc = olms.getStyleFunction(jsonStyle, 'mapbox', this.resolutions)
+    this.layer.setStyle(styleFunc)
+
+    const map = new ol.Map({
+    target: this.container,
+      layers: [this.layer],
+      view: new ol.View({
+        center: jsonStyle.center,
+        zoom: jsonStyle.zoom,
+      })
+    })
+    map.addControl(new ol.control.Zoom());
+    this.setState({ map });
+  }
+}