plotly / plotly/plotly.js

[BUG]: Clusters within scattermaps fail to display with at least one custom style

Open
#7,742 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

Description

I am attempting to add clusters to a Plotly.js scattermap that uses a custom style ("https://tiles.openfreemap.org/styles/bright") for the map's style argument. When clusters are disabled, the map appears as expected:

Image

Meanwhile, when clusters are enabled, only points not grouped into a cluster (i.e. Honolulu) are visible:

Image

When I checked my console, I saw the following error:

Image

Basically, the clusters appear to require a specific font (Open Sans Regular) for the cluster labels, but this font isn't available within openfreemap's server. (In other words, Plotly is requesting font information from https://tiles.openfreemap.org/fonts/Open%20Sans%20Regular/0-255.pbf , but that page shows a 404 Not Found message.)

One option would of course be for OpenFreeMap to add this font to their server, but it would be preferable to modify the library, if possible, to not require this particular font. (If there's already an option to do so, please let me know.) If that wouldn't be possible, perhaps the library could be updated to show clusters but not labels? That would still be a major improvement.

Thank you in advance for your assistance!

Steps to reproduce

Here is a Codepen that demonstrates this functionality. Note that, if you zoom in enough, the underlying clusters' dots will begin to appear. Thus, the issue is with clusters rather than their data.

Notes

One of my reasons for using this custom library is that, based on my correspondence with Carto, our organization may need to pay a substantial amount of money to use Carto's own tiles for our work. This is not the case with OpenFreeMap, which is why I strongly prefer using them in place of Carto. If I'm misunderstanding this licensing situation, just let me know.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the failure with the linked CodePen using the OpenFreeMap custom style and enabled scattermap clusters. Inspect the scattermap cluster rendering entry point and the font request shown in the report; done means clustered points render with that style without requiring an unavailable font, or the supported limitation is clearly established.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.