React hook for mapbox's supercluster library
npm install react-supercluster
A react hook for mapbox's supercluster library
``tsx`
const { clusters } = useSupercluster({
points: geojsonPoints,
bounds: mapBoundaries,
zoom: mapZoomLevel,
});
Easy right? 😎
You need to have React 16.8.0 or later installed to use this library.
yarn
`bash`
yarn add react-supercluster supercluster
npm
`bash`
npm install --save react-supercluster supercluster
Typescript
If you use typescript, also install the type definitions @types/supercluster.
You can find a working example in the folder example/.
Say you have a list of items:
`tsx`
const items = [
{
"id": "5d443711277ad1bb99d7db7d",
"name": "Your really cool stuff",
"coordinates": { "lat": 49.0214124, "lng": 11.2141024 }
},
...
]
Then you have to transform your list to the expected format, which is the following:
`tsx`
const geojsonPoints = items.map(item => {
return {
type: 'Feature',
properties: {
itemId: item.id,
},
geometry: {
type: 'Point',
coordinates: [item.coordinates.lng, item.coordinates.lat],
},
};
});
Then you can pass the points to useSupercluster:
`tsx
import useSupercluster from 'react-supercluster';
const { clusters } = useSupercluster({
points: geojsonPoints,
bounds: mapBoundaries,
zoom: mapZoomLevel,
});
{clusters.map(cluster => {
if (cluster.properties.cluster) {
return
}
return
})}
``
MIT © patlux