googlemaps / googlemaps/js-markerclusterer
Proposal: Prevent unnecessary re-renders
- Dominant language
- TypeScript
- Stars
- 293
- Forks
- 104
- Avg merge
- 3m
- Merged PRs (30d)
- 18
Description
On maps with only a small amount of clusters, it often happens that all clusters are redrawn upon zoom, even though nothing has changed. The resulting flickering looks very buggy and distracting. As a workaround, we use an algorithm that compares the actual markers:
```ts
import {
AlgorithmInput,
Cluster,
SuperClusterAlgorithm,
SuperClusterOptions,
} from "@googlemaps/markerclusterer";
import { shallowEqual } from "fast-equals";
const summarize = (c: Cluster) => `${c.position} ${c.count}`;
export class CachedSuperClusterAlgorithm extends SuperClusterAlgorithm {
constructor(opts: SuperClusterOptions = {}) {
super(opts);
}
calculate(input: AlgorithmInput) {
const prevClusters = this.clusters;
const output = super.calculate(input);
const { changed, clusters } = output;
if (changed && prevClusters) {
if (shallowEqual(prevClusters.map(summarize), clusters.map(summarize))) {
return { changed: false, clusters };
}
}
return output;
}
}
```
I was wondering if it made sense to incorporate such a check into the library, and would be happy to contribute a PR if you think this would be a good idea.
Contributor guide
Assessment
This issue has not been assessed yet.