0

I'm using supercluster (and use-supercluster) to render about 40k+ markers on a react/leaflet map. I've created a codesandbox here to demonstrate the issue, but essentially I'm noticing that the map is incredibly slow to respond (defeating the purpose of supercluster). For example, as soon as the map loads, try to drag the screen in any direction - often it doesn't move at all, and at best takes several seconds. Further, in the codesandbox, I've only been able to include about 1/4 of the data points because the site crashes, so it's important to know that my issue is probably 5x worse than noticed in the sandbox. I've included a video here for reference - you'll see that when dragging the map, it takes several seconds to respond. Many of my modals / popups no longer work, and the map often freezes for unmanageable amounts of time. I know supercluster has the ability to handle millions of data points without latency, so I suspect this is an issue with my organization / use of components.

My dependencies and some of the code can be found in the linked sandbox. If there's anything in particular that would be helpful to diagnose, I'd be happy to share details - I'm really just unsure where to even start looking.

For the purposes of demonstrating the issue, I've simply assigned the data points driving my map through a json file. With this SO post, I'm hoping to receive suggestions for how I may go about troubleshooting my lag - are there specific tools (ex. Firefox React Devtools) or suspect practices that I may look to investigate?

Edit - my gut feeling suspects it's an issue because I implicitly re-render all markers (as suggested in this SO) - however, I'm having trouble figuring out how to find evidence that I'm in fact doing so?

4
  • Nice sharing a CodeSandbox that reproduces your issue! That being said, it would be even better slimming down its content to the minimum that still reproduces the issue. When doing do, you may even find a solution! That would also enable sharing the main code directly here. See How to create a Minimal, Reproducible Example
    – ghybs
    Commented Feb 13, 2022 at 3:29
  • Thanks @ghybs - appreciate the note and direction - I’ll condense further (and with any luck find my issue!) and update here.
    – demongman
    Commented Feb 15, 2022 at 14:34
  • @ghybs Apologies, I'd dropped this project and since revisited from scratch. In the below repo, I've created a new map with sample data, stripped to the bare minimum for it to function. I'm still seeing similar & notable performance issues (not nearly as bad without my marker popups / forms). When zooming out, the map frames show gray blocks as they did in my original. Further, the delay in moving the map (ex. horizontally) is substantial. github.com/infogesite/superclusterPerfIssue
    – demongman
    Commented Dec 6, 2022 at 2:03
  • @ghybs Sorry - due to limits, I can't share on sandbox & can only use 100k sample points on Git - locally the issues are exponentially worse with 1M+ points. I'm not concerned with the load time for JSON file - just map perf. I don't care so much about my actual project , but really just looking for a better solution for 1M+ concentrated points (my dataset has ~40k points in Boston alone) - but I'm having trouble finding demos that actually use big datasets - ex. supercluster repo/demo uses a light load. LMK if it'd be better to create a new question - thanks again so much for considering.
    – demongman
    Commented Dec 6, 2022 at 2:10

1 Answer 1

0

I just ran into the same problem. I was able to solve it by debouncing the onMove function, since it seems that Supercluster can't handle being called on every little move for larger datasets, which isn't necessary anyway. Here is my onMove function: const onMove = useMemo(() => debounce(updateMap, 50), [map, updateMap]) using lodash.debounce. Alternativly you could call onMove on the "moveend" event instead of the "move" event.

Not the answer you're looking for? Browse other questions tagged or ask your own question.