Merge pull request #867 from plotly/bump-mapbox

Bump mapbox-gl to v0.22.0

Author: etpinard

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

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

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

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);
     }
 };

test/image/baselines/mapbox_angles.png

@@ -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;