diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js
index b83bb2a92be..484cc74b5d1 100644
--- a/src/lib/svg_text_utils.js
+++ b/src/lib/svg_text_utils.js
@@ -259,7 +259,7 @@ var ZERO_WIDTH_SPACE = '\u200b';
*/
var PROTOCOLS = ['http:', 'https:', 'mailto:', '', undefined, ':'];
-var NEWLINES = /(\r\n?|\n)/g;
+var NEWLINES = exports.NEWLINES = /(\r\n?|\n)/g;
var SPLIT_TAGS = /(<[^<>]*>)/;
diff --git a/src/traces/scattermapbox/convert.js b/src/traces/scattermapbox/convert.js
index 9aa9c13b79c..564ac69a71c 100644
--- a/src/traces/scattermapbox/convert.js
+++ b/src/traces/scattermapbox/convert.js
@@ -20,6 +20,9 @@ var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
var subTypes = require('../scatter/subtypes');
var convertTextOpts = require('../../plots/mapbox/convert_text_opts');
+var NEWLINES = require('../../lib/svg_text_utils').NEWLINES;
+var BR_TAG_ALL = require('../../lib/svg_text_utils').BR_TAG_ALL;
+
module.exports = function convert(gd, calcTrace) {
var trace = calcTrace[0].trace;
@@ -234,14 +237,13 @@ function makeSymbolGeoJSON(calcTrace, gd) {
var marker = trace.marker || {};
var symbol = marker.symbol;
- var text = trace.text;
var fillSymbol = (symbol !== 'circle') ?
getFillFunc(symbol) :
blankFillFunc;
var fillText = subTypes.hasText(trace) ?
- getFillFunc(text) :
+ getFillFunc(trace.text) :
blankFillFunc;
var features = [];
@@ -261,6 +263,9 @@ function makeSymbolGeoJSON(calcTrace, gd) {
calcPt.txt = Lib.texttemplateString(txti, {}, gd._fullLayout._d3locale, calcPt, trace._meta || {});
}
+ var text = txt ? calcPt.txt : fillText(calcPt.tx);
+ if(text) text = text.replace(NEWLINES, '').replace(BR_TAG_ALL, '\n');
+
features.push({
type: 'Feature',
geometry: {
@@ -269,7 +274,7 @@ function makeSymbolGeoJSON(calcTrace, gd) {
},
properties: {
symbol: fillSymbol(calcPt.mx),
- text: txt ? calcPt.txt : fillText(calcPt.tx)
+ text: text
}
});
}
diff --git a/test/image/baselines/mapbox_bubbles-text.png b/test/image/baselines/mapbox_bubbles-text.png
index 39b7958b415..6dd6234575a 100644
Binary files a/test/image/baselines/mapbox_bubbles-text.png and b/test/image/baselines/mapbox_bubbles-text.png differ
diff --git a/test/image/mocks/mapbox_bubbles-text.json b/test/image/mocks/mapbox_bubbles-text.json
index 559e8f2676b..338936f01b4 100644
--- a/test/image/mocks/mapbox_bubbles-text.json
+++ b/test/image/mocks/mapbox_bubbles-text.json
@@ -27,8 +27,8 @@
},
"text": [
"A",
- "B",
- "C"
+ "B \n b",
+ "C
c"
],
"textposition": "top left",
"textfont": {
diff --git a/test/jasmine/tests/scattermapbox_test.js b/test/jasmine/tests/scattermapbox_test.js
index 51839f51af7..0b2de0ef307 100644
--- a/test/jasmine/tests/scattermapbox_test.js
+++ b/test/jasmine/tests/scattermapbox_test.js
@@ -493,6 +493,32 @@ describe('scattermapbox convert', function() {
expect(actualText).toEqual(['A', 'B', 'C', 'F', '']);
});
+ it('should convert \\n to \'\' and
to \\n', function() {
+ var opts = _convert(Lib.extendFlat({}, base, {
+ mode: 'text',
+ text: ['one\nline', 'two
lines', 'three
lines
yep']
+ }));
+
+ var actualText = opts.symbol.geojson.features.map(function(f) {
+ return f.properties.text;
+ });
+
+ expect(actualText).toEqual(['oneline', 'two\nlines', 'three\nlines\nyep', undefined, undefined]);
+ });
+
+ it('should convert \\n to \'\' and
to \\n - texttemplate case', function() {
+ var opts = _convert(Lib.extendFlat({}, base, {
+ mode: 'text',
+ texttemplate: ['%{lon}\none\nline', '%{lat}
two
lines', '%{lon}\n%{lat}
more
lines']
+ }));
+
+ var actualText = opts.symbol.geojson.features.map(function(f) {
+ return f.properties.text;
+ });
+
+ expect(actualText).toEqual(['10oneline', '20\ntwo\nlines', '3010\nmore\nlines', '', '']);
+ });
+
it('should generate correct output for texttemplate', function() {
var mock = {
'type': 'scattermapbox',