react-leaflet-supercluster
v0.1.3
Published
React wrapper for the supercluster library
Downloads
533
Maintainers
Readme
react-leaflet-supercluster
Basic React Leaflet wrapper for the fantastic Supercluster library.
Installation
// npm
npm i react-leaflet-supercluster
// yarn
yarn add react-leaflet-supercluster
Supported Components
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.
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 (
<MapContainer>
<SuperClustering>
<Circle center={[0, 0]} />
<Marker position={[1, 2]} />
<CircleMarker position={[3, 4]} />
<Polyline positions={[3, 4]} />
<Polygon positions={[5, 6]} />
</SuperClustering>
</MapContainer>
)
}
Props
Extends all original options from the Supercluster constructor.
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