Skip to content

Fix various issues with rendering scattermap icons#7825

Merged
emilykl merged 6 commits into
v4.0from
fix-7821-v4.0
Jun 4, 2026
Merged

Fix various issues with rendering scattermap icons#7825
emilykl merged 6 commits into
v4.0from
fix-7821-v4.0

Conversation

@emilykl
Copy link
Copy Markdown
Contributor

@emilykl emilykl commented Jun 4, 2026 •
edited
Loading

Closes #6599
Closes #7447
Closes #7821

Fixes various issues with rendering scattermap icons in the legend and on the map, by making the following changes:

  • Switch icon fetch URL from unpkg to jsdelivr so that we can use the latest Maki icons version (8.2.0) rather than the ten-year-old Maki 2.1.0 which we have been using
  • Instead of trying to use marker.symbol in the legend for scattermap traces, render a circle for all traces. Currently the legend can only render Plotly-supported symbols of which only a small fraction match the Maki symbol names. In order to avoid inconsistencies where some scattermap symbols are rendered in the legend but most are rendered as circles, we just render a circle for everything.
    • I'm not opposed to modifying the legend code in the future so that we can display the Maki symbols in the legend, but that's a more significant change since the Maki symbols are fetched on-demand from the internet so it would take some mucking around
    • Added one test for this
  • Fix issue where map icons always rendered as black and ignored marker.color, by setting {sdf: true} when loading the icon image. Now they can be rendered in any color (and use the default trace colors by default)

Screenshot

Screenshot 2026-06-04 at 12 29 19 PM

For reference, this is what the same plot looks like on master:

Screenshot 2026-06-04 at 12 33 01 PM

Steps for testing

  • Pull this branch and run npm run build
  • Put the following code in a .html file in the repo root:
Details 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Scattermap icons</title>
  <script src="dist/plotly.js" charset="utf-8"></script>
</head>
<body>
  <div id="plot"></div>

  <script>
    const symbols = ["circle", "cross", "square", "star", "triangle", "diamond"];

    const data = symbols.map((symbol, index) => ({
      type: "scattermap",
      lat: [52.5 + index * 0.05],
      lon: [13.4 + index * 0.05],
      mode: "markers",
      marker: { size: 14, symbol: symbol },
      name: symbol,
      showlegend: true,
    }));

    const layout = {
      map: {
        style: "open-street-map",
        center: { lat: 52.6, lon: 13.5 },
        zoom: 8,
      },
      showlegend: true,
      margin: { l: 0, r: 0, t: 0, b: 0 },
    };

    const gd = document.getElementById("plot");
    window.gd = gd;
    Plotly.newPlot(gd, data, layout);
  </script>
</body>
</html>
  • Load the HTML file in the browser and verify that the symbols and legend look like the top image above, rather than the bottom image

@emilykl emilykl requested a review from camdecoster June 4, 2026 16:44
@emilykl emilykl merged commit de217ae into v4.0 Jun 4, 2026
157 of 158 checks passed
@emilykl emilykl deleted the fix-7821-v4.0 branch June 4, 2026 22:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@camdecoster camdecoster camdecoster approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@emilykl @camdecoster