maps

A custom layer for react-leaflet that makes clustering react components simple

Jul 21, 2019
A custom layer for react-leaflet that makes clustering react components simple

react-leaflet-cluster-layer

react-leaflet-cluster-layer provides a simple component for plotting React components as markers and clusters in a react-leaflet map.

Usage

import React from 'react'; import { render } from 'react-dom'; import { Map, Marker, Popup, TileLayer } from 'react-leaflet'; import ClusterLayer from 'react-leaflet-cluster-layer'; const position = { lng: -122.673447, lat: 45.522558 }; const markers = [ { position: { lng: -122.673447, lat: 45.5225581 }, text: 'Voodoo Doughnut', }, { position: { lng: -122.6781446, lat: 45.5225512 }, text: 'Bailey\'s Taproom', }, { position: { lng: -122.67535700000002, lat: 45.5192743 }, text: 'Barista' } ]; class ExampleClusterComponent extends React.Component { render() { const style = { border: 'solid 2px darkgrey', borderRadius: '8px', backgroundColor: 'white', padding: '1em', textAlign: 'center' }; const cluster = this.props.cluster; if (cluster.markers.length == 1) { return ( <div style={style} >{cluster.markers[0].text}</div> ); } return ( <div style={style}>{cluster.markers.length} 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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> </Map> ); render(map, document.getElementById('app'));

API

The ClusterLayer component takes the following props:

  • markers: an array of objects that expose the properties defined in the Marker type
  • clusterComponent: (required) the React component to be rendered for each marker and cluster, this component will receive the following props
    • cluster: a Cluster object, as defined by the Cluster Flow type
    • style: a style object for positioning
    • map: the Leaflet map object from the react-leaflet MapLayer
    • ...propsForClusters: the component will also receive the properties of propsForClusters as props
  • propsForClusters: props to pass on to marker and cluster components
  • gridSize: 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:

  1. Clone this repository
  2. run npm install in the root of your cloned repository
  3. run npm run example
  4. Visit localhost:8000

GitHub

Recommended