Need for a better way to dynamically update cluster icons.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
*Context and Motivation:*
We at [PetaBencana](https://petabencana.id) 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!!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing getClusterLeaves() and the linked Mapbox cluster and cluster-html examples, then compare them with the provided PetaBencana implementations. The issue does not name a repository file or define a precise API change; a completed outcome would need to reduce repeated icon-update work while preserving dynamically determined cluster icons.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, performance, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100