make convert handle bubble with text case:

- also tweak factor for cleaner look
- add bubble with text image test

Author: etpinard

src/traces/scattermapbox/convert.js

@@ -24,7 +24,8 @@ module.exports = function convert(calcTrace) {
         hasLines = subTypes.hasLines(trace),
         hasMarkers = subTypes.hasMarkers(trace),
         hasText = subTypes.hasText(trace),
-        hasCircles = (hasMarkers && trace.marker.symbol === 'circle');
+        hasCircles = (hasMarkers && trace.marker.symbol === 'circle'),
+        hasSymbols = (hasMarkers && trace.marker.symbol !== 'circle');
 
     var fill = initContainer(),
         line = initContainer(),
@@ -84,7 +85,7 @@ module.exports = function convert(calcTrace) {
         });
     }
 
-    if(!hasCircles || hasText) {
+    if(hasSymbols || hasText) {
         symbol.geojson = makeSymbolGeoJSON(calcTrace);
 
         Lib.extendFlat(symbol.layout, {
@@ -93,7 +94,7 @@ module.exports = function convert(calcTrace) {
             'text-field': '{text}'
         });
 
-        if(hasMarkers) {
+        if(hasSymbols) {
             Lib.extendFlat(symbol.layout, {
                 'icon-size': trace.marker.size / 10
             });
@@ -314,8 +315,9 @@ function calcTextOpts(trace) {
 
     // ballpack values
     var ms = (trace.marker || {}).size,
-        xInc = 0.5 + (ms / 15),
-        yInc = 1.5 + (ms / 15);
+        factor = Array.isArray(ms) ? Lib.mean(ms) : ms,
+        xInc = 0.5 + (factor / 100),
+        yInc = 1.5 + (factor / 100);
 
     var anchorVals = ['', ''],
         offset = [0, 0];

test/image/baselines/mapbox_bubbles-text.png

@@ -0,0 +1,52 @@
+{
+  "data": [
+    {
+      "type": "scattermapbox",
+      "mode": "markers+lines+text",
+      "lon": [
+        10,
+        20,
+        30
+      ],
+      "lat": [
+        10,
+        20,
+        30
+      ],
+      "marker": {
+        "size": [
+            10,
+            30,
+            20
+        ],
+        "color": [
+          "red",
+          "green",
+          "blue"
+        ]
+      },
+      "text": [
+        "A",
+        "B",
+        "C"
+      ],
+      "textposition": "top left",
+      "textfont": {
+        "size": 20,
+        "color": "red"
+      }
+    }
+  ],
+  "layout": {
+    "mapbox": {
+      "style": "light",
+      "zoom": 2.5,
+      "center": {
+        "lon": 19.5,
+        "lat": 22
+      }
+    },
+    "width": 700,
+    "height": 450
+  }
+}

test/image/baselines/mapbox_symbol-text.png

@@ -363,15 +363,15 @@ describe('scattermapbox convert', function() {
 
     it('should correctly convert \'textposition\' to \'text-anchor\' and \'text-offset\'', function() {
         var specs = {
-            'top left': ['top-right', [-1.5, -2.5]],
-            'top center': ['top', [0, -2.5]],
-            'top right': ['top-left', [1.5, -2.5]],
-            'middle left': ['right', [-1.5, 0]],
+            'top left': ['top-right', [-0.65, -1.65]],
+            'top center': ['top', [0, -1.65]],
+            'top right': ['top-left', [0.65, -1.65]],
+            'middle left': ['right', [-0.65, 0]],
             'middle center': ['center', [0, 0]],
-            'middle right': ['left', [1.5, 0]],
-            'bottom left': ['bottom-right', [-1.5, 2.5]],
-            'bottom center': ['bottom', [0, 2.5]],
-            'bottom right': ['bottom-left', [1.5, 2.5]]
+            'middle right': ['left', [0.65, 0]],
+            'bottom left': ['bottom-right', [-0.65, 1.65]],
+            'bottom center': ['bottom', [0, 1.65]],
+            'bottom right': ['bottom-left', [0.65, 1.65]]
         };
 
         Object.keys(specs).forEach(function(k) {