import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

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='&copy; <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).

<Preview>
  <Story name="Basic example">{BasicExample}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/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='&copy; <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>;
```

<Preview>
  <Story name="Event listeners">{EventListeners}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/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='&copy; <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)

<Preview>
  <Story name="Cluster custom icon">{MarkerClusterOptions}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/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='&copy; <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)

<Preview>
  <Story name="Marker icon and title">{MarkerOptions}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/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='&copy; <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)

<Preview>
  <Story name="Marker popup">{MarkerPopup}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/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='&copy; <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)

<Preview>
  <Story name="Marker tooltip">{MarkerTooltip}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/react-leaflet-markercluster/blob/master/.storybook/examples/marker-tooltip.js)