Support WMSTileLayer dynamic parameters

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v1.0.0-rc.2 (2016-10-20)
+
+- Added `Pane` component introduced in Leaflet v1. ([PR #227](https://github.com/PaulLeCam/react-leaflet/pull/227) by *rjdestigter*).
+- Added support for IE9 and IE10 ([PR #235](https://github.com/PaulLeCam/react-leaflet/pull/235) by *dettier*).
+- Updated `WMSTileLayer` to support dynamic parameters.
+
 ## v1.0.0-rc.1 (2016-09-28)
 
 - [BREAKING] Removed `setIconDefaultImagePath()` helper, set `Leaflet.Icon.Default.imagePath` directly using Leaflet if you need.

dist/react-leaflet.js

@@ -5930,6 +5930,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	exports.__esModule = true;
 
+	var _isEqual2 = __webpack_require__(24);
+
+	var _isEqual3 = _interopRequireDefault(_isEqual2);
+
 	var _leaflet = __webpack_require__(4);
 
 	var _react = __webpack_require__(3);
@@ -5969,6 +5973,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	    this.leafletElement = _leaflet.tileLayer.wms(url, this.getOptions(props));
 	  };
 
+	  WMSTileLayer.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+	    if (!(0, _isEqual3.default)(this.props, prevProps)) {
+	      this.leafletElement.setParams(this.props);
+	    }
+	  };
+
 	  return WMSTileLayer;
 	}(_GridLayer3.default);
 

docs/Components.md

@@ -11,7 +11,7 @@ You can directly access the Leaflet element created by a component using `this.l
   - [MapLayer](#maplayer)
   - [Path](#path)
 - [Map](#map)
-- [Pane](#pane)
+  - [Pane](#pane)
 - [UI Layers](#ui-layers)
   - [Marker](#marker)
   - [Popup](#popup)
@@ -60,13 +60,13 @@ Base class extending [`MapComponent`](#mapcomponent), handling adding the layer
 ### Path
 
 Base class extending [`MapLayer`](#maplayer) with the following methods:
-- `getPathOptions(object props): object`: filters the input `props` and return a new object of [Path options](http://leafletjs.com/reference.html#path-options) properties.
-- `setStyle(object options = {}): void`: alias to the Leaflet element [`setStyle()`](http://leafletjs.com/reference.html#path-setstyle).
+- `getPathOptions(object props): object`: filters the input `props` and return a new object of [Path options](http://leafletjs.com/reference-1.0.0.html#path-options) properties.
+- `setStyle(object options = {}): void`: alias to the Leaflet element [`setStyle()`](http://leafletjs.com/reference-1.0.0.html#path-setstyle).
 - `setStyleIfChanged(object fromProps, object toProps): void`: extracts the Path options of the two arguments, and calls `setStyle()` with the new options if different from the previous ones.
 
 ## Map
 
-This is the top-level component that must be mounted for children ones to be rendered. Refer to [Leaflet documentation](http://leafletjs.com/reference.html#map-options) for more information about the properties.
+This is the top-level component that must be mounted for children ones to be rendered. Refer to [Leaflet documentation](http://leafletjs.com/reference-1.0.0.html#map-options) for more information about the properties.
 
 **Dynamic properties**
 - `animate: boolean` (optional): If `true`, panning will always be animated if possible. Defaults to `false`.
@@ -83,18 +83,19 @@ This is the top-level component that must be mounted for children ones to be ren
 - `id: string` (optional): The ID of the `<div>` container for the map. If you don't provide it, a unique one will be created.
 
 ## Pane
+
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#map-pane)
+
 **Dynamic properties**
-- `name: string` (optional): Names of default leaflet panes are blacklisted.
+- `name: string` (optional): Unique name for the pane. Existing Leaflet panes are blacklisted.
 - `style: object` (optional): style property of the pane's `<div>`
 - `className: string` (optional):  className property of the pane's `<div>`
 
-[Leaflet reference](http://leafletjs.com/examples/map-panes.html)
-
 ## UI Layers
 
 ### Marker
 
-[Leaflet reference](http://leafletjs.com/reference.html#marker)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#marker)
 
 **Dynamic properties**
 - `position: latLng` (required)
@@ -105,7 +106,7 @@ This is the top-level component that must be mounted for children ones to be ren
 
 ### Popup
 
-[Leaflet reference](http://leafletjs.com/reference.html#popup)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#popup)
 
 The Popup children will be rendered using `ReactDOM.render()`, they must be valid React elements.
 
@@ -122,7 +123,7 @@ The Tooltip children will be rendered using `ReactDOM.render()`, they must be va
 
 ### TileLayer
 
-[Leaflet reference](http://leafletjs.com/reference.html#tilelayer)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#tilelayer)
 
 **Dynamic properties**
 - `url: string` (required)
@@ -131,53 +132,58 @@ The Tooltip children will be rendered using `ReactDOM.render()`, they must be va
 
 ### ImageOverlay
 
-[Leaflet reference](http://leafletjs.com/reference.html#imageoverlay)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#imageoverlay)
 
 **Dynamic properties**
 - `url: string` (required)
 - `opacity: number` (optional)
 
 ### WMSTileLayer
 
-[Leaflet reference](http://leafletjs.com/reference.html#tilelayer-wms)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#tilelayer-wms)
+
+**Properties**
+- `url: string` (required)
+
+All other properties are passed as parameters and dynamic, they will cause the layer to redraw if they change.
 
 ## Vector Layers
 
-All vector layers extend the **Path** component and therefore accept dynamic [Path options](http://leafletjs.com/reference.html#path-options) properties.
+All vector layers extend the **Path** component and therefore accept dynamic [Path options](http://leafletjs.com/reference-1.0.0.html#path-options) properties.
 
 ### Circle
 
-[Leaflet reference](http://leafletjs.com/reference.html#circle)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#circle)
 
 **Dynamic properties**
 - `center: latLng` (required)
 - `radius: number` (required)
 
 ### CircleMarker
 
-[Leaflet reference](http://leafletjs.com/reference.html#circlemarker)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#circlemarker)
 
 **Dynamic properties**
 - `center: latLng` (required)
 - `radius: number` (optional)
 
 ### Polyline
 
-[Leaflet reference](http://leafletjs.com/reference.html#polyline)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#polyline)
 
 **Dynamic properties**
 - `positions: latLngList | latLngList[]` (required)
 
 ### Polygon
 
-[Leaflet reference](http://leafletjs.com/reference.html#polygon)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#polygon)
 
 **Dynamic properties**
 - `positions: latLngList | latLngList[] | latLngList[][]` (required)
 
 ### Rectangle
 
-[Leaflet reference](http://leafletjs.com/reference.html#rectangle)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#rectangle)
 
 **Dynamic properties**
 - `bounds: bounds` (required)
@@ -190,7 +196,7 @@ Extended `LayerGroup` supporting a `Popup` child.
 
 ### GeoJson
 
-[Leaflet reference](http://leafletjs.com/reference.html#geojson)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#geojson)
 
 **Properties**
 - `data: GeoJSON` (required). This property will *not* be updated if it is changed after the component is mounted.
@@ -211,14 +217,14 @@ Use the `LayerGroup` wrapper component to group children layers together.
 
 ### AttributionControl
 
-[Leaflet reference](http://leafletjs.com/reference.html#control-attribution)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#control-attribution)
 
 **Dynamic properties**
 - `position: controlPosition` (optional)
 
 ### LayersControl
 
-[Leaflet reference](http://leafletjs.com/reference.html#control-layers)  
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#control-layers)  
 
 **Dynamic properties**
 - `position: controlPosition` (optional)
@@ -277,14 +283,14 @@ Example usage:
 
 ### ScaleControl
 
-[Leaflet reference](http://leafletjs.com/reference.html#control-scale)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#control-scale)
 
 **Dynamic properties**
 - `position: controlPosition` (optional)
 
 ### ZoomControl
 
-[Leaflet reference](http://leafletjs.com/reference.html#control-zoom)
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#control-zoom)
 
 **Dynamic properties**
 - `position: controlPosition` (optional)

example/components/index.js

@@ -14,6 +14,7 @@ import CustomComponentExample from './custom-component'
 import AnimateExample from './animate'
 import TooltipExample from './tooltip'
 import PaneExample from './pane'
+import WMSTileLayerExample from './wms-tile-layer'
 
 Leaflet.Icon.Default.imagePath = '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/images/'
 
@@ -47,6 +48,8 @@ const examples = (
     <h2>Animate</h2>
     <p>Click the map to move to the location</p>
     <AnimateExample />
+    <h2>WMS tile layer</h2>
+    <WMSTileLayerExample />
   </div>
 )
 

example/components/wms-tile-layer.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import { Map, TileLayer, WMSTileLayer } from '../../src'
+
+export default class WMSTileLayerExample extends Component {
+  state = {
+    lat: 51.505,
+    lng: -0.09,
+    zoom: 5,
+    bluemarble: false,
+  }
+
+  onClick = () => {
+    this.setState({
+      bluemarble: !this.state.bluemarble,
+    })
+  }
+
+  render () {
+    return (
+      <Map
+        center={[this.state.lat, this.state.lng]}
+        zoom={this.state.zoom}
+        onClick={this.onClick}>
+        <TileLayer
+          attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+        />
+        <WMSTileLayer
+          layers={this.state.bluemarble ? 'nasa:bluemarble' : 'ne:ne'}
+          url='http://demo.opengeo.org/geoserver/ows?'
+        />
+      </Map>
+    )
+  }
+}

lib/WMSTileLayer.js

@@ -2,6 +2,10 @@
 
 exports.__esModule = true;
 
+var _isEqual2 = require('lodash/isEqual');
+
+var _isEqual3 = _interopRequireDefault(_isEqual2);
+
 var _leaflet = require('leaflet');
 
 var _react = require('react');
@@ -41,6 +45,12 @@ var WMSTileLayer = function (_GridLayer) {
     this.leafletElement = _leaflet.tileLayer.wms(url, this.getOptions(props));
   };
 
+  WMSTileLayer.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (!(0, _isEqual3.default)(this.props, prevProps)) {
+      this.leafletElement.setParams(this.props);
+    }
+  };
+
   return WMSTileLayer;
 }(_GridLayer3.default);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "React components for Leaflet maps",
   "main": "lib/index.js",
   "scripts": {
@@ -57,15 +57,15 @@
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
-    "eslint": "^3.8.0",
+    "eslint": "^3.8.1",
     "eslint-config-standard": "^6.1.0",
     "eslint-config-standard-jsx": "^3.1.0",
     "eslint-config-standard-react": "^4.1.0",
-    "eslint-plugin-promise": "^3.0.0",
+    "eslint-plugin-promise": "^3.2.0",
     "eslint-plugin-react": "^6.3.0",
     "eslint-plugin-standard": "^2.0.1",
     "flow-bin": "^0.33.0",
-    "jest-cli": "^16.0.1",
+    "jest-cli": "^16.0.2",
     "leaflet": "^1.0.0",
     "lodash-webpack-plugin": "^0.10.1",
     "react": "^15.3.2",

src/WMSTileLayer.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import { tileLayer } from 'leaflet'
+import { isEqual } from 'lodash'
 import { PropTypes } from 'react'
 
 import GridLayer from './GridLayer'
@@ -15,4 +16,10 @@ export default class WMSTileLayer extends GridLayer {
     const { url, ...props } = this.props
     this.leafletElement = tileLayer.wms(url, this.getOptions(props))
   }
+
+  componentDidUpdate (prevProps: Object) {
+    if (!isEqual(this.props, prevProps)) {
+      this.leafletElement.setParams(this.props)
+    }
+  }
 }