react-leaflet-supercluster


Basic React Leaflet wrapper for the fantastic Supercluster library.

Installation

``sh
// npm
npm i react-leaflet-supercluster

// yarn
yarn add react-leaflet-supercluster
`

Supported Components

- Marker
- Circle
- CircleMarker
- Polyline
- Rectangle
- Polygon
- 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 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.

$3


| 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