diff --git a/package.json b/package.json index f1d04731..56ee0445 100644 --- a/package.json +++ b/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" diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index d7457d85..ec85a898 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/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() { diff --git a/src/libs/layerwatcher.js b/src/libs/layerwatcher.js index 373fdb05..25712fdf 100644 --- a/src/libs/layerwatcher.js +++ b/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() }) } diff --git a/src/libs/style.js b/src/libs/style.js index a47e4711..902afc70 100644 --- a/src/libs/style.js +++ b/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, } diff --git a/webpack.config.js b/webpack.config.js index 9a24ea48..188843f6 100644 --- a/webpack.config.js +++ b/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' }] diff --git a/webpack.loaders.js b/webpack.loaders.js index 60c24068..15988a57 100644 --- a/webpack.loaders.js +++ b/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' } ];