Merge pull request #6652 from baurt/mapbox-glyphs

Fix Non-Mapbox Scatter with text markers

Author: archmoj

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!

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'
     }
 };
 

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');

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, {

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');

test/image/baselines/mapbox_carto-text.png

@@ -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"
+      }
+    }
+  }