diff --git a/package.json b/package.json index 961010dc589..5184e6aa2ca 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "gl-select-box": "^1.0.1", "gl-spikes2d": "^1.0.1", "gl-surface3d": "^1.2.3", - "mapbox-gl": "^0.18.0", + "mapbox-gl": "^0.22.0", "mouse-change": "^1.1.1", "mouse-wheel": "^1.0.2", "ndarray": "^1.0.16", diff --git a/src/plots/mapbox/mapbox.js b/src/plots/mapbox/mapbox.js index 803f77b66b7..04bd1ba01f4 100644 --- a/src/plots/mapbox/mapbox.js +++ b/src/plots/mapbox/mapbox.js @@ -358,16 +358,24 @@ proto.toImage = function() { // convenience wrapper to create blank GeoJSON sources // and avoid 'invalid GeoJSON' errors -proto.createGeoJSONSource = function() { +proto.initSource = function(idSource) { var blank = { - type: 'Feature', - geometry: { - type: 'Point', - coordinates: [] + type: 'geojson', + data: { + type: 'Feature', + geometry: { + type: 'Point', + coordinates: [] + } } }; - return new mapboxgl.GeoJSONSource({data: blank}); + return this.map.addSource(idSource, blank); +}; + +// convenience wrapper to set data of GeoJSON sources +proto.setSourceData = function(idSource, data) { + this.map.getSource(idSource).setData(data); }; // convenience wrapper to create set multiple layer diff --git a/src/traces/scattermapbox/convert.js b/src/traces/scattermapbox/convert.js index f6248d7eb63..17c978ebf68 100644 --- a/src/traces/scattermapbox/convert.js +++ b/src/traces/scattermapbox/convert.js @@ -147,9 +147,21 @@ function makeBlankGeoJSON() { } function makeFillGeoJSON(_, coords) { + if(coords.length === 1) { + return { + type: 'Polygon', + coordinates: coords + }; + } + + var _coords = new Array(coords.length); + for(var i = 0; i < coords.length; i++) { + _coords[i] = [coords[i]]; + } + return { - type: 'Polygon', - coordinates: coords + type: 'MultiPolygon', + coordinates: _coords }; } diff --git a/src/traces/scattermapbox/plot.js b/src/traces/scattermapbox/plot.js index 18fc54ebdb1..f89d7ba40dd 100644 --- a/src/traces/scattermapbox/plot.js +++ b/src/traces/scattermapbox/plot.js @@ -28,17 +28,10 @@ function ScatterMapbox(mapbox, uid) { this.idLayerCircle = uid + '-layer-circle'; this.idLayerSymbol = uid + '-layer-symbol'; - this.sourceFill = mapbox.createGeoJSONSource(); - this.map.addSource(this.idSourceFill, this.sourceFill); - - this.sourceLine = mapbox.createGeoJSONSource(); - this.map.addSource(this.idSourceLine, this.sourceLine); - - this.sourceCircle = mapbox.createGeoJSONSource(); - this.map.addSource(this.idSourceCircle, this.sourceCircle); - - this.sourceSymbol = mapbox.createGeoJSONSource(); - this.map.addSource(this.idSourceSymbol, this.sourceSymbol); + this.mapbox.initSource(this.idSourceFill); + this.mapbox.initSource(this.idSourceLine); + this.mapbox.initSource(this.idSourceCircle); + this.mapbox.initSource(this.idSourceSymbol); this.map.addLayer({ id: this.idLayerFill, @@ -73,7 +66,6 @@ var proto = ScatterMapbox.prototype; proto.update = function update(calcTrace) { var mapbox = this.mapbox; - var opts = convert(calcTrace); mapbox.setOptions(this.idLayerFill, 'setLayoutProperty', opts.fill.layout); @@ -82,22 +74,22 @@ proto.update = function update(calcTrace) { mapbox.setOptions(this.idLayerSymbol, 'setLayoutProperty', opts.symbol.layout); if(isVisible(opts.fill)) { - this.sourceFill.setData(opts.fill.geojson); + mapbox.setSourceData(this.idSourceFill, opts.fill.geojson); mapbox.setOptions(this.idLayerFill, 'setPaintProperty', opts.fill.paint); } if(isVisible(opts.line)) { - this.sourceLine.setData(opts.line.geojson); + mapbox.setSourceData(this.idSourceLine, opts.line.geojson); mapbox.setOptions(this.idLayerLine, 'setPaintProperty', opts.line.paint); } if(isVisible(opts.circle)) { - this.sourceCircle.setData(opts.circle.geojson); + mapbox.setSourceData(this.idSourceCircle, opts.circle.geojson); mapbox.setOptions(this.idLayerCircle, 'setPaintProperty', opts.circle.paint); } if(isVisible(opts.symbol)) { - this.sourceSymbol.setData(opts.symbol.geojson); + mapbox.setSourceData(this.idSourceSymbol, opts.symbol.geojson); mapbox.setOptions(this.idLayerSymbol, 'setPaintProperty', opts.symbol.paint); } }; diff --git a/test/image/baselines/mapbox_angles.png b/test/image/baselines/mapbox_angles.png index f022f262813..e1e8a9ce868 100644 Binary files a/test/image/baselines/mapbox_angles.png and b/test/image/baselines/mapbox_angles.png differ diff --git a/test/image/baselines/mapbox_custom-style.png b/test/image/baselines/mapbox_custom-style.png index 2eb7063177e..d744a8c7500 100644 Binary files a/test/image/baselines/mapbox_custom-style.png and b/test/image/baselines/mapbox_custom-style.png differ diff --git a/test/image/baselines/mapbox_layers.png b/test/image/baselines/mapbox_layers.png index b8e79cbb279..f8724dbf804 100644 Binary files a/test/image/baselines/mapbox_layers.png and b/test/image/baselines/mapbox_layers.png differ diff --git a/test/jasmine/tests/scattermapbox_test.js b/test/jasmine/tests/scattermapbox_test.js index e8eea6e1a2e..80787a43e5b 100644 --- a/test/jasmine/tests/scattermapbox_test.js +++ b/test/jasmine/tests/scattermapbox_test.js @@ -307,14 +307,14 @@ describe('scattermapbox convert', function() { assertVisibility(opts, ['visible', 'visible', 'visible', 'none']); - var lineCoords = [[ - [10, 20], [20, 20], [30, 10] - ], [ - [20, 10], [10, 20] - ]]; + var segment1 = [[10, 20], [20, 20], [30, 10]], + segment2 = [[20, 10], [10, 20]]; + + var lineCoords = [segment1, segment2], + fillCoords = [[segment1], [segment2]]; - expect(opts.fill.geojson.coordinates).toEqual(lineCoords, 'have correct fill coords'); expect(opts.line.geojson.coordinates).toEqual(lineCoords, 'have correct line coords'); + expect(opts.fill.geojson.coordinates).toEqual(fillCoords, 'have correct fill coords'); var circleCoords = opts.circle.geojson.features.map(function(f) { return f.geometry.coordinates;