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

• 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.

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