Skip to content

TurtIeSocks/react-leaflet-supercluster

Repository files navigation

react-leaflet-supercluster

npm version

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