Miscellaneous mapbox tweaks

src/plots/mapbox/layers.js

@@ -45,9 +45,15 @@ proto.update = function update(opts) {
 };
 
 proto.needsNewSource = function(opts) {
+
+    // for some reason changing layer to 'fill' w/o changing the source
+    // throws an exception in mapbox-gl 0.18
+    var changesToFill = (this.layerType !== 'fill' && opts.type === 'fill');
+
     return (
         this.sourceType !== opts.sourcetype ||
-        this.source !== opts.source
+        this.source !== opts.source ||
+        changesToFill
     );
 };
 
@@ -126,21 +132,32 @@ function convertPaintOpts(opts) {
 
     switch(opts.type) {
 
+        case 'circle':
+            var circle = opts.circle;
+            Lib.extendFlat(paintOpts, {
+                'circle-radius': circle.radius,
+                'circle-color': circle.color,
+                'circle-opacity': opts.opacity
+            });
+            break;
+
         case 'line':
+            var line = opts.line;
             Lib.extendFlat(paintOpts, {
-                'line-width': opts.line.width,
-                'line-color': opts.line.color,
+                'line-width': line.width,
+                'line-color': line.color,
                 'line-opacity': opts.opacity
             });
             break;
 
         case 'fill':
+            var fill = opts.fill;
             Lib.extendFlat(paintOpts, {
-                'fill-color': opts.fillcolor,
-                'fill-outline-color': opts.line.color,
+                'fill-color': fill.color,
+                'fill-outline-color': fill.outlinecolor,
                 'fill-opacity': opts.opacity
 
-                // no way to pass line.width at the moment
+                // no way to pass specify outline width at the moment
             });
             break;
     }

src/plots/mapbox/layout_attributes.js

@@ -9,11 +9,7 @@
 
 'use strict';
 
-var scatterMapboxAttrs = require('../../traces/scattermapbox/attributes');
 var defaultLine = require('../../components/color').defaultLine;
-var extendFlat = require('../../lib').extendFlat;
-
-var lineAttrs = scatterMapboxAttrs.line;
 
 
 module.exports = {
@@ -129,12 +125,14 @@ module.exports = {
 
         type: {
             valType: 'enumerated',
-            values: ['line', 'fill'],
+            values: ['circle', 'line', 'fill'],
             dflt: 'line',
             role: 'info',
             description: [
                 'Sets the layer type.',
-                'Support for *raster*, *background* types is coming soon.'
+                'Support for *raster*, *background* types is coming soon.',
+                'Note that *line* and *fill* are not compatible with Point',
+                'GeoJSON geometry.'
             ].join(' ')
         },
 
@@ -150,14 +148,68 @@ module.exports = {
             ].join(' ')
         },
 
+        circle: {
+            radius: {
+                valType: 'number',
+                dflt: 15,
+                role: 'style',
+                description: [
+                    'Sets the circle radius.',
+                    'Has an effect only when `type` is set to *circle*.'
+                ].join(' ')
+            },
+            color: {
+                valType: 'color',
+                dflt: defaultLine,
+                role: 'style',
+                description: [
+                    'Sets the circle color.',
+                    'Has an effect only when `type` is set to *circle*.'
+                ].join(' ')
+            }
+        },
+
         line: {
-            color: extendFlat({}, lineAttrs.color, {
-                dflt: defaultLine
-            }),
-            width: lineAttrs.width
+            width: {
+                valType: 'number',
+                dflt: 2,
+                role: 'style',
+                description: [
+                    'Sets the line radius.',
+                    'Has an effect only when `type` is set to *line*.'
+                ].join(' ')
+            },
+            color: {
+                valType: 'color',
+                dflt: defaultLine,
+                role: 'style',
+                description: [
+                    'Sets the line color.',
+                    'Has an effect only when `type` is set to *line*.'
+                ].join(' ')
+            }
         },
 
-        fillcolor: scatterMapboxAttrs.fillcolor,
+        fill: {
+            color: {
+                valType: 'color',
+                dflt: defaultLine,
+                role: 'style',
+                description: [
+                    'Sets the fill color.',
+                    'Has an effect only when `type` is set to *fill*.'
+                ].join(' ')
+            },
+            outlinecolor: {
+                valType: 'color',
+                dflt: defaultLine,
+                role: 'style',
+                description: [
+                    'Sets the fill outline color.',
+                    'Has an effect only when `type` is set to *fill*.'
+                ].join(' ')
+            }
+        },
 
         opacity: {
             valType: 'number',

src/plots/mapbox/layout_defaults.js

@@ -49,26 +49,39 @@ function handleLayerDefaults(containerIn, containerOut) {
     }
 
     for(var i = 0; i < layersIn.length; i++) {
-        layerIn = layersIn[i];
+        layerIn = layersIn[i] || {};
         layerOut = {};
 
         var sourceType = coerce('sourcetype');
         coerce('source');
 
         if(sourceType === 'vector') coerce('sourcelayer');
 
-        // maybe add smart default based off 'fillcolor' ???
+        // maybe add smart default based off GeoJSON geometry
         var type = coerce('type');
 
-        var lineColor;
-        if(type === 'line' || type === 'fill') {
-            lineColor = coerce('line.color');
+        var dfltColor;
+
+        if(type === 'circle') {
+            dfltColor = (layerIn.line || {}).color || (layerIn.fill || {}).color;
+
+            coerce('circle.color', dfltColor);
+            coerce('circle.radius');
+        }
+
+        if(type === 'line') {
+            dfltColor = (layerIn.circle || {}).color || (layerIn.fill || {}).color;
+
+            coerce('line.color', dfltColor);
+            coerce('line.width');
         }
 
-        // no way to pass line.width to fill layers
-        if(type === 'line') coerce('line.width');
+        if(type === 'fill') {
+            dfltColor = (layerIn.circle || {}).color || (layerIn.line || {}).color;
 
-        if(type === 'fill') coerce('fillcolor', lineColor);
+            coerce('fill.color', dfltColor);
+            coerce('fill.outlinecolor', dfltColor);
+        }
 
         coerce('below');
         coerce('opacity');

src/plots/mapbox/mapbox.js

@@ -96,7 +96,8 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
     });
 
     // clear navigation container
-    var controlContainer = this.div.getElementsByClassName(constants.controlContainerClassName)[0];
+    var className = constants.controlContainerClassName,
+        controlContainer = this.div.getElementsByClassName(className)[0];
     this.div.removeChild(controlContainer);
 
     self.rejectOnError(reject);
@@ -113,6 +114,8 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         var center = map.getCenter();
         opts._input.center = opts.center = { lon: center.lng, lat: center.lat };
         opts._input.zoom = opts.zoom = map.getZoom();
+        opts._input.bearing = opts.bearing = map.getBearing();
+        opts._input.pitch = opts.pitch = map.getPitch();
     });
 
     map.on('mousemove', function(evt) {

src/traces/scattermapbox/defaults.js

@@ -45,7 +45,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('mode');
 
     if(subTypes.hasLines(traceOut)) {
-        handleLineDefaults(traceIn, traceOut, defaultColor, coerce);
+        handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce);
         coerce('connectgaps');
     }
 

test/image/assets/get_image_paths.js

@@ -20,10 +20,10 @@ module.exports = function getImagePaths(mockName, format) {
     return {
         baseline: join(constants.pathToTestImageBaselines, mockName, format),
         test: join(constants.pathToTestImages, mockName, format),
-        diff: join(constants.pathToTestImagesDiff, mockName, format)
+        diff: join(constants.pathToTestImagesDiff, 'diff-' + mockName, format)
     };
 };
 
-function join(basePath, mockName, format) {
-    return path.join(basePath, mockName) + '.' + format;
+function join(basePath, fileName, format) {
+    return path.join(basePath, fileName) + '.' + format;
 }

test/image/mocks/mapbox_layers.json

@@ -532,7 +532,9 @@
           },
           "type": "fill",
           "below": "water",
-          "fillcolor": "#ece2f0",
+          "fill": {
+            "color": "#ece2f0"
+          },
           "opacity": 0.8
         },
         {

test/jasmine/assets/has_webgl_support.js

@@ -0,0 +1,22 @@
+'use strict';
+
+
+module.exports = function hasWebGLSupport(testName) {
+    var gl, canvas;
+
+    try {
+        canvas = document.createElement('canvas');
+        gl = canvas.getContext('webgl');
+    }
+    catch(err) {
+        gl = null;
+    }
+
+    var hasSupport = !!gl;
+
+    if(!hasSupport) {
+        console.warn('Cannot get WebGL context. Skip test *' + testName + '*');
+    }
+
+    return hasSupport;
+};

test/jasmine/karma.ciconf.js

@@ -17,9 +17,7 @@ function func(config) {
     func.defaultConfig.exclude = [
         'tests/gl_plot_interact_test.js',
         'tests/gl_plot_interact_basic_test.js',
-        'tests/gl2d_scatterplot_contour_test.js',
-        'tests/mapbox_test.js',
-        'tests/scattermapbox_test.js'
+        'tests/gl2d_scatterplot_contour_test.js'
     ];
 
     // if true, Karma captures browsers, runs the tests and exits

test/jasmine/tests/mapbox_test.js

@@ -7,6 +7,7 @@ var supplyLayoutDefaults = require('@src/plots/mapbox/layout_defaults');
 var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
+var hasWebGLSupport = require('../assets/has_webgl_support');
 var mouseEvent = require('../assets/mouse_event');
 var customMatchers = require('../assets/custom_matchers');
 
@@ -101,7 +102,10 @@ describe('mapbox defaults', function() {
                         color: 'red',
                         width: 3
                     },
-                    fillcolor: 'blue'
+                    fill: {
+                        color: 'blue',
+                        outlinecolor: 'green'
+                    }
                 }]
             }
         };
@@ -110,17 +114,19 @@ describe('mapbox defaults', function() {
 
         expect(layoutOut.mapbox.layers[0].line.color).toEqual('red');
         expect(layoutOut.mapbox.layers[0].line.width).toEqual(3);
-        expect(layoutOut.mapbox.layers[0].fillcolor).toBeUndefined();
+        expect(layoutOut.mapbox.layers[0].fill).toBeUndefined();
 
-        expect(layoutOut.mapbox.layers[1].line.color).toEqual('red');
-        expect(layoutOut.mapbox.layers[1].line.width).toBeUndefined();
-        expect(layoutOut.mapbox.layers[1].fillcolor).toEqual('blue');
+        expect(layoutOut.mapbox.layers[1].line).toBeUndefined();
+        expect(layoutOut.mapbox.layers[1].fill.color).toEqual('blue');
+        expect(layoutOut.mapbox.layers[1].fill.outlinecolor).toEqual('green');
     });
 });
 
 describe('mapbox credentials', function() {
     'use strict';
 
+    if(!hasWebGLSupport('scattermapbox hover')) return;
+
     var dummyToken = 'asfdsa124331wersdsa1321q3';
     var gd;
 
@@ -168,6 +174,8 @@ describe('mapbox credentials', function() {
 describe('mapbox plots', function() {
     'use strict';
 
+    if(!hasWebGLSupport('scattermapbox hover')) return;
+
     var mock = require('@mocks/mapbox_0.json'),
         gd;
 
@@ -348,8 +356,8 @@ describe('mapbox plots', function() {
         };
 
         var styleUpdate0 = {
-            'mapbox.layers[0].fillcolor': 'red',
-            'mapbox.layers[0].line.color': 'blue',
+            'mapbox.layers[0].fill.color': 'red',
+            'mapbox.layers[0].fill.outlinecolor': 'blue',
             'mapbox.layers[0].opacity': 0.3
         };