Need for a better way to dynamically update cluster icons.

[Deepthi-Chand]

Context and Motivation: We at PetaBencana have been using leaflet marker cluster and recently started migrating to mapbox-gl-js. We need the application to function in low resource environments since our primary use-case is disaster reporting and majority of the on ground volunteers use low end mobiles.

PetaBencana has multiple types of markers which need to be clustered separately and the cluster icon is determined by the aggregate properties (like count of markers with a specific property, average of the value of the property etc..). Overall there are close to 25 such combinations and a specific cluster icon for the same.

Using the following examples and triggering the update of the icons on map move, I was able to achieve the required functionality.

https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/ https://github.com/Wykks/ngx-mapbox-gl/issues/203 https://docs.mapbox.com/mapbox-gl-js/example/cluster/

Implementation : https://deepthi-chand.github.io/pb_mabbox_cluster/ code: https://github.com/Deepthi-Chand/pb_mabbox_cluster/blob/main/index.html

I am using getClusterLeaves() method to capture the properties and determine the cluster icon to be used.

Challenge: Given map and its icons are updated on move, it triggers multiple events to update the icons resulting in higher CPU/memory usage.

I tried throttling the events but it is affecting the user experience Throttling: https://deepthi-chand.github.io/pb_mabbox_cluster/throttled.html code: https://github.com/Deepthi-Chand/pb_mabbox_cluster/blob/main/throttled.html

Any inputs in this regard would be helpful.

Leaflet implementation for your reference Implementation: https://deepthi-chand.github.io/pb_mabbox_cluster/leaflet.html code: https://github.com/Deepthi-Chand/pb_mabbox_cluster/blob/main/leaflet.html

Thanks in advance!!

[arindam1993]

Hi @Deepthi-Chand 👋🏽 Thanks for posting this, building out a cluster-explansion plugin is something that definitely keeps coming up and something we've not gotten to yet.

From a quick glance at your code and the demo, it seems like to me that your dataset might be too large for constantly updating HTML markers. here's some quick things to try:

• Switch querySourceFeatures to queryRenderedFeatures , this returns only the set of visible features instead of all loaded features.
• Try to achieve the exact same look as the HTML marker with a symbol layer, a symbol layer is updated automatically with GPU acceleration by GL-JS so it can scale to much larger datasets and then only create Marker when expanding a cluster.

[Deepthi-Chand]

Thanks @arindam1993 for the inputs. Looking forward to the cluster-expansion plugin.

[jparish3]

Not sure where to ask this question, so starting here. A recent release blog has examples of markers in a chip format with icons & content (see ENGAGE INTERNATIONAL TRAVELERS example). I have tried styling custom markers but cannot get the content to display and have tried the symbol layer. Let me know if you have any guidance or examples. Thanks