[release] 2.0.0: support of react-leaflet v2 (#107)

* clean-up * yarn init * chore: create webpack build config * chore: eslint * chore: storybook stories * doc: update * chore: deploy gh-pages * [config] update release version * chore: build and minimize lib * chore: change build process * chore: build source * docs: update readme
yuzhva · Apr 3, 2020 · 784f669 · 784f669
1 parent 563e543
commit 784f669
Show file tree

Hide file tree

Showing 61 changed files with 20,429 additions and 22,089 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.codeclimate.yml b/.codeclimate.yml
@@ -14,4 +14,4 @@ ratings:
 
 exclude_paths:
 - "dist/"
-- "demo-app/"
+- ".storybook/"
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,21 +1,20 @@
 {
-  "extends": "airbnb",
   "env": {
     "browser": true,
-    "jest": true
+    "es6": true
   },
-  "plugins": [
-    "react",
-    "jsx-a11y",
-    "import"
-  ],
-  "rules": {
-    "arrow-parens": ["error", "always"],
-    "no-console": [1, { "allow": ["warn"] }],
-
-    "react/jsx-filename-extension": 0,
-
-    "react/forbid-prop-types": 0,
-    "no-underscore-dangle": ["error", { "allow": ["_container"] }]
-  }
+  "extends": ["plugin:react/recommended", "airbnb"],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {}
 }
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,5 @@
 /yarn-error.log
 
 /coverage
+
+/storybook-static
diff --git a/.storybook/doc.stories.mdx b/.storybook/doc.stories.mdx
@@ -0,0 +1,336 @@
+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 { Map, TileLayer, Marker } from 'react-leaflet';
+import MarkerClusterGroup from 'react-leaflet-markercluster';
+
+<Map 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>
+</Map>
+```
+
+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 { Map, 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}>
+  <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>
+</Map>
+```
+
+<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 { Map, 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),
+  });
+};
+
+<Map 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>
+</Map>
+```
+
+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 { Map, 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],
+});
+
+<Map 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.9450]} />
+    <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>
+</Map>
+```
+
+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 { Map, 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],
+});
+
+<Map 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.9450]} />
+    <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>
+</Map>
+```
+
+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 { Map, 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}>
+  <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.9450]} />
+    <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>
+</Map>
+```
+
+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)
+