pigeon-maps-cluster

Cluster component for pigeon-maps

$ npm install pigeon-maps-cluster --save

import { Map, Marker } from "pigeon-maps";
import { Cluster } from "pigeon-maps-cluster";

const coordinates = [
    [lat,lng],
    [lat,lng],
    [lat,lng]
    ...
]

<Map center={[55.753544, 37.621202]}
     zoom={4}
     width={600}
     height={400}>
    <Cluster>
        {
            coordinates.map(coordinate => <Marker key={coordinate.toString()} anchor={coordinate} />)
        }
    </Cluster>
</Map>

Options

Option	Type	Default	Description
minZoom	number	0	Minimum zoom level at which clusters are generated.
maxZoom	number	16	Maximum zoom level at which clusters are generated.
minPoints	number	2	Minimum number of points to form a cluster.
clusterMarkerRadius	number	40	Cluster radius, in pixels. Used for generating cluster and for default cluster size.
onClick	(data: ClusterData) => void	undefined	Function that is called when cluster is clicked.
clusterStyleFunction	(pointCount: number, markerPixelOffset?: [number, number]) => CSSProperties	undefined	Function that can help you to modify default cluster view.
clusterRenderFunction	(pointCount: number, markerPixelOffset?: [number, number]) => ReactElement	undefined	Function that can help you to create your own cluster (ignores clusterStyleFunction).
className	string	undefined	Cluster container className.

Changelog

1.0.8 (25.04.24)

• Fixed minZoom and maxZoom maximums and minimums. Packages update.