googlemaps / googlemaps/js-markerclusterer

Proposal: Prevent unnecessary re-renders

Open
#246 16 comments 9 reactions 0 assignees View on GitHub
triage me type: feature request
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

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.