v2.5.0

PaulLeCam · Oct 19, 2019 · 6cc8b1a · 6cc8b1a
1 parent 2600f00
commit 6cc8b1a
Show file tree

Hide file tree

Showing 17 changed files with 596 additions and 335 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,14 @@
-## master
+## v2.5.0 (2019-10-19)
 
-- Added a GeoJSON Popup example ([PR #608](https://github.com/PaulLeCam/react-leaflet/pull/608) by _hackleman_).
+- Added `SVGOverlay` component ([PR #630](https://github.com/PaulLeCam/react-leaflet/pull/630) by _fenech_).
+- Added a `GeoJSON` with `Popup` example ([PR #608](https://github.com/PaulLeCam/react-leaflet/pull/608) by _hackleman_).
+- Fixed wrongly injecting the `leaflet` parameter in the `WMSTileLayer` URL.
+- [website] Added logo and branding guidelines ([PR #629](https://github.com/PaulLeCam/react-leaflet/pull/629) by _colbyfayock_).
 - [website] Added `react-leaflet-enhanced-marker` plugin ([PR #610](https://github.com/PaulLeCam/react-leaflet/pull/610) by _ishaan6395_).
 - [website] Added `leaflet-drift-marker` plugin ([PR #615](https://github.com/PaulLeCam/react-leaflet/pull/615) by _hugobarragon_).
 - [website] Added `react-leaflet-street-view` plugin ([PR #616](https://github.com/PaulLeCam/react-leaflet/pull/616) by _ishaan6395_).
+- [website] Removed unmaintained plugin `react-leaflet-rotatedmarker` plugin ([PR #617](https://github.com/PaulLeCam/react-leaflet/pull/617) by _verdie-g_).
+- [website] Added `react-leaflet-d3-svg-overlay` plugin ([PR #628](https://github.com/PaulLeCam/react-leaflet/pull/628) by _johannesloetzsch_).
 
 ## v2.4.0 (2019-06-09)
 

diff --git a/docs/components.md b/docs/components.md
@@ -32,10 +32,10 @@ You can check out the [event handling example](https://github.com/PaulLeCam/reac
 - [Vector Layers](#vector-layers)
   - [Circle](#circle)
   - [CircleMarker](#circlemarker)
-  - [SVGOverlay](#svgoverlay)
   - [Polyline](#polyline)
   - [Polygon](#polygon)
   - [Rectangle](#rectangle)
+  - [SVGOverlay](#svgoverlay)
 - [Other Layers](#other-layers)
   - [FeatureGroup](#featuregroup)
   - [GeoJSON](#geojson)
@@ -320,17 +320,6 @@ properties.
 - `radius: number` (optional)
 - `attribution: string` (optional)
 
-### SVGOverlay
-
-[🍃 Leaflet reference](https://leafletjs.com/reference-1.5.0.html#svgoverlay) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/SVGOverlay.js)
-
-**Dynamic properties**
-
-- `bounds: bounds` (required)
-- `opacity: number` (optional)
-- `zIndex: number` (optional)
-- `attribution: string` (optional)
-
 ### Polyline
 
 [🍃 Leaflet reference](http://leafletjs.com/reference-1.5.0.html#polyline) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/Polyline.js)
@@ -358,6 +347,17 @@ properties.
 - `bounds: bounds` (required)
 - `attribution: string` (optional)
 
+### SVGOverlay
+
+[🍃 Leaflet reference](https://leafletjs.com/reference-1.5.0.html#svgoverlay) • [🔍 Source](https://github.com/PaulLeCam/react-leaflet/blob/master/src/SVGOverlay.js)
+
+**Dynamic properties**
+
+- `bounds: bounds` (required)
+- `opacity: number` (optional)
+- `zIndex: number` (optional)
+- `attribution: string` (optional)
+
 ## Other Layers
 
 ### FeatureGroup

diff --git a/docs/logo-and-branding.md b/docs/logo-and-branding.md
@@ -3,8 +3,7 @@ id: logo-and-branding
 title: Logo & Branding
 ---
 
-The React Leaflet logo provides a way for the community to identify and communicaty the technologies used in their mapping applications. While the library is open source, it's encouraged to follow the best practices definied below to upload the integrity of the logo itself and what it represents.
-
+The React Leaflet logo provides a way for the community to identify and communicate the technologies used in their mapping applications. While the library is open source, it's encouraged to follow the best practices defined below to upload the integrity of the logo itself and what it represents.
 
 ## Logo
 
@@ -26,12 +25,18 @@ The React Leaflet logos should not be modified in any way that distorts the shap
 
 <img src="/docs/assets/react-leaflet-logo-usage.jpg" alt="React Leaflet Logo Usage" width="800"/>
 
+### Credit
+
+Logo and scheme originally created by [Colby Fayock](https://www.colbyfayock.com/).
+
 ### License
+
 The React Leaflet logos and assets are licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0/).
 
 ### Download
 
 For convenience, the following are packaged up in a `.zip` to download:
+
 - react-leaflet-icon-transparent-500x500.png
 - react-leaflet-icon-white-500x500.jpg
 - react-leaflet-icon.eps
@@ -45,13 +50,9 @@ For convenience, the following are packaged up in a `.zip` to download:
 
 ## Colors
 
-Color usage should follow the values below when working with React Leaflet branding or validating the integrity of the use of on of it's logos.
-
-| Color         | Hex           |       |
-| ------------- | ------------- | ----- |
-| primary       | #61BA9E       | <img src="/docs/assets/swatch-61BA9E-50x50.jpg" alt="#61BA9E" width="20" /> |
-| secondary     | #2A473E       | <img src="/docs/assets/swatch-2A473E-50x50.jpg" alt="#2A473E" width="20" /> |
-
-<br />
+Color usage should follow the values below when working with React Leaflet branding or validating the integrity of the use of one of its logos.
 
-Logo and scheme originally created by [Colby Fayock](https://www.colbyfayock.com/).
+| Color     | Hex     |                                                                             |
+| --------- | ------- | --------------------------------------------------------------------------- |
+| primary   | #61BA9E | <img src="/docs/assets/swatch-61BA9E-50x50.jpg" alt="#61BA9E" width="20" /> |
+| secondary | #2A473E | <img src="/docs/assets/swatch-2A473E-50x50.jpg" alt="#2A473E" width="20" /> |
diff --git a/example/components/svg-overlay.js b/example/components/svg-overlay.js
@@ -1,7 +1,8 @@
 // @flow
 
 import React, { Component } from 'react'
-import { Map, SVGOverlay } from '../../src'
+
+import { Map, SVGOverlay, TileLayer } from '../../src'
 
 const center = [51.505, -0.09]
 const rectangle = [[51.49, -0.08], [51.5, -0.06]]
@@ -10,6 +11,10 @@ export default class SVGOverlayExample extends Component<{}> {
   render() {
     return (
       <Map center={center} zoom={13}>
+        <TileLayer
+          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
         <SVGOverlay bounds={rectangle}>
           <rect x="0" y="0" width="100%" height="100%" fill="blue" />
           <circle r="5" cx="10" cy="10" fill="red" />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "React components for Leaflet maps",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,7 +49,7 @@
     "src/*"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.6.0",
+    "@babel/runtime": "^7.6.3",
     "fast-deep-equal": "^2.0.1",
     "hoist-non-react-statics": "^3.3.0",
     "warning": "^4.0.3"
@@ -60,49 +60,49 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.6.0",
-    "@babel/core": "^7.6.0",
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-export-default-from": "^7.5.2",
     "@babel/plugin-transform-proto-to-assign": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.6.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/plugin-transform-strict-mode": "^7.2.0",
-    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-env": "^7.6.3",
     "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "^7.6.3",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-dev-expression": "^0.2.2",
-    "cross-env": "^5.2.1",
-    "eslint": "^6.3.0",
-    "eslint-config-prettier": "^6.2.0",
+    "cross-env": "^6.0.3",
+    "eslint": "^6.5.1",
+    "eslint-config-prettier": "^6.4.0",
     "eslint-plugin-flowtype": "^4.3.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-node": "^10.0.0",
-    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react": "^7.16.0",
     "file-loader": "^4.2.0",
-    "flow-bin": "^0.107.0",
+    "flow-bin": "^0.109.0",
     "flow-copy-source": "^2.0.8",
     "flow-typed": "^2.6.1",
     "jest": "^24.9.0",
     "leaflet": "^1.5.1",
     "prettier": "^1.18.2",
     "prettier-eslint": "^9.0.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
     "rimraf": "^3.0.0",
-    "rollup": "^1.20.3",
+    "rollup": "^1.25.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-uglify": "^6.0.3",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.8",
-    "webpack-dev-server": "^3.8.0"
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.2"
   },
   "jest": {
     "collectCoverage": true

diff --git a/src/SVGOverlay.js b/src/SVGOverlay.js
@@ -3,15 +3,14 @@
 import { Layer, SVGOverlay as LeafletSVGOverlay } from 'leaflet'
 import { createPortal } from 'react-dom'
 
-import type { LeafletContext, SVGOverlayProps } from './types'
+import type { SVGOverlayProps } from './types'
 import { withLeaflet } from './context'
 import MapComponent from './MapComponent'
 
 type LeafletElement = LeafletSVGOverlay
 type Props = SVGOverlayProps
 
-export class SVGOverlay extends MapComponent<LeafletElement, Props> {
-  contextValue: ?LeafletContext
+class SVGOverlay extends MapComponent<LeafletElement, Props> {
   leafletElement: LeafletElement
   container: ?Element
 
@@ -24,27 +23,27 @@ export class SVGOverlay extends MapComponent<LeafletElement, Props> {
     return this.props.leaflet.layerContainer || this.props.leaflet.map
   }
 
-  createLeafletElement(_props: Props): LeafletElement {
+  createLeafletElement(props: Props): LeafletElement {
     this.container = document.createElementNS(
       'http://www.w3.org/2000/svg',
       'svg',
     )
     return new LeafletSVGOverlay(
       this.container,
-      _props.bounds,
-      this.getOptions(_props),
+      props.bounds,
+      this.getOptions(props),
     )
   }
 
-  updateLeafletElement(_fromProps: Props, _toProps: Props) {
-    if (_toProps.bounds !== _fromProps.bounds) {
-      this.leafletElement.setBounds(_toProps.bounds)
+  updateLeafletElement(fromProps: Props, toProps: Props) {
+    if (toProps.bounds !== fromProps.bounds) {
+      this.leafletElement.setBounds(toProps.bounds)
     }
-    if (_toProps.opacity !== _fromProps.opacity) {
-      this.leafletElement.setOpacity(_toProps.opacity)
+    if (toProps.opacity !== fromProps.opacity) {
+      this.leafletElement.setOpacity(toProps.opacity)
     }
-    if (_toProps.zIndex !== _fromProps.zIndex) {
-      this.leafletElement.setZIndex(_toProps.zIndex)
+    if (toProps.zIndex !== fromProps.zIndex) {
+      this.leafletElement.setZIndex(toProps.zIndex)
     }
   }
 

diff --git a/src/WMSTileLayer.js b/src/WMSTileLayer.js
@@ -14,14 +14,17 @@ type Props = { url: string } & GridLayerProps
 class WMSTileLayer extends GridLayer<LeafletElement, Props> {
   createLeafletElement(props: Props): LeafletElement {
     const { url, ...params } = props
-    return new TileLayer.WMS(url, this.getOptions(params))
+    const { leaflet: _l, ...options } = this.getOptions(params)
+    return new TileLayer.WMS(url, options)
   }
 
   updateLeafletElement(fromProps: Props, toProps: Props) {
     super.updateLeafletElement(fromProps, toProps)
 
-    const { url: prevUrl, opacity: _po, zIndex: _pz, ...prevParams } = fromProps
-    const { url, opacity: _o, zIndex: _z, ...params } = toProps
+    const { url: prevUrl, opacity: _po, zIndex: _pz, ...prevProps } = fromProps
+    const { leaflet: _pl, ...prevParams } = this.getOptions(prevProps)
+    const { url, opacity: _o, zIndex: _z, ...props } = toProps
+    const { leaflet: _l, ...params } = this.getOptions(props)
 
     if (url !== prevUrl) {
       this.leafletElement.setUrl(url)

diff --git a/website/i18n/en.json b/website/i18n/en.json
@@ -59,6 +59,9 @@
       "version-v1/version-v1-intro": {
         "title": "Introduction"
       },
+      "version-v1/version-v1-logo-and-branding": {
+        "title": "Logo & Branding"
+      },
       "version-v1/version-v1-plugins": {
         "title": "Third-party plugins"
       },
@@ -92,6 +95,9 @@
       "version-v2/version-v2-intro": {
         "title": "Introduction"
       },
+      "version-v2/version-v2-logo-and-branding": {
+        "title": "Logo & Branding"
+      },
       "version-v2/version-v2-plugins": {
         "title": "Third-party plugins"
       },
@@ -109,8 +115,7 @@
       "Getting started": "Getting started",
       "API": "API",
       "Guides": "Guides",
-      "Extra": "Extra",
-      "Usage": "Usage"
+      "Extra": "Extra"
     }
   },
   "pages-strings": {

diff --git a/website/package.json b/website/package.json
@@ -15,6 +15,6 @@
     "highlight.js": "^9.15.10"
   },
   "devDependencies": {
-    "docusaurus": "~1.12.0"
+    "docusaurus": "~1.13.0"
   }
 }
diff --git a/website/sidebars.json b/website/sidebars.json
@@ -3,7 +3,6 @@
     "Getting started": ["intro", "setup", "installation", "examples"],
     "API": ["context", "events", "components"],
     "Guides": ["custom-components", "class-hierarchy"],
-    "Extra": ["plugins"],
-    "Usage": ["logo-and-branding"]
+    "Extra": ["logo-and-branding", "plugins"]
   }
 }