https://github.com/turtiesocks/react-leaflet-supercluster
Wrapper for the Supercluster library to work with React Leaflet
https://github.com/turtiesocks/react-leaflet-supercluster
clustering leaflet markercluster markers react react-leaflet supercluster
Last synced: 3 months ago
JSON representation
Wrapper for the Supercluster library to work with React Leaflet
- Host: GitHub
- URL: https://github.com/turtiesocks/react-leaflet-supercluster
- Owner: TurtIeSocks
- License: apache-2.0
- Created: 2023-10-12T05:18:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-02T19:39:38.000Z (almost 2 years ago)
- Last Synced: 2024-11-10T04:31:18.670Z (11 months ago)
- Topics: clustering, leaflet, markercluster, markers, react, react-leaflet, supercluster
- Language: TypeScript
- Homepage:
- Size: 47.9 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-leaflet-supercluster
[](https://badge.fury.io/js/react-leaflet-supercluster)
Basic React Leaflet wrapper for the fantastic [Supercluster](https://github.com/mapbox/supercluster) library.
## Installation
```sh
// npm
npm i react-leaflet-supercluster
// yarn
yarn add react-leaflet-supercluster
```
## Supported Components
- [Marker](https://react-leaflet.js.org/docs/api-components/#marker)
- [Circle](https://react-leaflet.js.org/docs/api-components/#circle)
- [CircleMarker](https://react-leaflet.js.org/docs/api-components/#circlemarker)
- [Polyline](https://react-leaflet.js.org/docs/api-components/#polyline)
- [Rectangle](https://react-leaflet.js.org/docs/api-components/#rectangle)
- [Polygon](https://react-leaflet.js.org/docs/api-components/#polygon)
- [GeoJSON](https://react-leaflet.js.org/docs/api-components/#geojson)
## Usage
This package primarily exports a React component that can be used anywhere as a child of a `MapContainer` component. It also provides a "low level" hook that just returns a Supercluster instance. See the [Example](/example) code for a more detailed usage example.
```tsx
import 'react-leaflet-supercluster/src/styles.css'
import { MapContainer, Circle, CircleMarker, Marker Polygon, Polyline } from 'react-leaflet'
import { SuperClustering } from 'react-leaflet-supercluster'
export default function App() {
return (
)
}
```
## Props
Extends all original options from the [Supercluster constructor](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/409c8137e9849a496f859baa2a45afff5a162b16/types/supercluster/index.d.ts#L13).
### Additional props:
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children | ReactNode | | Marker, Circle, CircleMarker, Polyline, Polygon, & GeoJSON components |
| disableZoomEvent | boolean | false | Disable reclustering on `zoomend` event |
| disableMoveEvent | boolean | false | Disable reclustering on `moveend` event |
| pointToLayer | (feature, latlng) => Marker | See code | Function that will be used for creating cluster markers. |
| markerFilter | (ReactNode, number, boolean[]) => boolean | (_, index, markers) => markers[index] | Function that will be used for filtering markers that were not included in clusters. |
## Contributing
- `yarn start` to start the Vite dev server with HMR enabled.
- With VS Code you can open a debugger in Chrome for IDE debugging