mapbox: use MultiPolygon for 'fill' trace with nulls

- as recommend in mapbox/mapbox-gl-js#3032

Author: etpinard

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

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;