diff --git a/draftlogs/6652_fix.md b/draftlogs/6652_fix.md new file mode 100644 index 00000000000..4e8f74f2eba --- /dev/null +++ b/draftlogs/6652_fix.md @@ -0,0 +1 @@ + - fix text markers on non-mapbox styled maps [[#6652](https://github.com/plotly/plotly.js/pull/6652)], with thanks to @baurt for the contribution! \ No newline at end of file diff --git a/src/plots/mapbox/constants.js b/src/plots/mapbox/constants.js index eea1205ca00..786ae8fac47 100644 --- a/src/plots/mapbox/constants.js +++ b/src/plots/mapbox/constants.js @@ -47,7 +47,8 @@ var stylesNonMapbox = { source: 'plotly-osm-tiles', minzoom: 0, maxzoom: 22 - }] + }], + glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf' }, 'white-bg': { id: 'white-bg', @@ -59,7 +60,8 @@ var stylesNonMapbox = { paint: {'background-color': '#FFFFFF'}, minzoom: 0, maxzoom: 22 - }] + }], + glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf' }, 'carto-positron': { id: 'carto-positron', @@ -78,7 +80,8 @@ var stylesNonMapbox = { source: 'plotly-carto-positron', minzoom: 0, maxzoom: 22 - }] + }], + glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf' }, 'carto-darkmatter': { id: 'carto-darkmatter', @@ -97,7 +100,8 @@ var stylesNonMapbox = { source: 'plotly-carto-darkmatter', minzoom: 0, maxzoom: 22 - }] + }], + glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf' }, 'stamen-terrain': { id: 'stamen-terrain', @@ -116,7 +120,8 @@ var stylesNonMapbox = { source: 'plotly-stamen-terrain', minzoom: 0, maxzoom: 22 - }] + }], + glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf' }, 'stamen-toner': { id: 'stamen-toner', @@ -135,7 +140,8 @@ var stylesNonMapbox = { source: 'plotly-stamen-toner', minzoom: 0, maxzoom: 22 - }] + }], + glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf' }, 'stamen-watercolor': { id: 'stamen-watercolor', @@ -154,7 +160,8 @@ var stylesNonMapbox = { source: 'plotly-stamen-watercolor', minzoom: 0, maxzoom: 22 - }] + }], + glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf' } }; diff --git a/src/traces/scatter/text_defaults.js b/src/traces/scatter/text_defaults.js index 98e2718c465..b91fcbe5b13 100644 --- a/src/traces/scatter/text_defaults.js +++ b/src/traces/scatter/text_defaults.js @@ -10,7 +10,7 @@ module.exports = function(traceIn, traceOut, layout, coerce, opts) { opts = opts || {}; coerce('textposition'); - Lib.coerceFont(coerce, 'textfont', layout.font); + Lib.coerceFont(coerce, 'textfont', opts.font || layout.font); if(!opts.noSelect) { coerce('selected.textfont.color'); diff --git a/src/traces/scattermapbox/convert.js b/src/traces/scattermapbox/convert.js index f2a1922871e..e35dfbde76d 100644 --- a/src/traces/scattermapbox/convert.js +++ b/src/traces/scattermapbox/convert.js @@ -154,10 +154,8 @@ module.exports = function convert(gd, calcTrace) { Lib.extendFlat(symbol.layout, { 'text-size': trace.textfont.size, 'text-anchor': textOpts.anchor, - 'text-offset': textOpts.offset - - // TODO font family - // 'text-font': symbol.textfont.family.split(', '), + 'text-offset': textOpts.offset, + 'text-font': trace.textfont.family.split(', '), }); Lib.extendFlat(symbol.paint, { diff --git a/src/traces/scattermapbox/defaults.js b/src/traces/scattermapbox/defaults.js index 93010cca922..eb33d00cca9 100644 --- a/src/traces/scattermapbox/defaults.js +++ b/src/traces/scattermapbox/defaults.js @@ -9,6 +9,44 @@ var handleTextDefaults = require('../scatter/text_defaults'); var handleFillColorDefaults = require('../scatter/fillcolor_defaults'); var attributes = require('./attributes'); +// Must use one of the following fonts as the family, else default to 'Open Sans Regular' +// See https://github.com/openmaptiles/fonts/blob/gh-pages/fontstacks.json +var supportedFonts = [ + 'Metropolis Black Italic', + 'Metropolis Black', + 'Metropolis Bold Italic', + 'Metropolis Bold', + 'Metropolis Extra Bold Italic', + 'Metropolis Extra Bold', + 'Metropolis Extra Light Italic', + 'Metropolis Extra Light', + 'Metropolis Light Italic', + 'Metropolis Light', + 'Metropolis Medium Italic', + 'Metropolis Medium', + 'Metropolis Regular Italic', + 'Metropolis Regular', + 'Metropolis Semi Bold Italic', + 'Metropolis Semi Bold', + 'Metropolis Thin Italic', + 'Metropolis Thin', + 'Open Sans Bold Italic', + 'Open Sans Bold', + 'Open Sans Extra Bold Italic', + 'Open Sans Extra Bold', + 'Open Sans Italic', + 'Open Sans Light Italic', + 'Open Sans Light', + 'Open Sans Regular', + 'Open Sans Semibold Italic', + 'Open Sans Semibold', + 'Klokantech Noto Sans Bold', + 'Klokantech Noto Sans CJK Bold', + 'Klokantech Noto Sans CJK Regular', + 'Klokantech Noto Sans Italic', + 'Klokantech Noto Sans Regular' +]; + module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) { function coerce(attr, dflt) { return Lib.coerce(traceIn, traceOut, attributes, attr, dflt); @@ -66,7 +104,14 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout coerce('cluster.enabled', clusterEnabledDflt); if(subTypes.hasText(traceOut)) { - handleTextDefaults(traceIn, traceOut, layout, coerce, {noSelect: true}); + handleTextDefaults(traceIn, traceOut, layout, coerce, + {noSelect: true, + font: { + family: supportedFonts.indexOf(layout.font.family) !== -1 ? layout.font.family : 'Open Sans Regular', + size: layout.font.size, + color: layout.font.color + } + }); } coerce('fill'); diff --git a/test/image/baselines/mapbox_carto-text.png b/test/image/baselines/mapbox_carto-text.png new file mode 100644 index 00000000000..f114d5fefbe Binary files /dev/null and b/test/image/baselines/mapbox_carto-text.png differ diff --git a/test/image/baselines/pattern_bars.png b/test/image/baselines/pattern_bars.png index 69a0826e27c..077c05cf164 100644 Binary files a/test/image/baselines/pattern_bars.png and b/test/image/baselines/pattern_bars.png differ diff --git a/test/image/baselines/pie_textpad_radial.png b/test/image/baselines/pie_textpad_radial.png index 20733b24acc..236b381d089 100644 Binary files a/test/image/baselines/pie_textpad_radial.png and b/test/image/baselines/pie_textpad_radial.png differ diff --git a/test/image/baselines/sunburst_inside-text-orientation.png b/test/image/baselines/sunburst_inside-text-orientation.png index 034028f2e4c..ed42444b3c8 100644 Binary files a/test/image/baselines/sunburst_inside-text-orientation.png and b/test/image/baselines/sunburst_inside-text-orientation.png differ diff --git a/test/image/baselines/sunburst_packages_colorscale_novalue.png b/test/image/baselines/sunburst_packages_colorscale_novalue.png index bcc8b6d907e..2f09e9246aa 100644 Binary files a/test/image/baselines/sunburst_packages_colorscale_novalue.png and b/test/image/baselines/sunburst_packages_colorscale_novalue.png differ diff --git a/test/image/baselines/sunburst_textpad_radial.png b/test/image/baselines/sunburst_textpad_radial.png index 1ee4d9eadb6..0dc8e4db49c 100644 Binary files a/test/image/baselines/sunburst_textpad_radial.png and b/test/image/baselines/sunburst_textpad_radial.png differ diff --git a/test/image/baselines/treemap_sunburst_marker_colors.png b/test/image/baselines/treemap_sunburst_marker_colors.png index 2ad27d25deb..209427c1b2a 100644 Binary files a/test/image/baselines/treemap_sunburst_marker_colors.png and b/test/image/baselines/treemap_sunburst_marker_colors.png differ diff --git a/test/image/baselines/uniformtext_sunburst_treemap.png b/test/image/baselines/uniformtext_sunburst_treemap.png index 31adc8ab71e..d99afe65a59 100644 Binary files a/test/image/baselines/uniformtext_sunburst_treemap.png and b/test/image/baselines/uniformtext_sunburst_treemap.png differ diff --git a/test/image/mocks/mapbox_carto-text.json b/test/image/mocks/mapbox_carto-text.json new file mode 100644 index 00000000000..a47086d45c1 --- /dev/null +++ b/test/image/mocks/mapbox_carto-text.json @@ -0,0 +1,40 @@ +{ + "data": [ + { + "type": "scattermapbox", + "name": "carto-positron", + "lon": [ 10, 5 ], + "lat": [ 20, 10 ], + "text":["pt1","pt2"], + "mode":"text" + + }, + { + "type": "scattermapbox", + "name": "carto-darkmatter", + "lon": [ 10, 5 ], + "lat": [ 20, 10 ], + "subplot": "mapbox2", + "mode":"text", + "text":["pt1","pt2"], + "textfont":{"family":"Metropolis Extra Bold Italic","color":"#fff"} + } + ], + "layout": { + "grid": {"rows": 1, "columns": 2}, + + "legend": { + "x": 0, + "y": 1, "yanchor": "bottom" + }, + + "mapbox": { + "domain": {"row": 0, "column": 0}, + "style": "carto-positron" + }, + "mapbox2": { + "domain": {"row": 0, "column": 1}, + "style": "carto-darkmatter" + } + } + }