Skip to content

Commit

Permalink
[beta] 3.0.0-rc1: react-leaflet v3 and React 17 support (#125)
Browse files Browse the repository at this point in the history 
* Support react-leaflet v3.0

Signed-off-by: Mark Ison <mark@codecutter.uk>

* refactor: implement review suggestions

* feat: migrate storybook examples to react-leaflet v3

* doc: fix stylesheet unpkg tag

* doc: update readme for react-leaflet v3

Co-authored-by: Mark Ison <mark@codecutter.uk>
  • Loading branch information
@yuzhva @CodeCutterUK
yuzhva and CodeCutterUK authored Nov 16, 2020
1 parent 7713479 commit b458438
Show file tree
Hide file tree
Showing 12 changed files with 2,737 additions and 2,538 deletions.
152 changes: 92 additions & 60 deletions .storybook/doc.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,15 @@ import {
Just grab your markers inside `<MarkerClusterGroup />` component, right after `<TileLayer />`:

```javascript
import { Map, TileLayer, Marker } from 'react-leaflet';
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
<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'
Expand All @@ -31,7 +36,7 @@ import MarkerClusterGroup from 'react-leaflet-markercluster';
<Marker position={[52.2297, 21.0122]} />
<Marker position={[51.5074, -0.0901]} />
</MarkerClusterGroup>
</Map>
</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).
Expand All @@ -42,54 +47,59 @@ If you would like to pass some props to the Marker, please use [react-leaflet Ma

[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 { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
<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())
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={[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>
</Map>
/>

<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>
Expand All @@ -98,7 +108,7 @@ import MarkerClusterGroup from 'react-leaflet-markercluster';

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

------
---

# Cluster custom icon

Expand All @@ -109,7 +119,7 @@ Just pass whatever option you need from [All Leaflet.markercluster Options](http

```javascript
import L from 'leaflet';
import { Map, TileLayer, Marker } from 'react-leaflet';
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

// Function for creating custom icon for cluster group
Expand All @@ -124,7 +134,7 @@ const createClusterCustomIcon = function (cluster) {
});
};
<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
<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'
Expand All @@ -146,10 +156,11 @@ const createClusterCustomIcon = function (cluster) {
<Marker position={[51.5, -0.09]} />
<Marker position={[51.5, -0.09]} />
</MarkerClusterGroup>
</Map>
</MapContainer>
```

And do not forget about styles for your class:

```css
/* Customize the Clustered Markers */
.marker-cluster-custom {
Expand All @@ -172,7 +183,7 @@ If you would like to pass some props to the Cluster, please check [List of all L

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

------
---

# Marker icon and title

Expand All @@ -181,7 +192,7 @@ For setting Marker options, please use [react-leaflet Marker API](https://react-

```javascript
import L from 'leaflet';
import { Map, TileLayer, Marker } from 'react-leaflet';
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
import redFilledMarker from './icons/red-filled-marker.svg';
Expand All @@ -193,7 +204,12 @@ const redMarker = L.icon({
iconAnchor: [20, 40],
});
<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
<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'
Expand All @@ -203,12 +219,19 @@ const redMarker = L.icon({
<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.9450]} />
<Marker position={[48.9226, 24.7111]} title="San Frankivsko 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" />
<Marker
position={[51.5, -0.09]}
icon={redMarker}
title="London title on hover"
/>
</MarkerClusterGroup>
</Map>
</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)
Expand All @@ -219,17 +242,17 @@ If you would like to pass some props to the Cluster, please check [List of all L

[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 />
Just pass **react-leaflet Popup** component to the **Marker** as a child: <br />

```javascript
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
import redFilledMarker from './icons/red-filled-marker.svg';
Expand All @@ -241,7 +264,12 @@ const redMarker = L.icon({
iconAnchor: [20, 40],
});
<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
<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'
Expand All @@ -259,7 +287,7 @@ const redMarker = L.icon({
<Marker position={[50.4501, 30.5234]} />
<Marker position={[52.2297, 21.0122]} />
<Marker position={[50.0647, 19.9450]} />
<Marker position={[50.0647, 19.945]} />
<Marker position={[48.9226, 24.7111]} />
<Marker position={[48.7164, 21.2611]} />
Expand All @@ -272,7 +300,7 @@ const redMarker = L.icon({
</Popup>
</Marker>
</MarkerClusterGroup>
</Map>
</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)
Expand All @@ -283,22 +311,27 @@ If you would like to pass some props to the Cluster, please check [List of all L

[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 />
Just pass **react-leaflet Tooltip** component to the **Marker** as a child: <br />

```javascript
import { Map, TileLayer, Marker, Tooltip } from 'react-leaflet';
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
<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
<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'
Expand All @@ -313,7 +346,7 @@ import MarkerClusterGroup from 'react-leaflet-markercluster';
<Marker position={[50.4501, 30.5234]} />
<Marker position={[52.2297, 21.0122]} />
<Marker position={[50.0647, 19.9450]} />
<Marker position={[50.0647, 19.945]} />
<Marker position={[48.9226, 24.7111]} />
<Marker position={[48.7164, 21.2611]} />
Expand All @@ -323,7 +356,7 @@ import MarkerClusterGroup from 'react-leaflet-markercluster';
</Tooltip>
</Marker>
</MarkerClusterGroup>
</Map>
</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)
Expand All @@ -333,4 +366,3 @@ If you would like to pass some props to the Cluster, please check [List of all L
</Preview>

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

8 changes: 3 additions & 5 deletions .storybook/examples/basic.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import { Map, TileLayer, Marker } from 'react-leaflet';
import { MapContainer, TileLayer, Marker } from 'react-leaflet';

import MarkerClusterGroup from './../../src/react-leaflet-markercluster';

Expand All @@ -9,13 +9,12 @@ import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from './constants';
import './styles.scss';

const BasicExample = () => (
<Map
<MapContainer
className="markercluster-map"
center={MAP_CENTER_COORDINATES}
zoom={MAP_ZOOM}
maxZoom={MAP_MAX_ZOOM}
>

<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
Expand All @@ -26,8 +25,7 @@ const BasicExample = () => (
<Marker position={[52.2297, 21.0122]} />
<Marker position={[51.5074, -0.0901]} />
</MarkerClusterGroup>

</Map>
</MapContainer>
);

export default BasicExample;
8 changes: 3 additions & 5 deletions .storybook/examples/event-listeners.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

import MarkerClusterGroup from './../../src/react-leaflet-markercluster';

Expand All @@ -10,13 +10,12 @@ import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from './constants';
import './styles.scss';

const EventListeners = () => (
<Map
<MapContainer
className="markercluster-map"
center={MAP_CENTER_COORDINATES}
zoom={MAP_ZOOM}
maxZoom={MAP_MAX_ZOOM}
>

<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
Expand Down Expand Up @@ -53,8 +52,7 @@ const EventListeners = () => (
</Popup>
</Marker>
</MarkerClusterGroup>

</Map>
</MapContainer>
);

export default EventListeners;
Loading

0 comments on commit b458438

Please sign in to comment.