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