Upgrade to unstable MapboxGL JS

package.json

@@ -24,7 +24,7 @@
     "immutable": "^3.8.1",
     "lodash.throttle": "^4.1.1",
     "lodash.topairs": "^4.3.0",
-    "mapbox-gl": "^0.28.0",
+    "mapbox-gl": "mapbox/mapbox-gl-js#6c24b9621d2aa770eda67fb5638b4d78087b5624",
     "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#e85407a377510acb647161de6be6357ab4f606dd",
     "ol-mapbox-style": "0.0.11",
     "openlayers": "^3.19.1",
@@ -37,7 +37,6 @@
     "react-file-reader-input": "^1.1.0",
     "react-icon-base": "^2.0.4",
     "react-icons": "^2.2.1",
-    "react-simpletabs": "^0.7.0",
     "react-sortable-hoc": "^0.4.5",
     "rebass": "^0.3.1",
     "request": "^2.79.0"

src/components/map/MapboxGlMap.jsx

@@ -19,34 +19,11 @@ export default class MapboxGlMap extends Map {
     this.state = { map: null }
   }
   componentWillReceiveProps(nextProps) {
-    const tokenChanged = nextProps.accessToken !== MapboxGl.accessToken
+    if(!this.state.map) return
 
-    // 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);
-      });
-    }
+    //Mapbox GL now does diffing natively so we don't need to calculate
+    //the necessary operations ourselves!
+    this.state.map.setStyle(style.toJSON(nextProps.mapStyle), { diff: true})
   }
 
   componentDidMount() {

src/libs/layerwatcher.js

@@ -24,7 +24,9 @@ export default class LayerWatcher {
     this._map.on('data', (e) => {
       if(e.dataType !== 'tile') return
 
-      this._sources[e.source.id] = e.source.vectorLayerIds
+      //NOTE: This heavily depends on the internal API of Mapbox GL
+      //so this breaks between Mapbox GL JS releases
+      this._sources[e.sourceId] = e.style.sourceCaches[e.sourceId]._source.vectorLayerIds
       this.throttledAnalyzeVectorLayerFields()
     })
   }

src/libs/style.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Immutable from 'immutable'
 import spec from 'mapbox-gl-style-spec/reference/latest.min.js'
-import diffJSONStyles from 'mapbox-gl-style-spec/lib/diff'
 
 // Standard JSON to Immutable conversion except layers
 // are stored in an OrderedMap to make lookups id fast
@@ -45,14 +44,6 @@ function ensureMetadataExists(style) {
   return ensureHasId(ensureHasTimestamp(style))
 }
 
-// Compare style with other style and return changes
-//TODO: Write own diff algo that operates on immutable collections
-// Should be able to improve performance since we can only compare
-// by reference
-function diffStyles(before, after) {
-  return diffJSONStyles(toJSON(before), toJSON(after))
-}
-
 // Turns immutable style back into JSON with the original order of the
 // layers preserved
 function toJSON(mapStyle) {
@@ -72,7 +63,6 @@ function toJSON(mapStyle) {
 export default {
   toJSON,
   fromJSON,
-  diffStyles,
   ensureMetadataExists,
   emptyStyle,
 }

webpack.config.js

@@ -56,7 +56,7 @@ module.exports = {
   module: {
     loaders,
     postLoaders: [{
-      include: /node_modules\/mapbox-gl-shaders/,
+      include: /node_modules\/mapbox-gl\/js\/render\/shaders.js/,
       loader: 'transform',
       query: 'brfs'
     }]

webpack.loaders.js

@@ -51,8 +51,8 @@ module.exports = [
     loader: 'json-loader'
   },
   {
-     test: /\.js$/,
-     include: '/node_modules/mapbox-gl-shaders/index.js',
-     loader: 'transform/cacheable?brfs'
+    test: /\.js$/,
+    include: /node_modules\/mapbox-gl\/js\/render\/shaders.js/,
+    loader: 'transform/cacheable?brfs'
   }
 ];