use circle for densitymapbox legend with radial gradient

Author: archmoj

src/components/legend/style.js

@@ -499,12 +499,17 @@ module.exports = function style(s, gd) {
                     break;
                 case 'choropleth' :
                 case 'choroplethmapbox' :
-                case 'densitymapbox' :
                     ptsData = [
                         ['M-6,-6V6H6V-6Z']
                     ];
                     useGradient = true;
                     break;
+                case 'densitymapbox' :
+                    ptsData = [
+                        ['M-6,0 a6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0']
+                    ];
+                    useGradient = 'radial';
+                    break;
                 case 'cone' :
                     ptsData = [
                         ['M-6,2 A2,2 0 0,0 -6,6 V6L6,4Z'],
@@ -573,7 +578,7 @@ module.exports = function style(s, gd) {
                 if(s.size()) {
                     var gradientID = 'legendfill-' + trace.uid;
                     Drawing.gradient(s, gd, gradientID,
-                        getGradientDirection(reversescale),
+                        getGradientDirection(reversescale, useGradient === 'radial'),
                         colorscale, 'fill');
                 }
             };
@@ -602,6 +607,7 @@ module.exports = function style(s, gd) {
     }
 };
 
-function getGradientDirection(reversescale) {
-    return reversescale ? 'horizontal' : 'horizontalreversed';
+function getGradientDirection(reversescale, isRadial) {
+    var str = isRadial ? 'radial' : 'horizontal';
+    return str + (reversescale ? '' : 'reversed');
 }

test/image/baselines/mapbox_density-mulitple_legend.png

@@ -0,0 +1,43 @@
+{
+  "data": [{
+    "showlegend": true,
+    "showscale": false,
+    "type": "densitymapbox",
+    "name": "w/ reversescale:true",
+    "lon": [10, 20, 30],
+    "lat": [15, 25, 35],
+    "z": [1, 3, 2],
+    "zmid": 0,
+    "reversescale": true,
+    "radius": 50,
+    "below": "",
+    "colorbar": {
+      "y": 1,
+      "yanchor": "top",
+      "len": 0.45
+    }
+  }, {
+    "showlegend": true,
+    "showscale": false,
+    "type": "densitymapbox",
+    "name": "w/0 z data",
+    "lon": [-10, -20, -30],
+    "lat": [15, 25, 35],
+    "zmin": 0,
+    "zauto": false,
+    "radius": [50, 100, 10],
+    "colorbar": {
+      "y": 0,
+      "yanchor": "bottom",
+      "len": 0.45
+    }
+  }],
+  "layout": {
+    "mapbox": {
+      "style": "light",
+      "center": {"lat": 20}
+    },
+    "width": 600,
+    "height": 400
+  }
+}