always fall back to circle icon in legend for scattermap

Author: emilykl

src/components/legend/style.js

@@ -207,7 +207,12 @@ module.exports = function style(s, gd, legend) {
 
             if (showMarker) {
                 dEdit.mc = boundVal('marker.color', pickFirst);
-                dEdit.mx = boundVal('marker.symbol', pickFirst);
+                // Scattermap traces use marker.symbol to specify the Maki icon used in
+                // the map itself, which usually doesn't correspond to a valid
+                // Plotly symbol. Always draw a circle so the swatch is consistent
+                // across symbols rather than silently mismatched.
+                var isScattermapTrace = trace.type === 'scattermap' || trace.type === 'scattermapbox';
+                dEdit.mx = isScattermapTrace ? 'circle' : boundVal('marker.symbol', pickFirst);
                 dEdit.mo = boundVal('marker.opacity', Lib.mean, [0.2, 1]);
                 dEdit.mlc = boundVal('marker.line.color', pickFirst);
                 dEdit.mlw = boundVal('marker.line.width', Lib.mean, [0, 5], CST_MARKER_LINE_WIDTH);

test/jasmine/tests/scattermap_test.js

@@ -1248,6 +1248,45 @@ describe('Test plotly events on a scattermap plot when css transform is present:
     });
 });
 
+describe('scattermap legend', function() {
+    var gd;
+
+    beforeEach(function() {
+        Plotly.setPlotConfig({});
+        gd = createGraphDiv();
+    });
+
+    afterEach(function() {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+    });
+
+    it('@gl should always draw a circle swatch regardless of marker.symbol', function(done) {
+        // marker.symbol on map traces is a Maki/sprite icon name that the SVG
+        // legend can't reproduce, so the swatch should consistently be a circle.
+        // The circle symbol path is the only one using an arc ('A') command;
+        // square/triangle/etc. use only straight (H/V/L) segments.
+        Plotly.newPlot(gd, {
+            data: [
+                { type: 'scattermap', lat: [0], lon: [0], mode: 'markers', name: 'square', marker: { symbol: 'square' } },
+                { type: 'scattermap', lat: [1], lon: [1], mode: 'markers', name: 'tri', marker: { symbol: 'triangle-stroked' } }
+            ],
+            layout: {
+                map: { style: 'open-street-map', zoom: 6, center: { lat: 0.5, lon: 0.5 } },
+                showlegend: true
+            }
+        }).then(function() {
+            var swatches = gd.querySelectorAll('.legend .legendpoints path.scatterpts');
+            expect(swatches.length).toBe(2, 'one swatch per trace');
+            swatches.forEach(function(node) {
+                var d = node.getAttribute('d');
+                expect(d.indexOf('A')).toBeGreaterThan(-1, 'swatch is a circle (has arc): ' + d);
+                expect(d.indexOf('NaN')).toBe(-1, 'swatch path has no NaN: ' + d);
+            });
+        }).then(done, done.fail);
+    });
+});
+
 describe('scattermap restyle', function() {
     var gd;