@christopherpickering/react-leaflet-markercluster
Version:
React wrapper of Leaflet.markercluster for react-laeflet
358 lines (288 loc) • 11.2 kB
text/mdx
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import {
BasicExample,
EventListeners,
MarkerClusterOptions,
MarkerOptions,
MarkerPopup,
MarkerTooltip,
} from './examples';
<Meta title="React Leaflet MarkerCluster" />
# Basic example
Just grab your markers inside `<MarkerClusterGroup />` component, right after `<TileLayer />`:
```javascript
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
<MapContainer
className="markercluster-map"
center={[51.0, 19.0]}
zoom={4}
maxZoom={18}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{/* Put <MarkerClusterGroup {...props} /> inside react-leaflet after <TileLayer /> */}
<MarkerClusterGroup>
<Marker position={[49.8397, 24.0297]} />
<Marker position={[52.2297, 21.0122]} />
<Marker position={[51.5074, -0.0901]} />
</MarkerClusterGroup>
</MapContainer>;
```
If you would like to pass some props to the Marker, please use [react-leaflet Marker component API](https://react-leaflet.js.org/docs/en/components.html#marker).
<Story name="Basic example">{BasicExample}</Story>
[GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/basic.js)
---
# Event listeners
Just pass event handler into appropriate component, like:
```javascript
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
<MapContainer
className="markercluster-map"
center={[51.0, 19.0]}
zoom={4}
maxZoom={18}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<MarkerClusterGroup
onClusterClick={cluster =>
console.warn('cluster-click', cluster, cluster.layer.getAllChildMarkers())
}
>
<Marker
position={[49.8397, 24.0297]}
onClick={marker =>
console.warn('marker-click', marker, marker.target.getLatLng())
}
/>
<Marker
position={[52.2297, 21.0122]}
onClick={marker =>
console.warn('marker-click', marker, marker.target.getLatLng())
}
/>
<Marker position={[51.5074, -0.0901]}>
<Popup
minWidth={200}
closeButton={false}
onClose={popup => console.warn('popup-close', popup)}
>
<div>
<b>Hello world!</b>
<p>I am a lonely popup.</p>
</div>
</Popup>
</Marker>
</MarkerClusterGroup>
</MapContainer>;
```
<Story name="Event listeners">{EventListeners}</Story>
[GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/event-listeners.js)
---
# Cluster custom icon
Leaflet.markercluster support some helpful options for clustered markers customization like: <br />
**showCoverageOnHover, maxClusterRadius** or **iconCreateFunction.**
Just pass whatever option you need from [All Leaflet.markercluster Options](https://github.com/Leaflet/Leaflet.markercluster#all-options) to **MarkerClusterGroup** as **prop**.
```javascript
import L from 'leaflet';
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
// Function for creating custom icon for cluster group
// https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers
// NOTE: iconCreateFunction is running by leaflet, which is not support ES6 arrow func syntax
// eslint-disable-next-line
const createClusterCustomIcon = function (cluster) {
return L.divIcon({
html: \`<span>\${cluster.getChildCount()}</span>\`,
className: 'marker-cluster-custom',
iconSize: L.point(40, 40, true),
});
};
<MapContainer className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{/* Pass Leaflet.markercluster option directly to MarkerClusterGroup as prop */}
<MarkerClusterGroup
showCoverageOnHover={false}
spiderfyDistanceMultiplier={2}
iconCreateFunction={createClusterCustomIcon}
>
<Marker position={[49.8397, 24.0297]} />
<Marker position={[50.4501, 30.5234]} />
<Marker position={[52.2297, 21.0122]} />
<Marker position={[50.0647, 19.9450]} />
<Marker position={[48.9226, 24.7111]} />
<Marker position={[48.7164, 21.2611]} />
<Marker position={[51.5, -0.09]} />
<Marker position={[51.5, -0.09]} />
<Marker position={[51.5, -0.09]} />
</MarkerClusterGroup>
</MapContainer>
```
And do not forget about styles for your class:
```css
/* Customize the Clustered Markers */
.marker-cluster-custom {
background: #9370db;
border: 3px solid #ededed;
border-radius: 50%;
color: #ededed;
height: 40px;
line-height: 37px;
text-align: center;
width: 40px;
}
```
If you would like to pass some props to the Cluster, please check [List of all Leaflet.markercluster options](https://github.com/Leaflet/Leaflet.markercluster#all-options)
<Story name="Cluster custom icon">{MarkerClusterOptions}</Story>
[GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/marker-cluster-options.js)
---
# Marker icon and title
Base on: [react-leaflet example](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js) <br />
For setting Marker options, please use [react-leaflet Marker API](https://react-leaflet.js.org/docs/en/components.html#marker)
```javascript
import L from 'leaflet';
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
import redFilledMarker from './icons/red-filled-marker.svg';
// Create marker icon according to the official leaflet documentation
const redMarker = L.icon({
iconUrl: redFilledMarker,
iconSize: [40, 40],
iconAnchor: [20, 40],
});
<MapContainer
className="markercluster-map"
center={[51.0, 19.0]}
zoom={4}
maxZoom={18}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<MarkerClusterGroup>
<Marker position={[49.8397, 24.0297]} icon={redMarker} />
<Marker position={[50.4501, 30.5234]} />
<Marker position={[52.2297, 21.0122]} title="Warszawa title on hover" />
<Marker position={[50.0647, 19.945]} />
<Marker
position={[48.9226, 24.7111]}
title="San Frankivsko title on hover"
/>
<Marker position={[48.7164, 21.2611]} />
<Marker
position={[51.5, -0.09]}
icon={redMarker}
title="London title on hover"
/>
</MarkerClusterGroup>
</MapContainer>;
```
If you would like to pass some props to the Cluster, please check [List of all Leaflet Marker options](http://leafletjs.com/reference.html#marker-option)
<Story name="Marker icon and title">{MarkerOptions}</Story>
[GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/marker-options.js)
---
# Marker popup
Base on: [react-leaflet example](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js) <br />
Create Popup for Marker as easy, as to cluster all markers. <br />
Just pass **react-leaflet Popup** component to the **Marker** as a child: <br />
```javascript
import L from 'leaflet';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
import redFilledMarker from './icons/red-filled-marker.svg';
// Create marker icon according to the official leaflet documentation
const redMarker = L.icon({
iconUrl: redFilledMarker,
iconSize: [40, 40],
iconAnchor: [20, 40],
});
<MapContainer
className="markercluster-map"
center={[51.0, 19.0]}
zoom={4}
maxZoom={18}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<MarkerClusterGroup>
<Marker position={[49.8397, 24.0297]} icon={redMarker}>
<Popup>
<div>
<b>Hello world!</b>
<p>I am a clustered popup.</p>
</div>
</Popup>
</Marker>
<Marker position={[50.4501, 30.5234]} />
<Marker position={[52.2297, 21.0122]} />
<Marker position={[50.0647, 19.945]} />
<Marker position={[48.9226, 24.7111]} />
<Marker position={[48.7164, 21.2611]} />
<Marker position={[51.5, -0.09]}>
<Popup minWidth={200} closeButton={false}>
<div>
<b>Hello world!</b>
<p>I am a lonely popup.</p>
</div>
</Popup>
</Marker>
</MarkerClusterGroup>
</MapContainer>;
```
If you would like to pass some props to the Cluster, please check [List of all Leaflet Popup options](http://leafletjs.com/reference.html#popup-option)
<Story name="Marker popup">{MarkerPopup}</Story>
[GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/marker-popup.js)
---
# Marker tooltip
Base on: [react-leaflet example](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/tooltip.js) <br />
Creation of Tooltip for Marker as easy, as a creation of Popup. <br />
Just pass **react-leaflet Tooltip** component to the **Marker** as a child: <br />
```javascript
import { MapContainer, TileLayer, Marker, Tooltip } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
// Setup Tooltip according to react-leaflet documentation
// https://react-leaflet.js.org/docs/en/examples.html
<MapContainer
className="markercluster-map"
center={[51.0, 19.0]}
zoom={4}
maxZoom={18}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<MarkerClusterGroup>
<Marker position={[49.8397, 24.0297]}>
<Tooltip>
<span>my tooltip text 1</span>
</Tooltip>
</Marker>
<Marker position={[50.4501, 30.5234]} />
<Marker position={[52.2297, 21.0122]} />
<Marker position={[50.0647, 19.945]} />
<Marker position={[48.9226, 24.7111]} />
<Marker position={[48.7164, 21.2611]} />
<Marker position={[51.5, -0.09]}>
<Tooltip direction="bottom">
<span>my tooltip text 1</span>
</Tooltip>
</Marker>
</MarkerClusterGroup>
</MapContainer>;
```
If you would like to pass some props to the Cluster, please check [List of all Leaflet Tooltip options](http://leafletjs.com/reference.html#tooltip-option)
<Story name="Marker tooltip">{MarkerTooltip}</Story>
[GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/marker-tooltip.js)