mapbox / mapbox/mapbox-gl-js

Need for a better way to dynamically update cluster icons.

Open
#10,831 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs discussion :speech_balloon:
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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.