react-leaflet-cluster-layer
react-leaflet-cluster-layer
provides a simple <ClusterLayer />
component for plotting React components as markers and clusters in a react-leaflet
map.
Usage
;;;; const position = lng: -122673447 lat: 45522558 ;const markers = position: lng: -122673447 lat: 455225581 text: 'Voodoo Doughnut' position: lng: -1226781446 lat: 455225512 text: 'Bailey\'s Taproom' position: lng: -12267535700000002 lat: 455192743 text: 'Barista' ; Component { const style = border: 'solid 2px darkgrey' borderRadius: '8px' backgroundColor: 'white' padding: '1em' textAlign: 'center' ; const cluster = thispropscluster; if clustermarkerslength == 1 return <div style=style >clustermarkers0text</div> ; return <div style=style>clustermarkerslength items</div> ; } const map = <Map center=position zoom=13> <ClusterLayer markers=markers clusterComponent=ExampleClusterComponent /> <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> </Map>; ;
API
The ClusterLayer
component takes the following props:
markers
: an array of objects that expose the properties defined in theMarker
typeclusterComponent
: (required) the React component to be rendered for each marker and cluster, this component will receive the following propscluster
: aCluster
object, as defined by the Cluster Flow typestyle
: a style object for positioningmap
: the Leaflet map object from thereact-leaflet
MapLayer
...propsForClusters
: the component will also receive the properties ofpropsForClusters
as props
propsForClusters
: props to pass on to marker and cluster componentsgridSize
: optional prop to control how bounds of clusters expand while being generated (default: 60)minClusterSize
: optional prop to enforce a minimum cluster size (default: 2)
Example
To try the example:
- Clone this repository
- run
npm install
in the root of your cloned repository - run
npm run example
- Visit localhost:8000
Contributing
See CONTRIBUTING.md
License
react-leaflet-cluster-layer
is MIT licensed.
See LICENSE.md for details.