add layer type 'circle' :

- so that Point geojson can be displayed as mapbox circle layers
- change layer attribute to be more one-to-one with the mapbox api,
  where styles of different layer types will be set in different
  container objects

Author: etpinard

src/plots/mapbox/layers.js

@@ -126,21 +126,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');

test/image/mocks/mapbox_layers.json

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

test/jasmine/tests/mapbox_test.js

@@ -102,7 +102,10 @@ describe('mapbox defaults', function() {
                         color: 'red',
                         width: 3
                     },
-                    fillcolor: 'blue'
+                    fill: {
+                        color: 'blue',
+                        outlinecolor: 'green'
+                    }
                 }]
             }
         };
@@ -111,11 +114,11 @@ 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');
     });
 });
 
@@ -353,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
         };