Make ImageOverlay url and opacity dynamic

+ update docs and set Leaflet as peer dependency

README.md

@@ -14,6 +14,12 @@ Tests and documentation still being worked on.
 npm install react-leaflet
 ```
 
+React and Leaflet are peer dependencies, if you haven't already installed them use:
+
+```bash
+npm install leaflet react react-leaflet
+```
+
 ## Getting started
 
 All components are React wrappers for Leaflet elements and layers, they need a map instance and therefore must be included in a top-level `<Map>` component.
@@ -70,6 +76,8 @@ Note that the `<Map>` component creates its own `<div>` container for the map, i
 
 **LatLngList**: An Array of *LatLng*.
 
+**Bounds**: An instance of *Leaflet.LatLngBounds* or a *LatLngList*.
+
 ### Events
 
 Leaflet exposes its own events, different from React. You can listen to them using React-Leaflet by adding a callback to a property prefixed by `onLeaflet`. Ex: `<Map onLeafletMoveend={this.handleMoveend}>...</Map>`.  
@@ -89,7 +97,7 @@ This is the top-level component that must be mounted for children ones to be ren
 **Properties**
 - `center` (optional LatLng, dynamic): Center of the map. This property is dynamic, if you change it it will be reflected in the map.
 - `id` (optional String): The ID of the `<div>` container for the map. If you don't provide it, a unique one will be created.
-- `maxBounds` (optional LatlngList)
+- `maxBounds` (optional Bounds)
 - `maxZoom` (optional Number)
 - `minZoom` (optional Number)
 - `zoom` (optional Number, dynamic)
@@ -114,11 +122,16 @@ The Popup children will be rendered as its content using `React.renderToStaticMa
 - `opacity` (optional Number, dynamic)
 - `zIndex` (optional Number, dynamic)
 
+##### ImageOverlay
+
+- `url` (required String, dynamic)
+- `opacity` (optional Number, dynamic)
+- `attribution` (optional String)
+
 ##### Implemented but needing testing and documentation
 
 - CanvasTileLayer
 - WMSTileLayer
-- ImageOverlay
 
 #### Vector Layers
 
@@ -150,7 +163,7 @@ The Popup children will be rendered as its content using `React.renderToStaticMa
 
 ##### Rectangle
 
-- `bounds` (required LatLngList, dynamic)
+- `bounds` (required Bounds, dynamic)
 
 #### Other Layers
 

example/build/lib.js

@@ -139,14 +139,25 @@ module.exports = React.createClass({
 
   propTypes: {
     url: React.PropTypes.string.isRequired,
-    bounds: boundsType.isRequired
+    bounds: boundsType.isRequired,
+    opacity: React.PropTypes.number,
+    attribution: React.PropTypes.string
   },
 
   componentWillMount:function() {
     var $__0=     this.props,bounds=$__0.bounds,map=$__0.map,url=$__0.url,props=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{bounds:1,map:1,url:1});
     this._leafletElement =  Leaflet.imageOverlay(url, bounds, props);
   },
 
+  componentDidUpdate:function(prevProps) {
+    if (this.props.url !== prevProps.url) {
+      this.getLeafletElement().setUrl(this.props.url);
+    }
+    if (this.props.opacity !== prevProps.opacity) {
+      this.getLeafletElement().setOpacity(this.props.opacity);
+    }
+  },
+
   render:function() {
     return null;
   }

lib/ImageOverlay.js

@@ -11,14 +11,25 @@ module.exports = React.createClass({
 
   propTypes: {
     url: React.PropTypes.string.isRequired,
-    bounds: boundsType.isRequired
+    bounds: boundsType.isRequired,
+    opacity: React.PropTypes.number,
+    attribution: React.PropTypes.string
   },
 
   componentWillMount:function() {
     var $__0=     this.props,bounds=$__0.bounds,map=$__0.map,url=$__0.url,props=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{bounds:1,map:1,url:1});
     this._leafletElement =  Leaflet.imageOverlay(url, bounds, props);
   },
 
+  componentDidUpdate:function(prevProps) {
+    if (this.props.url !== prevProps.url) {
+      this.getLeafletElement().setUrl(this.props.url);
+    }
+    if (this.props.opacity !== prevProps.opacity) {
+      this.getLeafletElement().setOpacity(this.props.opacity);
+    }
+  },
+
   render:function() {
     return null;
   }

package.json

@@ -12,6 +12,7 @@
     "url": "https://github.com/PaulLeCam/react-leaflet.git"
   },
   "keywords": [
+    "react-component",
     "react",
     "leaflet",
     "map"
@@ -23,21 +24,21 @@
   },
   "homepage": "https://github.com/PaulLeCam/react-leaflet",
   "dependencies": {
-    "leaflet": "^0.7.3",
     "lodash-node": "^2.4.1"
   },
   "peerDependencies": {
+    "leaflet": "^0.7.0",
     "react": "^0.12.0"
   },
   "devDependencies": {
-    "browserify": "^8.1.0",
+    "browserify": "^8.1.1",
     "del": "^1.1.1",
     "gulp": "^3.8.10",
-    "gulp-load-plugins": "^0.7.1",
+    "gulp-load-plugins": "^0.8.0",
     "gulp-react": "^2.0.0",
     "gulp-util": "^3.0.1",
     "gulp-webserver": "^0.9.0",
-    "jest-cli": "^0.1.18",
+    "jest-cli": "^0.2.1",
     "react": "^0.12.2",
     "react-tools": "^0.12.2",
     "reactify": "^0.17.1",

src/ImageOverlay.js

@@ -11,14 +11,25 @@ module.exports = React.createClass({
 
   propTypes: {
     url: React.PropTypes.string.isRequired,
-    bounds: boundsType.isRequired
+    bounds: boundsType.isRequired,
+    opacity: React.PropTypes.number,
+    attribution: React.PropTypes.string
   },
 
   componentWillMount() {
     var {bounds, map, url, ...props} = this.props;
     this._leafletElement =  Leaflet.imageOverlay(url, bounds, props);
   },
 
+  componentDidUpdate(prevProps) {
+    if (this.props.url !== prevProps.url) {
+      this.getLeafletElement().setUrl(this.props.url);
+    }
+    if (this.props.opacity !== prevProps.opacity) {
+      this.getLeafletElement().setOpacity(this.props.opacity);
+    }
+  },
+
   render() {
     return null;
   }