Loading of map slow when using markers on large map

[dmcbrn]

mapbox-gl-js version: 2.6.0

browser: Firefox 94.0

Steps to Trigger Behavior

1. Follow this tutorial
2. Add multiple markers close to one another, and in a city with lot's of streets around
3. start the map on wider zoom level
4. zoom in

Link to Demonstration

https://jsfiddle.net/wpa3dbcz/1/

To reproduce the image increase the map size (browser window or just inside the fiddle) and then zoom in or click on the cluster.

Expected Behavior

The transition should be smooth.

Actual Behavior

The larger the map size the slower the clusters break into smaller ones making the map unusable for production.

I'm new to this all and please let me know if I'm missing something in the implementation. It could be related to #7405 but I can't be sure.

Please let me know if this is actual issue at the moment so I know should I be searching for alternatives in my scenario.

Otherwise, thank you very much for your efforts in providing alternative for google maps API. It's much appreciated and hopefully it will be a good fit for us as well.

[mourner]

I can't seem to reproduce this — the transitions feel smooth even on a full screen map. Can you record a video of what you're seeing? Does it only happen in Firefox, or other browsers too? What the OS?

[dmcbrn]

Here's the recording from example above

• Ubuntu 18.04
• i7-8550u
• 32GB
• Firefox 94.0

This is even more pronounced when zooming in from wider map but I couldn't get the file under 10MB so I just narrowed it down to the most pronounced part in the fiddle.

And here is the behavior with old mapbox.js library (link):

Here the map is smaller but it works much faster on the larger map as well.

As far as I can tell the cluster rendering is slowed down by drawing of the map by the browser.

[mourner]

Do other Mapbox maps perform slowly as well? How about other browsers like Chrome on the same machine? This seems like some kind of OS / GPU issue specifically on your machine that makes WebGL rendering slow in general. I'm not sure there's anything we can on the GL JS side to help with this.

[dmcbrn]

• Ubuntu 18.04
• i7 8550u
• 32GB ram

---

• FF 94.0 - slow as per gif above
• Chromium 95.0.4638.69 - OK (not as smooth as mapbox.js above but much, much better than FF)
• Chrome 94.0.4606.81 - OK (not as smooth as mapbox.js above but much, much better than FF)

I have also received confirmation about the gl version being slow on other machines (I think Windows and MacOS) so that's why I didn't test fully in other browsers and just assumed it's the same thing.

But still, map being this slow on big screens on FF Ubuntu is a big issue and I'm still hoping there's something that can be done. Let me try to replicate it on other OSs and I'll update the comment then. If you think of anything I could change on the configuration to resolve or improve this please do let me know.

EDIT:

WebGL is definitely slower on FF. I've tested this example (http://webglsamples.org/aquarium/aquarium.html) and the FPS on 5000 fishes and default options are:

• FF - 13-15
• Chromium - 22-25

[mourner]

Closing as something we're unlikely to be able to fix on GL JS side — probably an issue with a specific machine/GPU/OS combination and not limited to GL JS as per the last edit.

[dmcbrn]

Firefox version 107 seems to be much faster with mapbox 2.6.0. I did some system updates as well (still on 18.04) but it seems to be ok now.