React hook for point clustering
npm install use-marker-clusterA React hook for clustering markers using the marker-cluster library.
``tsx
import useMarkerCluster from "use-marker-cluster";
import { GoogleMap, OverlayView } from "google-maps-js-api-react";
const Map = ({ points }) => {
const markerCluster = useMarkerCluster(
points,
(point) => [point.lng, point.lat],
{
asyncMode: true,
}
);
return (
defaultOptions={{
scrollwheel: true,
center: { lat: 0, lng: 0 },
zoom: 5,
}}
// it's probably better to wrap it in a debounce method or use setTransition
onBoundsChanged={function (bounds) {
const sw = bounds.getSouthWest();
const ne = bounds.getNorthEast();
markerCluster
.setZoom(this.getZoom()!)
.setBounds(sw.lng(), sw.lat(), ne.lng(), ne.lat())
// callback method triggers rerender
.callback();
}}
>
{markerCluster.getPoints(
({ lat, lng, id }, key) => (
m{id}
),
(lng, lat, count, expandZoom, key) => (
{count}
)
)}
);
};
`
` (points: P[], getLngLat: (item: P) => [lng: number, lat: number], options?: UseMarkerClusterOptions): MarkerCluster ;ts`
const useMarkerCluster:
The useMarkerCluster hook provides an easy way to cluster markers on a map by continuously monitoring the points parameter and clustering them when new data is received. Once clustering is complete, the hook will automatically trigger a rerender. For better understanding of usage see example
Returns MarkerCluster instance
#### UseMarkerClusterOptions
| Name | Type | Description | Default |
| :----------- | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ |
| asyncMode? | boolean | if true, the clustering process will be moved to another thread and will not block the UI | false |minZoom?
| | number | min zoom level to cluster the points on | 0 |maxZoom?
| | number | max zoom level to cluster the points on | 16 |radius?
| | number | cluster radius in pixels | 60 |extent?
| | number | size of the tile grid used for clustering | 256 |callback?
| | () => void | a method that will be executed after clustering or called from MarkerCluster instance | |onLoaded?
| | () => void | a method that will be executed only after the clustering is completed | |
---
`ts`
useMarkerCluster.cleanup();
If asyncMode` has been set, use this method to abandon the Worker if necessary
---
MIT © Krombik