texttemplate: add support for scattermapbox

the baseline produced with the old image server does not show text
labels

Author: antoinerg

src/traces/scattermapbox/attributes.js

@@ -9,6 +9,7 @@
 'use strict';
 
 var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
+var texttemplateAttrs = require('../../plots/texttemplate_attributes');
 var scatterGeoAttrs = require('../scattergeo/attributes');
 var scatterAttrs = require('../scatter/attributes');
 var mapboxAttrs = require('../../plots/mapbox/layout_attributes');
@@ -49,6 +50,9 @@ module.exports = overrideAll({
             'these elements will be seen in the hover labels.'
         ].join(' ')
     }),
+    texttemplate: texttemplateAttrs({editType: 'calc'}, {
+        keys: ['lat', 'lon', 'text']
+    }),
     hovertext: extendFlat({}, scatterAttrs.hovertext, {
         description: [
             'Sets hover text elements associated with each (lon,lat) pair',

src/traces/scattermapbox/convert.js

@@ -20,7 +20,7 @@ var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
 var subTypes = require('../scatter/subtypes');
 var convertTextOpts = require('../../plots/mapbox/convert_text_opts');
 
-module.exports = function convert(calcTrace) {
+module.exports = function convert(calcTrace, gd) {
     var trace = calcTrace[0].trace;
 
     var isVisible = (trace.visible === true && trace._length !== 0);
@@ -87,7 +87,7 @@ module.exports = function convert(calcTrace) {
     }
 
     if(hasSymbols || hasText) {
-        symbol.geojson = makeSymbolGeoJSON(calcTrace);
+        symbol.geojson = makeSymbolGeoJSON(calcTrace, gd);
 
         Lib.extendFlat(symbol.layout, {
             visibility: 'visible',
@@ -229,7 +229,7 @@ function makeCircleOpts(calcTrace) {
     };
 }
 
-function makeSymbolGeoJSON(calcTrace) {
+function makeSymbolGeoJSON(calcTrace, gd) {
     var trace = calcTrace[0].trace;
 
     var marker = trace.marker || {};
@@ -251,6 +251,16 @@ function makeSymbolGeoJSON(calcTrace) {
 
         if(isBADNUM(calcPt.lonlat)) continue;
 
+        var txt = trace.texttemplate;
+        if(txt) {
+            var txti = Array.isArray(txt) ? (txt[i] || '') : txt;
+            calcPt.text = calcPt.tx;
+            calcPt.lon = calcPt.lonlat[0];
+            calcPt.lat = calcPt.lonlat[1];
+            calcPt.customdata = calcPt.data;
+            calcPt.txt = Lib.texttemplateString(txti, {}, gd._fullLayout._d3locale, calcPt, trace._meta || {});
+        }
+
         features.push({
             type: 'Feature',
             geometry: {
@@ -259,7 +269,7 @@ function makeSymbolGeoJSON(calcTrace) {
             },
             properties: {
                 symbol: fillSymbol(calcPt.mx),
-                text: fillText(calcPt.tx)
+                text: txt ? calcPt.txt : fillText(calcPt.tx)
             }
         });
     }

src/traces/scattermapbox/defaults.js

@@ -29,6 +29,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     coerce('text');
+    coerce('texttemplate');
     coerce('hovertext');
     coerce('hovertemplate');
     coerce('mode');

src/traces/scattermapbox/plot.js

@@ -67,7 +67,7 @@ proto.addLayer = function(k, opts, below) {
 proto.update = function update(calcTrace) {
     var subplot = this.subplot;
     var map = subplot.map;
-    var optsAll = convert(calcTrace);
+    var optsAll = convert(calcTrace, subplot.gd);
     var below = subplot.belowLookup['trace-' + this.uid];
     var i, k, opts;
 
@@ -113,7 +113,7 @@ proto.dispose = function dispose() {
 module.exports = function createScatterMapbox(subplot, calcTrace) {
     var trace = calcTrace[0].trace;
     var scatterMapbox = new ScatterMapbox(subplot, trace.uid);
-    var optsAll = convert(calcTrace);
+    var optsAll = convert(calcTrace, subplot.gd);
     var below = scatterMapbox.below = subplot.belowLookup['trace-' + trace.uid];
 
     for(var i = 0; i < ORDER.length; i++) {

test/image/baselines/mapbox_texttemplate.png

@@ -0,0 +1,38 @@
+{
+  "data": [{
+    "type": "scattermapbox",
+    "mode": "markers+text",
+    "lon": [
+      -73.57,
+      -79.24,
+      -123.06
+    ],
+    "lat": [
+      45.5,
+      43.4,
+      49.13
+    ],
+    "text": [
+      "Montreal",
+      "Toronto",
+      "Vancouver"
+    ],
+    "texttemplate": "%{text} (%{lonlat[0]}, %{lonlat[1]}): %{customdata:.2s}",
+    "textposition": "top center",
+    "customdata": [1780000, 2930000, 675218]
+  }],
+
+  "layout": {
+    "width": 500,
+    "height": 500,
+    "title": {"text": "Mapbox with texttemplate"},
+    "margin": {"t": 30, "b": 0, "l": 0, "r": 0},
+    "mapbox": {
+      "center": {
+        "lon": -90,
+        "lat": 45
+      },
+      "zoom": 1.5
+    }
+  }
+}

test/image/mocks/mapbox_texttemplate.json

@@ -139,7 +139,7 @@ describe('scattermapbox convert', function() {
         Plots.doCalcdata(gd, fullTrace);
 
         var calcTrace = gd.calcdata[0];
-        return convert(calcTrace);
+        return convert(calcTrace, {_fullLayout: {_d3locale: false}});
     }
 
     function assertVisibility(opts, expectations) {
@@ -478,6 +478,44 @@ describe('scattermapbox convert', function() {
         expect(actualText).toEqual(['A', 'B', 'C', 'F', undefined]);
     });
 
+    it('should generate correct output for texttemplate without text', function() {
+        var opts = _convert(Lib.extendFlat({}, base, {
+            mode: 'lines+text',
+            connectgaps: true,
+            textposition: 'outside',
+            texttemplate: ['A', 'B', 'C', 'D', 'E', 'F']
+        }));
+
+        var actualText = opts.symbol.geojson.features.map(function(f) {
+            return f.properties.text;
+        });
+
+        expect(actualText).toEqual(['A', 'B', 'C', 'F', '']);
+    });
+
+    it('should generate correct output for texttemplate', function() {
+        var mock = {
+            'type': 'scattermapbox',
+            'mode': 'markers+text',
+            'lon': [-73.57, -79.24, -123.06],
+            'lat': [45.5, 43.4, 49.13],
+            'text': ['Montreal', 'Toronto', 'Vancouver'],
+            'texttemplate': '%{text} (%{lonlat[0]}, %{lonlat[1]}): %{customdata:.2s}',
+            'textposition': 'top center',
+            'customdata': [1780000, 2930000, 675218]
+        };
+        var opts = _convert(mock);
+        var actualText = opts.symbol.geojson.features.map(function(f) {
+            return f.properties.text;
+        });
+
+        expect(actualText).toEqual([
+            'Montreal (-73.57, 45.5): 1.8M',
+            'Toronto (-79.24, 43.4): 2.9M',
+            'Vancouver (-123.06, 49.13): 680k'
+        ]);
+    });
+
     it('should generate correct output for lines traces with trailing gaps', function() {
         var opts = _convert(Lib.extendFlat({}, base, {
             mode: 'lines',