Upgrade to unstable MapboxGL JS

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,
 }