-
Notifications
You must be signed in to change notification settings - Fork 182
feat: add Web Worker support for marker clustering #891
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
feat: add Web Worker support for marker clustering #891
Conversation
- Add useSuperclusterWorker hook for offloading clustering to Web Worker - Add useMapViewport hook for tracking map bounds and zoom - Add worker-marker-clustering example demonstrating 10k+ markers - Prevents main thread blocking for large datasets (Discussion visgl#526)
|
I haven't had time to review it, but most importantly: Awesome, thanks a lot for the work! This is something I wanted to do for a while and never got around to. Looking forward to review and test it tomorrow. |
|
happy to collaborate for a good cause. |
|
@usefulthink any update on this? |
|
I now had the time to have a quick look, and it's really nicely done, focused on the important parts and all that. When I ran it locally with It still feels a bit slow sometimes, since even with clustering it's rendering too many AdvancedMarkerElements (>800) at once. That could be fixed by increasing the clustering radius a bit. The only thing that would be important to change is to move the two hooks into the examples src directory instead of the main library. I really like the Idea to export a However, we will likely not add the supercluster-specific hook to the library for the time being, since that is a bit too specific to a certain use-case. Finally, it still has to be added to the examples-page on the website (there's some documentation about that here, but I just noticed that that page is outdated – examples with external dependencies do work completely fine now). |
- Fix map height: 0 issue by adding body/app container styles - Increase clustering radius from 80 to 120 to reduce marker count - Move useMapViewport and useSuperclusterWorker hooks from library to example - Remove hook exports from main library index.ts - Update imports in app.tsx to use local hooks - Update README with new file structure and usage examples
|
@usefulthink updated the pr, could you please have a look and let me know if you want more changes. |
usefulthink
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we can merge it like this and do additional PRs to add it to the website and so on.
Summary
useSuperclusterWorkerhook for offloading clustering to Web WorkeruseMapViewporthook for tracking map bounds and zoomworker-marker-clusteringexample demonstrating 10k+ markersProblem
Addresses #526 - clustering with large datasets (7,500+ markers) blocks the main thread, causing UI freezes up to 17 seconds.
Solution
Moves Supercluster operations to a Web Worker, keeping the main thread responsive regardless of dataset size.
Changes
src/hooks/use-supercluster-worker.ts- New hooksrc/hooks/use-map-viewport.ts- New hooksrc/index.ts- Export new hooksexamples/worker-marker-clustering/- Full working example