Improve markers clustering experience

Motivation

I am trying to add clustering of HTML markers to my application. And since Mapbox does not directly support it, we need to implement it on our own. One of the solutions is using built-in clustering but not showing individual "markers" (just cluster circles) and re-rendering HTML markers on every moveend event.

This works, however, sometimes there is a situation when there is a longer transition (e.g. after clicking on a cluster circle) and the cluster is not recalculated before moveend event is emitted. To work around this, I am calling the following line in moveend event callback:

this.mapboxMap.once('idle', () => this.redrawMarkers());

But the idle event is emitted only after all transition animations have completed and all tiles have loaded. The problem is it usually takes a while to load the tiles and so marker clusters are not re-rendered immediately after the transition ended but after another 1-2 seconds.

Design Alternatives

I can see many possible solutions of this problem:

1. Add support for HTML markers clustering.
2. Add support for drawing arbitrary marker shapes (not only dots or circles) using WebGL.
3. Emit moveend event only after clusters are re-calculated.
4. Add some new event which will be emitted after clusters are re-calculated.
5. Add some new event which will be emitted after transition animation have completed. (But I am not sure if this one will help.)

Design

I think the best solution of this problem would be to implement one of the first two options. But I can see that it will not be that easy so one of 3-5 is probably a better solution for now.

Start by tracing the moveend and idle event flow described in the issue, including the redrawMarkers callback and transition completion. Compare the proposed clustering and event alternatives before choosing a scope; done should mean marker clusters are recalculated at the intended point without waiting for unrelated tile loading.