https://github.com/patlux/react-supercluster
🗺 react hook for mapbox's supercluster library
https://github.com/patlux/react-supercluster
hook react
Last synced: about 1 month ago
JSON representation
🗺 react hook for mapbox's supercluster library
- Host: GitHub
- URL: https://github.com/patlux/react-supercluster
- Owner: patlux
- Created: 2019-08-05T18:56:09.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:21:25.000Z (over 2 years ago)
- Last Synced: 2025-04-28T12:11:56.438Z (about 1 month ago)
- Topics: hook, react
- Language: TypeScript
- Homepage: https://patlux.github.io/react-supercluster/
- Size: 2.14 MB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-supercluster
[](https://www.npmjs.com/package/react-supercluster)
> A react hook for mapbox's [supercluster](https://github.com/mapbox/supercluster) library
```tsx
const { clusters } = useSupercluster({
points: geojsonPoints,
bounds: mapBoundaries,
zoom: mapZoomLevel,
});
```
Easy, right? 😎
[**Live Example**](https://patlux.github.io/react-supercluster/)
## Install
You need to have React [16.8.0](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) 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`.
## Usage
You can find a working example in the folder `example/`. The example uses [pigeon-map](https://github.com/mariusandra/pigeon-maps) for demonstration purpose, but you can use any map library you want.
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 ;
})}
;
```
## License
MIT © [patlux](https://github.com/patlux)