googlemaps / googlemaps/js-markerclusterer

Performance degradation with large datasets

Open
#417 8 comments 4 reactions 1 assignee Claimed by @wangela View on GitHub
triage me type: bug
Dominant language
TypeScript
Stars
293
Forks
104
Avg merge
3m
Merged PRs (30d)
18

Description

Hi! After replacing @googlemaps/js-markerclustererplus we have noticed a massive slowdown when it comes to rendering and re-rendering marker clusters. This issue appears when there are more than 10k markers. With `@googlemaps/js-markerclustererplus` we were able to support up to 100k markers (I assume the older version calculated and rendered the markers within the viewport only).

#### Steps to reproduce

1. Run the defaults example with these adjustments:

```javascript
const mapOptions = {
center: { lat: 40.7128, lng: -73.85 },
zoom: 5,
};
new Loader(LOADER_OPTIONS).load().then(() => {
const element = document.getElementById("map");
const map = new google.maps.Map(element, mapOptions);
const markers = coords
.map(points => new google.maps.Marker({
position: {
lat: +points[1],
lng: +points[0],
},
map
}));
const markerCluster = new MarkerClusterer({
markers
});
markerCluster.setMap(map);
});
```
2. Setup large count of markers (e.g. 95k)
3. The map becomes more and more laggy with each zoom in.

MarkerClusterer gif (based on default example https://github.com/googlemaps/js-markerclusterer/blob/main/examples/defaults.ts):
![markerclusterer](https://user-images.githubusercontent.com/16756131/186916083-c0692b62-f957-467d-ad96-7d675b880bb2.gif)

**NOTE:**
Using ScreenToGif which slows it down even more.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.