react-leaflet - npm Package Compare versions

Comparing version 0.10.2 to 0.11.0

.eslintrc.json

 {
   "env": {
+    "browser": true,
     "es6": true
@@ -59,3 +60,3 @@ },
     "no-shadow": 2,
-    "no-unused-vars": 2,
+    "no-unused-vars": [2, { "varsIgnorePattern": "^_" }],
     "no-use-before-define": 1,
@@ -62,0 +63,0 @@ "quotes": [2, "single", "avoid-escape"],

CHANGELOG.md

@@ -0,5 +1,17 @@
+## v0.11.0 (09/04/16)
+
+- [BREAKING] Added `layerContainer` property as a consistent replacement for `map` or `layerGroup` ([PR #132](https://github.com/PaulLeCam/react-leaflet/pull/132) by *boromisp*). This is only breaking if you are creating custom components, as you will need to make sure to also inject the `layerContainer` property to children layers as you need to do with `map`.
+- Changed `LayersControl` to be based on components:
+  - Added `LayersControl.BaseLayer` container component to add a base layer to a `LayersControl`.
+  - Added `LayersControl.Overlay` container component to add an overlay to a `LayersControl`.
+  - `baseLayers` and `overlays` properties for `LayersControl` are still supported but deprecated. Using either of them will make the `LayersControl` behave the same way it does in versions < 0.11.
+- Deprecated `onLeaflet...` properties for events, simply use `on...`, ex `onClick` instead of `onLeafletClick`.
+- Added warnings for deprecated features, the same way React does. Make sure to address these warnings to ease the transition to future releases.
+- Added React v15.0.0 support as peer dependency.
+- [internal] Fixed `no-unused-vars` linting ([PR #131](https://github.com/PaulLeCam/react-leaflet/pull/131) by *boromisp*).
+
 ## v0.10.2 (12/03/16)
 
 - Added `animate` optional property to `Map` ([PR #126](https://github.com/PaulLeCam/react-leaflet/pull/126) by *mariusandra*).
-- Added React v15.0.0-rc.1 support as peer dependencies.
+- Added React v15.0.0-rc.1 support as peer dependency.
 
@@ -6,0 +18,0 @@ ## v0.10.1 (22/02/16)

lib/CanvasTileLayer.js

@@ -41,5 +41,6 @@ 'use strict';
       var _props = this.props;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
 
-      var props = _objectWithoutProperties(_props, ['map']);
+      var props = _objectWithoutProperties(_props, ['map', 'layerContainer']);
 
@@ -46,0 +47,0 @@ this.leafletElement = _leaflet.tileLayer.canvas(props);

lib/Circle.js

@@ -48,6 +48,7 @@ 'use strict';
       var center = _props.center;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
       var radius = _props.radius;
 
-      var props = _objectWithoutProperties(_props, ['center', 'map', 'radius']);
+      var props = _objectWithoutProperties(_props, ['center', 'map', 'layerContainer', 'radius']);
 
@@ -54,0 +55,0 @@ this.leafletElement = (0, _leaflet.circle)(center, radius, props);

lib/CircleMarker.js

@@ -48,5 +48,6 @@ 'use strict';
       var center = _props.center;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
 
-      var props = _objectWithoutProperties(_props, ['center', 'map']);
+      var props = _objectWithoutProperties(_props, ['center', 'map', 'layerContainer']);
 
@@ -53,0 +54,0 @@ this.leafletElement = (0, _leaflet.circleMarker)(center, props);

lib/FeatureGroup.js

@@ -54,3 +54,3 @@ 'use strict';
       return this.renderChildrenWithProps({
-        layerGroup: this.leafletElement,
+        layerContainer: this.leafletElement,
         popupContainer: this.leafletElement
@@ -57,0 +57,0 @@ });

lib/GeoJson.js

@@ -44,5 +44,6 @@ 'use strict';
       var data = _props.data;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
 
-      var props = _objectWithoutProperties(_props, ['data', 'map']);
+      var props = _objectWithoutProperties(_props, ['data', 'map', 'layerContainer']);
 
@@ -49,0 +50,0 @@ this.leafletElement = (0, _leaflet.geoJson)(data, props);

lib/ImageOverlay.js

@@ -48,6 +48,7 @@ 'use strict';
       var bounds = _props.bounds;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
       var url = _props.url;
 
-      var props = _objectWithoutProperties(_props, ['bounds', 'map', 'url']);
+      var props = _objectWithoutProperties(_props, ['bounds', 'map', 'layerContainer', 'url']);
 
@@ -79,3 +80,2 @@ this.leafletElement = (0, _leaflet.imageOverlay)(url, bounds, props);
   bounds: _bounds2.default.isRequired,
-  map: _react.PropTypes.instanceOf(_leaflet.Map),
   opacity: _react.PropTypes.number,
@@ -82,0 +82,0 @@ url: _react.PropTypes.string.isRequired

lib/LayerGroup.js

@@ -44,3 +44,3 @@ 'use strict';
       return this.renderChildrenWithProps({
-        layerGroup: this.leafletElement
+        layerContainer: this.leafletElement
       });
@@ -47,0 +47,0 @@ }

lib/LayersControl.js

@@ -7,8 +7,26 @@ 'use strict';
 
+var _assign2 = require('lodash/assign');
+
+var _assign3 = _interopRequireDefault(_assign2);
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+var _leaflet = require('leaflet');
+
 var _react = require('react');
 
-var _leaflet = require('leaflet');
+var _react2 = _interopRequireDefault(_react);
 
+var _warning = require('warning');
+
+var _warning2 = _interopRequireDefault(_warning);
+
+var _children2 = require('./types/children');
+
+var _children3 = _interopRequireDefault(_children2);
+
+var _layerContainer = require('./types/layerContainer');
+
+var _layerContainer2 = _interopRequireDefault(_layerContainer);
+
 var _MapControl2 = require('./MapControl');
@@ -28,2 +46,113 @@
 
+var controlledLayerPropTypes = {
+  addBaseLayer: _react.PropTypes.func,
+  addOverlay: _react.PropTypes.func,
+  checked: _react.PropTypes.bool,
+  children: _react.PropTypes.node.isRequired,
+  map: _react.PropTypes.instanceOf(_leaflet.Map),
+  name: _react.PropTypes.string.isRequired,
+  removeLayer: _react.PropTypes.func
+};
+
+// Abtract class for layer container, extended by BaseLayer and Overlay
+
+var ControlledLayer = function (_Component) {
+  _inherits(ControlledLayer, _Component);
+
+  function ControlledLayer() {
+    _classCallCheck(this, ControlledLayer);
+
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(ControlledLayer).apply(this, arguments));
+  }
+
+  _createClass(ControlledLayer, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(_ref) {
+      var checked = _ref.checked;
+      var map = _ref.map;
+
+      // Handle dynamically (un)checking the layer => adding/removing from the map
+      if (checked && !this.props.checked) {
+        map.addLayer(this.layer);
+      } else if (this.props.checked && !checked) {
+        map.removeLayer(this.layer);
+      }
+    }
+  }, {
+    key: 'removeLayer',
+    value: function removeLayer(layer) {
+      this.props.removeLayer(layer);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return (0, _react.cloneElement)(_react.Children.only(this.props.children), {
+        // Proxy layer container method calls to local methods
+        layerContainer: {
+          addLayer: this.addLayer.bind(this),
+          removeLayer: this.removeLayer.bind(this)
+        }
+      });
+    }
+  }]);
+
+  return ControlledLayer;
+}(_react.Component);
+
+ControlledLayer.propTypes = controlledLayerPropTypes;
+
+var BaseLayer = function (_ControlledLayer) {
+  _inherits(BaseLayer, _ControlledLayer);
+
+  function BaseLayer() {
+    _classCallCheck(this, BaseLayer);
+
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(BaseLayer).apply(this, arguments));
+  }
+
+  _createClass(BaseLayer, [{
+    key: 'addLayer',
+    value: function addLayer(layer) {
+      this.layer = layer; // Keep layer reference to handle dynamic changes of props
+      var _props = this.props;
+      var addBaseLayer = _props.addBaseLayer;
+      var checked = _props.checked;
+      var name = _props.name;
+
+      addBaseLayer(layer, name, checked);
+    }
+  }]);
+
+  return BaseLayer;
+}(ControlledLayer);
+
+BaseLayer.propTypes = controlledLayerPropTypes;
+
+var Overlay = function (_ControlledLayer2) {
+  _inherits(Overlay, _ControlledLayer2);
+
+  function Overlay() {
+    _classCallCheck(this, Overlay);
+
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
+  }
+
+  _createClass(Overlay, [{
+    key: 'addLayer',
+    value: function addLayer(layer) {
+      this.layer = layer; // Keep layer reference to handle dynamic changes of props
+      var _props2 = this.props;
+      var addOverlay = _props2.addOverlay;
+      var checked = _props2.checked;
+      var name = _props2.name;
+
+      addOverlay(layer, name, checked);
+    }
+  }]);
+
+  return Overlay;
+}(ControlledLayer);
+
+Overlay.propTypes = controlledLayerPropTypes;
+
 var LayersControl = function (_MapControl) {
@@ -41,10 +170,82 @@ _inherits(LayersControl, _MapControl);
     value: function componentWillMount() {
-      var _props = this.props;
-      var baseLayers = _props.baseLayers;
-      var overlays = _props.overlays;
+      var _props3 = this.props;
+      var baseLayers = _props3.baseLayers;
+      var _children = _props3.children;
+      var _lc = _props3.layerContainer;
+      var _map = _props3.map;
+      var overlays = _props3.overlays;
 
-      var options = _objectWithoutProperties(_props, ['baseLayers', 'overlays']);
+      var options = _objectWithoutProperties(_props3, ['baseLayers', 'children', 'layerContainer', 'map', 'overlays']);
 
-      this.leafletElement = _leaflet.control.layers(baseLayers, overlays, options);
+      // Pre-v0.11 behavior, warn in v0.11, remove in v0.12
+
+
+      this.legacy = !!(baseLayers || overlays);
+
+      if (this.legacy) {
+        (0, _warning2.default)(false, 'The "baseLayers" and "overlays" properties for "LayersControl" are deprecated and will be removed in the next version. You should use the "LayersControl.BaseLayer" and "LayersControl.Overlay" instead, see the documentation for more information.');
+        this.leafletElement = _leaflet.control.layers(baseLayers, overlays, options);
+      } else {
+        this.leafletElement = _leaflet.control.layers(undefined, undefined, options);
+        this.controlProps = {
+          addBaseLayer: this.addBaseLayer.bind(this),
+          addOverlay: this.addOverlay.bind(this),
+          removeLayer: this.removeLayer.bind(this)
+        };
+      }
     }
+  }, {
+    key: 'addBaseLayer',
+    value: function addBaseLayer(layer, name) {
+      var checked = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
+
+      if (checked) {
+        this.props.map.addLayer(layer);
+      }
+      this.leafletElement.addBaseLayer(layer, name);
+    }
+  }, {
+    key: 'addOverlay',
+    value: function addOverlay(layer, name) {
+      var checked = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
+
+      if (checked) {
+        this.props.map.addLayer(layer);
+      }
+      this.leafletElement.addOverlay(layer, name);
+    }
+  }, {
+    key: 'removeLayer',
+    value: function removeLayer(layer) {
+      this.leafletElement.removeLayer(layer);
+      this.props.map.removeLayer(layer);
+    }
+  }, {
+    key: 'getClonedChildrenWithProps',
+    value: function getClonedChildrenWithProps(extra) {
+      var _props4 = this.props;
+      var children = _props4.children;
+      var layerContainer = _props4.layerContainer;
+      var map = _props4.map;
+
+      var props = (0, _assign3.default)({ layerContainer: layerContainer, map: map }, extra);
+
+      return _react.Children.map(children, function (child) {
+        return child ? (0, _react.cloneElement)(child, props) : null;
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      if (this.legacy) {
+        return null;
+      }
+
+      var children = this.getClonedChildrenWithProps(this.controlProps);
+      return _react2.default.createElement(
+        'div',
+        { style: { display: 'none' } },
+        children
+      );
+    }
   }]);
@@ -57,4 +258,11 @@
   baseLayers: _react.PropTypes.object,
+  children: _children3.default,
+  layerContainer: _layerContainer2.default,
+  map: _react.PropTypes.instanceOf(_leaflet.Map),
   overlays: _react.PropTypes.object
 };
-exports.default = LayersControl;
+exports.default = LayersControl;
+
+
+LayersControl.BaseLayer = BaseLayer;
+LayersControl.Overlay = Overlay;

lib/Map.js

@@ -7,17 +7,17 @@ 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _uniqueId2 = require('lodash/uniqueId');
 
-var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+var _uniqueId3 = _interopRequireDefault(_uniqueId2);
 
-var _isArray = require('lodash/isArray');
+var _isUndefined2 = require('lodash/isUndefined');
 
-var _isArray2 = _interopRequireDefault(_isArray);
+var _isUndefined3 = _interopRequireDefault(_isUndefined2);
 
-var _isUndefined = require('lodash/isUndefined');
+var _isArray2 = require('lodash/isArray');
 
-var _isUndefined2 = _interopRequireDefault(_isUndefined);
+var _isArray3 = _interopRequireDefault(_isArray2);
 
-var _uniqueId = require('lodash/uniqueId');
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _uniqueId2 = _interopRequireDefault(_uniqueId);
+var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
 
@@ -53,3 +53,3 @@ var _react = require('react');
 var normalizeCenter = function normalizeCenter(pos) {
-  return (0, _isArray2.default)(pos) ? pos : [pos.lat, pos.lng || pos.lon];
+  return (0, _isArray3.default)(pos) ? pos : [pos.lat, pos.lng || pos.lon];
 };
@@ -66,3 +66,3 @@
     _this.state = {
-      id: props.id || (0, _uniqueId2.default)('map')
+      id: props.id || (0, _uniqueId3.default)('map')
     };
@@ -78,3 +78,3 @@ return _this;
       this.setState({ map: this.leafletElement });
-      if (!(0, _isUndefined2.default)(this.props.bounds)) {
+      if (!(0, _isUndefined3.default)(this.props.bounds)) {
         this.leafletElement.fitBounds(this.props.bounds, this.props.boundsOptions);
@@ -132,3 +132,3 @@ }
       var children = map ? _react2.default.Children.map(this.props.children, function (child) {
-        return child ? _react2.default.cloneElement(child, { map: map }) : null;
+        return child ? _react2.default.cloneElement(child, { map: map, layerContainer: map }) : null;
       }) : null;
@@ -135,0 +135,0 @@

lib/MapComponent.js

@@ -7,22 +7,26 @@ 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _reduce2 = require('lodash/reduce');
 
-var _clone = require('lodash/clone');
+var _reduce3 = _interopRequireDefault(_reduce2);
 
-var _clone2 = _interopRequireDefault(_clone);
+var _keys2 = require('lodash/keys');
 
-var _forEach = require('lodash/forEach');
+var _keys3 = _interopRequireDefault(_keys2);
 
-var _forEach2 = _interopRequireDefault(_forEach);
+var _forEach2 = require('lodash/forEach');
 
-var _keys = require('lodash/keys');
+var _forEach3 = _interopRequireDefault(_forEach2);
 
-var _keys2 = _interopRequireDefault(_keys);
+var _clone2 = require('lodash/clone');
 
-var _reduce = require('lodash/reduce');
+var _clone3 = _interopRequireDefault(_clone2);
 
-var _reduce2 = _interopRequireDefault(_reduce);
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
 
+var _warning = require('warning');
+
+var _warning2 = _interopRequireDefault(_warning);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,3 +40,4 @@
 
-var EVENTS_RE = /on(?:Leaflet)?(.+)/i;
+var EVENTS_RE_LEGACY = /^onLeaflet(.+)$/i;
+var EVENTS_RE = /^on(.+)$/i;
 
@@ -70,3 +75,3 @@ var MapComponent = function (_Component) {
 
-      (0, _forEach2.default)(this._leafletEvents, function (cb, ev) {
+      (0, _forEach3.default)(this._leafletEvents, function (cb, ev) {
         el.off(ev, cb);
@@ -83,8 +88,12 @@ });
     value: function extractLeafletEvents(props) {
-      return (0, _reduce2.default)((0, _keys2.default)(props), function (res, ev) {
-        if (EVENTS_RE.test(ev)) {
-          var key = ev.replace(EVENTS_RE, function (match, p) {
+      return (0, _reduce3.default)((0, _keys3.default)(props), function (res, prop) {
+        var maybeEvent = prop.replace(EVENTS_RE_LEGACY, function (match, p) {
+          (0, _warning2.default)(false, '"onLeaflet' + p + '" and other "onLeaflet..." properties are deprecated and support will be removed in the next version, use "on' + p + '" instead.');
+          return 'on' + p;
+        });
+        if (EVENTS_RE.test(maybeEvent)) {
+          var key = maybeEvent.replace(EVENTS_RE, function (match, p) {
             return p.toLowerCase();
           });
-          res[key] = props[ev];
+          res[key] = props[prop];
         }
@@ -101,6 +110,6 @@ return res;
       var el = this.leafletElement;
-      if (!el) return;
+      if (!el || !el.on) return;
 
-      var diff = (0, _clone2.default)(prev);
-      (0, _forEach2.default)(prev, function (cb, ev) {
+      var diff = (0, _clone3.default)(prev);
+      (0, _forEach3.default)(prev, function (cb, ev) {
         if (!next[ev] || cb !== next[ev]) {
@@ -112,3 +121,3 @@ delete diff[ev];
 
-      (0, _forEach2.default)(next, function (cb, ev) {
+      (0, _forEach3.default)(next, function (cb, ev) {
         if (!prev[ev] || cb !== prev[ev]) {
@@ -115,0 +124,0 @@ diff[ev] = cb;

lib/MapLayer.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _assign2 = require('lodash/assign');
+
+var _assign3 = _interopRequireDefault(_assign2);
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -12,6 +16,2 @@
 
-var _assign = require('lodash/assign');
-
-var _assign2 = _interopRequireDefault(_assign);
-
 var _react = require('react');
@@ -23,2 +23,10 @@
 
+var _children = require('./types/children');
+
+var _children2 = _interopRequireDefault(_children);
+
+var _layerContainer = require('./types/layerContainer');
+
+var _layerContainer2 = _interopRequireDefault(_layerContainer);
+
 var _MapComponent2 = require('./MapComponent');
@@ -49,3 +57,3 @@
       _get(Object.getPrototypeOf(MapLayer.prototype), 'componentDidMount', this).call(this);
-      (this.props.layerGroup || this.props.map).addLayer(this.leafletElement);
+      this.props.layerContainer.addLayer(this.leafletElement);
     }
@@ -56,15 +64,16 @@ }, {
       _get(Object.getPrototypeOf(MapLayer.prototype), 'componentWillUnmount', this).call(this);
-      (this.props.layerGroup || this.props.map).removeLayer(this.leafletElement);
+      this.props.layerContainer.removeLayer(this.leafletElement);
     }
   }, {
-    key: 'getClonedChildrenWithMap',
-    value: function getClonedChildrenWithMap(extra) {
+    key: 'getClonedChildrenWithProps',
+    value: function getClonedChildrenWithProps(extra) {
       var _props = this.props;
       var children = _props.children;
       var map = _props.map;
+      var layerContainer = _props.layerContainer;
 
-      var props = (0, _assign2.default)({ map: map }, extra);
+      var props = (0, _assign3.default)({ map: map, layerContainer: layerContainer }, extra);
 
-      return _react2.default.Children.map(children, function (child) {
-        return child ? _react2.default.cloneElement(child, props) : null;
+      return _react.Children.map(children, function (child) {
+        return child ? (0, _react.cloneElement)(child, props) : null;
       });
@@ -75,3 +84,3 @@ }
     value: function renderChildrenWithProps(props) {
-      var children = this.getClonedChildrenWithMap(props);
+      var children = this.getClonedChildrenWithProps(props);
       return _react2.default.createElement(
@@ -89,5 +98,6 @@ 'div',
 MapLayer.propTypes = {
-  children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
+  children: _children2.default,
+  layerContainer: _layerContainer2.default,
   map: _react.PropTypes.instanceOf(_leaflet.Map)
 };
 exports.default = MapLayer;

lib/Marker.js

@@ -47,6 +47,7 @@ 'use strict';
       var _props = this.props;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
       var position = _props.position;
 
-      var props = _objectWithoutProperties(_props, ['map', 'position']);
+      var props = _objectWithoutProperties(_props, ['map', 'layerContainer', 'position']);
 
@@ -53,0 +54,0 @@ this.leafletElement = (0, _leaflet.marker)(position, props);

lib/MultiPolygon.js

@@ -47,6 +47,7 @@ 'use strict';
       var _props = this.props;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
       var polygons = _props.polygons;
 
-      var props = _objectWithoutProperties(_props, ['map', 'polygons']);
+      var props = _objectWithoutProperties(_props, ['map', 'layerContainer', 'polygons']);
 
@@ -53,0 +54,0 @@ this.leafletElement = (0, _leaflet.multiPolygon)(polygons, props);

lib/MultiPolyline.js

@@ -47,6 +47,7 @@ 'use strict';
       var _props = this.props;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
       var polylines = _props.polylines;
 
-      var props = _objectWithoutProperties(_props, ['map', 'polylines']);
+      var props = _objectWithoutProperties(_props, ['map', 'layerContainer', 'polylines']);
 
@@ -53,0 +54,0 @@ this.leafletElement = (0, _leaflet.multiPolyline)(polylines, props);

lib/Path.js

@@ -7,11 +7,11 @@ 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _pick2 = require('lodash/pick');
 
-var _isEqual = require('lodash/isEqual');
+var _pick3 = _interopRequireDefault(_pick2);
 
-var _isEqual2 = _interopRequireDefault(_isEqual);
+var _isEqual2 = require('lodash/isEqual');
 
-var _pick = require('lodash/pick');
+var _isEqual3 = _interopRequireDefault(_isEqual2);
 
-var _pick2 = _interopRequireDefault(_pick);
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -44,3 +44,3 @@ var _MapLayer2 = require('./MapLayer');
     value: function getPathOptions(props) {
-      return (0, _pick2.default)(props, OPTIONS);
+      return (0, _pick3.default)(props, OPTIONS);
     }
@@ -58,3 +58,3 @@ }, {
       var nextStyle = this.getPathOptions(toProps);
-      if (!(0, _isEqual2.default)(nextStyle, this.getPathOptions(fromProps))) {
+      if (!(0, _isEqual3.default)(nextStyle, this.getPathOptions(fromProps))) {
         this.setStyle(nextStyle);
@@ -61,0 +61,0 @@ }

lib/Polygon.js

@@ -47,6 +47,7 @@ 'use strict';
       var _props = this.props;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
       var positions = _props.positions;
 
-      var props = _objectWithoutProperties(_props, ['map', 'positions']);
+      var props = _objectWithoutProperties(_props, ['map', 'layerContainer', 'positions']);
 
@@ -53,0 +54,0 @@ this.leafletElement = (0, _leaflet.polygon)(positions, props);

lib/Polyline.js

@@ -45,6 +45,7 @@ 'use strict';
       var _props = this.props;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
       var positions = _props.positions;
 
-      var props = _objectWithoutProperties(_props, ['map', 'positions']);
+      var props = _objectWithoutProperties(_props, ['map', 'layerContainer', 'positions']);
 
@@ -51,0 +52,0 @@ this.leafletElement = (0, _leaflet.polyline)(positions, props);

lib/Popup.js

@@ -49,4 +49,4 @@ 'use strict';
       var _props = this.props;
-      var children = _props.children;
-      var map = _props.map;
+      var _children = _props.children;
+      var _map = _props.map;
       var popupContainer = _props.popupContainer;
@@ -53,0 +53,0 @@

lib/Rectangle.js

@@ -46,5 +46,6 @@ 'use strict';
       var bounds = _props.bounds;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
 
-      var props = _objectWithoutProperties(_props, ['bounds', 'map']);
+      var props = _objectWithoutProperties(_props, ['bounds', 'map', 'layerContainer']);
 
@@ -51,0 +52,0 @@ this.leafletElement = (0, _leaflet.rectangle)(bounds, props);

lib/TileLayer.js

@@ -43,6 +43,7 @@ 'use strict';
       var _props = this.props;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
       var url = _props.url;
 
-      var props = _objectWithoutProperties(_props, ['map', 'url']);
+      var props = _objectWithoutProperties(_props, ['map', 'layerContainer', 'url']);
 
@@ -49,0 +50,0 @@ this.leafletElement = (0, _leaflet.tileLayer)(url, props);

lib/types/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.latlngList = exports.latlng = exports.controlPosition = exports.bounds = undefined;
+exports.layerContainer = exports.latlngList = exports.latlng = exports.controlPosition = exports.children = exports.bounds = undefined;
 
@@ -13,2 +13,6 @@ var _bounds2 = require('./bounds');
 
+var _children2 = require('./children');
+
+var _children3 = _interopRequireDefault(_children2);
+
 var _controlPosition2 = require('./controlPosition');
@@ -26,7 +30,13 @@
 
+var _layerContainer2 = require('./layerContainer');
+
+var _layerContainer3 = _interopRequireDefault(_layerContainer2);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.bounds = _bounds3.default;
+exports.children = _children3.default;
 exports.controlPosition = _controlPosition3.default;
 exports.latlng = _latlng3.default;
-exports.latlngList = _latlngList3.default;
+exports.latlngList = _latlngList3.default;
+exports.layerContainer = _layerContainer3.default;

lib/WMSTileLayer.js

@@ -43,6 +43,7 @@ 'use strict';
       var _props = this.props;
-      var map = _props.map;
+      var _map = _props.map;
+      var _lc = _props.layerContainer;
       var url = _props.url;
 
-      var props = _objectWithoutProperties(_props, ['map', 'url']);
+      var props = _objectWithoutProperties(_props, ['map', 'layerContainer', 'url']);
 
@@ -49,0 +50,0 @@ this.leafletElement = _leaflet.tileLayer.wms(url, props);

package.json

 {
   "name": "react-leaflet",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "React components for Leaflet maps",
@@ -39,15 +39,17 @@ "main": "lib/index.js",
   "dependencies": {
-    "lodash": "^4.0.0"
+    "lodash": "^4.0.0",
+    "warning": "^2.0.0"
   },
   "peerDependencies": {
     "leaflet": "^0.7.0",
-    "react": "^0.14.0 || ^15.0.0-rc.1",
-    "react-dom": "^0.14.0 || ^15.0.0-rc.1"
+    "react": "^0.14.0 || ^15.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.6.5",
-    "babel-core": "^6.7.2",
-    "babel-eslint": "^5.0.0",
-    "babel-jest": "^9.0.3",
+    "babel-cli": "^6.7.5",
+    "babel-core": "^6.7.6",
+    "babel-eslint": "^6.0.2",
+    "babel-jest": "^10.0.1",
     "babel-loader": "^6.2.4",
+    "babel-plugin-lodash": "^2.2.2",
     "babel-plugin-react-transform": "^2.0.2",
@@ -57,9 +59,9 @@ "babel-preset-es2015": "^6.6.0",
     "babel-preset-stage-0": "^6.5.0",
-    "eslint": "~2.2.0",
-    "eslint-plugin-react": "^4.2.1",
-    "jest-cli": "^0.9.2",
+    "eslint": "^2.7.0",
+    "eslint-plugin-react": "^4.3.0",
+    "jest-cli": "^0.10.0",
     "leaflet": "^0.7.7",
-    "onchange": "^2.1.2",
-    "react": "^0.14.7",
-    "react-dom": "^0.14.7",
+    "onchange": "^2.2.0",
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
     "react-transform-hmr": "^1.0.4",
@@ -66,0 +68,0 @@ "webpack": "^1.12.14",

README.md

@@ -47,3 +47,3 @@ # React-Leaflet
 **React-Leaflet**
-```js
+```jsx
 import React from 'react';
@@ -88,2 +88,4 @@ import { render } from 'react-dom';
 
+**children**: One `PropTypes.node` or an Array of `PropTypes.node`.
+
 **latLng**: One of `[number, number]`, `{lat: number, lng: number}` or `{lat: number, lon: number}`.
@@ -97,5 +99,7 @@
 
+**layerContainer**: An object containing `addLayer()` and `removeLayer()` functions.
+
 ### 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` or simply `on`. Ex: `<Map onLeafletMoveend={this.handleMoveend}>...</Map>`.  
+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 `on`. Ex: `<Map onMoveend={this.handleMoveend}>...</Map>`.  
 Check Leaflet documentation for the events associated to each component.
@@ -287,3 +291,3 @@
 
-[Leaflet reference](http://leafletjs.com/reference.html#control-layers)
+[Leaflet reference](http://leafletjs.com/reference.html#control-layers)  
 
@@ -293,6 +297,54 @@ **Dynamic properties**
 
-**Other properties**
-- `baseLayers: object` (optional)
-- `overlays: object` (optional)
+This component exposes two children container components, `LayersControl.BaseLayer` and `LayersControl.Overlay` documented below.  
+See the `layers-control` example for a more advanced usage.
 
+Example usage:
+```jsx
+<LayersControl position='topright'>
+  <LayersControl.BaseLayer name='OpenStreetMap.BlackAndWhite'>
+    <TileLayer
+      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+      url='http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
+    />
+  </LayersControl.BaseLayer>
+  <LayersControl.BaseLayer name='OpenStreetMap.Mapnik'>
+    <TileLayer
+      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+    />
+  </LayersControl.BaseLayer>
+  <LayersControl.Overlay name='Marker with popup'>
+    <Marker position={[51.51, -0.06]}>
+      <Popup>
+        <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
+      </Popup>
+    </Marker>
+  </LayersControl.Overlay>
+  <LayersControl.Overlay name='Feature group'>
+    <FeatureGroup color='purple'>
+      <Popup>
+        <span>Popup in FeatureGroup</span>
+      </Popup>
+      <Circle center={[51.51, -0.06]} radius={200} />
+    </FeatureGroup>
+  </LayersControl.Overlay>
+</LayersControl>
+```
+
+##### LayersControl.BaseLayer
+
+**Properties**
+- `name: string` (required). The name of the layer as appearing in the `LayersControl`.
+
+**Dynamic properties**
+- `checked: boolean` (optional, defaults to `false`). Whether the radio button associated to the layer should be checked or not. The layer will be displayed in the map accordingly.
+
+##### LayersControl.Overlay
+
+**Properties**
+- `name: string` (required). The name of the layer as appearing in the `LayersControl`.
+
+**Dynamic properties**
+- `checked: boolean` (optional, defaults to `false`). Whether the checkbox associated to the layer should be checked or not. The layer will be displayed in the map accordingly.
+
 ##### ScaleControl
@@ -315,3 +367,4 @@
 If you want to create custom components, for example Leaflet plugins, you could extend one of the [base components](https://github.com/PaulLeCam/react-leaflet#base-components) depending on the type of component you want to implement.  
-The created Leaflet map instance is injected by the `Map` component to all its children as the `map` property. Make sure to inject it in your component's children as well.
+The created Leaflet map instance is injected by the `Map` component to all its children as the `map` property. Other layers may inject themselves to their children as the `layerContainer` property.  
+Make sure to inject **both** `layerContainer` and `map` in your component's children as well.
 
@@ -318,0 +371,0 @@ ## Changelog

src/CanvasTileLayer.js

@@ -8,5 +8,5 @@ import { tileLayer } from 'leaflet';
     super.componentWillMount();
-    const { map, ...props } = this.props;
+    const { map: _map, layerContainer: _lc, ...props } = this.props;
     this.leafletElement = tileLayer.canvas(props);
   }
 }

src/Circle.js

@@ -15,3 +15,3 @@ import { PropTypes } from 'react';
     super.componentWillMount();
-    const { center, map, radius, ...props } = this.props;
+    const { center, map: _map, layerContainer: _lc, radius, ...props } = this.props;
     this.leafletElement = circle(center, radius, props);
@@ -18,0 +18,0 @@ }

src/CircleMarker.js

@@ -15,3 +15,3 @@ import { PropTypes } from 'react';
     super.componentWillMount();
-    const { center, map, ...props } = this.props;
+    const { center, map: _map, layerContainer: _lc, ...props } = this.props;
     this.leafletElement = circleMarker(center, props);
@@ -18,0 +18,0 @@ }

src/FeatureGroup.js

@@ -21,3 +21,3 @@ import { featureGroup } from 'leaflet';
     return this.renderChildrenWithProps({
-      layerGroup: this.leafletElement,
+      layerContainer: this.leafletElement,
       popupContainer: this.leafletElement,
@@ -24,0 +24,0 @@ });

src/GeoJson.js

@@ -13,3 +13,3 @@ import { PropTypes } from 'react';
     super.componentWillMount();
-    const { data, map, ...props } = this.props;
+    const { data, map: _map, layerContainer: _lc, ...props } = this.props;
     this.leafletElement = geoJson(data, props);
@@ -16,0 +16,0 @@ }

src/ImageOverlay.js

 import { PropTypes } from 'react';
-import { imageOverlay, Map } from 'leaflet';
+import { imageOverlay } from 'leaflet';
 
@@ -11,3 +11,2 @@ import boundsType from './types/bounds';
     bounds: boundsType.isRequired,
-    map: PropTypes.instanceOf(Map),
     opacity: PropTypes.number,
@@ -19,3 +18,3 @@ url: PropTypes.string.isRequired,
     super.componentWillMount();
-    const { bounds, map, url, ...props } = this.props;
+    const { bounds, map: _map, layerContainer: _lc, url, ...props } = this.props;
     this.leafletElement = imageOverlay(url, bounds, props);
@@ -22,0 +21,0 @@ }

src/LayerGroup.js

@@ -13,5 +13,5 @@ import { layerGroup } from 'leaflet';
     return this.renderChildrenWithProps({
-      layerGroup: this.leafletElement,
+      layerContainer: this.leafletElement,
     });
   }
 }

src/LayersControl.js

@@ -1,9 +0,76 @@
-import { PropTypes } from 'react';
-import { control } from 'leaflet';
+import { control, Map } from 'leaflet';
+import { assign } from 'lodash';
+import React, { cloneElement, Children, Component, PropTypes } from 'react';
+import warning from 'warning';
 
+import childrenType from './types/children';
+import layerContainerType from './types/layerContainer';
+
 import MapControl from './MapControl';
 
+const controlledLayerPropTypes = {
+  addBaseLayer: PropTypes.func,
+  addOverlay: PropTypes.func,
+  checked: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  map: PropTypes.instanceOf(Map),
+  name: PropTypes.string.isRequired,
+  removeLayer: PropTypes.func,
+};
+
+// Abtract class for layer container, extended by BaseLayer and Overlay
+class ControlledLayer extends Component {
+  static propTypes = controlledLayerPropTypes;
+
+  componentWillReceiveProps({ checked, map }) {
+    // Handle dynamically (un)checking the layer => adding/removing from the map
+    if (checked && !this.props.checked) {
+      map.addLayer(this.layer);
+    }
+    else if (this.props.checked && !checked) {
+      map.removeLayer(this.layer);
+    }
+  }
+
+  removeLayer(layer) {
+    this.props.removeLayer(layer);
+  }
+
+  render() {
+    return cloneElement(Children.only(this.props.children), {
+      // Proxy layer container method calls to local methods
+      layerContainer: {
+        addLayer: ::this.addLayer,
+        removeLayer: ::this.removeLayer,
+      },
+    });
+  }
+}
+
+class BaseLayer extends ControlledLayer {
+  static propTypes = controlledLayerPropTypes;
+
+  addLayer(layer) {
+    this.layer = layer; // Keep layer reference to handle dynamic changes of props
+    const { addBaseLayer, checked, name } = this.props;
+    addBaseLayer(layer, name, checked);
+  }
+}
+
+class Overlay extends ControlledLayer {
+  static propTypes = controlledLayerPropTypes;
+
+  addLayer(layer) {
+    this.layer = layer; // Keep layer reference to handle dynamic changes of props
+    const { addOverlay, checked, name } = this.props;
+    addOverlay(layer, name, checked);
+  }
+}
+
 export default class LayersControl extends MapControl {
   static propTypes = {
     baseLayers: PropTypes.object,
+    children: childrenType,
+    layerContainer: layerContainerType,
+    map: PropTypes.instanceOf(Map),
     overlays: PropTypes.object,
@@ -13,5 +80,67 @@ };
   componentWillMount() {
-    const { baseLayers, overlays, ...options } = this.props;
-    this.leafletElement = control.layers(baseLayers, overlays, options);
+    const {
+      baseLayers,
+      children: _children,
+      layerContainer: _lc,
+      map: _map,
+      overlays,
+      ...options,
+    } = this.props;
+
+    // Pre-v0.11 behavior, warn in v0.11, remove in v0.12
+    this.legacy = !!(baseLayers || overlays);
+
+    if (this.legacy) {
+      warning(false, 'The "baseLayers" and "overlays" properties for "LayersControl" are deprecated and will be removed in the next version. You should use the "LayersControl.BaseLayer" and "LayersControl.Overlay" instead, see the documentation for more information.')
+      this.leafletElement = control.layers(baseLayers, overlays, options);
+    }
+    else {
+      this.leafletElement = control.layers(undefined, undefined, options);
+      this.controlProps = {
+        addBaseLayer: ::this.addBaseLayer,
+        addOverlay: ::this.addOverlay,
+        removeLayer: ::this.removeLayer,
+      };
+    }
   }
+
+  addBaseLayer(layer, name, checked = false) {
+    if (checked) {
+      this.props.map.addLayer(layer);
+    }
+    this.leafletElement.addBaseLayer(layer, name);
+  }
+
+  addOverlay(layer, name, checked = false) {
+    if (checked) {
+      this.props.map.addLayer(layer);
+    }
+    this.leafletElement.addOverlay(layer, name);
+  }
+
+  removeLayer(layer) {
+    this.leafletElement.removeLayer(layer);
+    this.props.map.removeLayer(layer);
+  }
+
+  getClonedChildrenWithProps(extra) {
+    const { children, layerContainer, map } = this.props;
+    const props = assign({layerContainer, map}, extra);
+
+    return Children.map(children, child => {
+      return child ? cloneElement(child, props) : null;
+    });
+  }
+
+  render() {
+    if (this.legacy) {
+      return null;
+    }
+
+    const children = this.getClonedChildrenWithProps(this.controlProps);
+    return <div style={{display: 'none'}}>{children}</div>;
+  }
 }
+
+LayersControl.BaseLayer = BaseLayer;
+LayersControl.Overlay = Overlay;

src/Map.js

 /* eslint-disable react/no-did-mount-set-state */
 
-import isArray from 'lodash/isArray';
-import isUndefined from 'lodash/isUndefined';
-import uniqueId from 'lodash/uniqueId';
+import { isArray, isUndefined, uniqueId } from 'lodash';
 import React, { PropTypes } from 'react';
@@ -93,3 +91,3 @@ import Leaflet from 'leaflet';
     const children = map ? React.Children.map(this.props.children, child => {
-      return child ? React.cloneElement(child, {map}) : null;
+      return child ? React.cloneElement(child, {map, layerContainer: map}) : null;
     }) : null;
@@ -96,0 +94,0 @@

src/MapComponent.js

@@ -1,8 +0,7 @@
-import clone from 'lodash/clone';
-import forEach from 'lodash/forEach';
-import keys from 'lodash/keys';
-import reduce from 'lodash/reduce';
+import { clone, forEach, keys, reduce } from 'lodash';
 import { Component } from 'react';
+import warning from 'warning';
 
-const EVENTS_RE = /on(?:Leaflet)?(.+)/i;
+const EVENTS_RE_LEGACY = /^onLeaflet(.+)$/i;
+const EVENTS_RE = /^on(.+)$/i;
 
@@ -37,6 +36,10 @@ export default class MapComponent extends Component {
   extractLeafletEvents(props) {
-    return reduce(keys(props), (res, ev) => {
-      if (EVENTS_RE.test(ev)) {
-        const key = ev.replace(EVENTS_RE, (match, p) => p.toLowerCase());
-        res[ key ] = props[ ev ];
+    return reduce(keys(props), (res, prop) => {
+      const maybeEvent = prop.replace(EVENTS_RE_LEGACY, (match, p) => {
+        warning(false, `"onLeaflet${ p }" and other "onLeaflet..." properties are deprecated and support will be removed in the next version, use "on${ p }" instead.`);
+        return `on${ p }`;
+      });
+      if (EVENTS_RE.test(maybeEvent)) {
+        const key = maybeEvent.replace(EVENTS_RE, (match, p) => p.toLowerCase());
+        res[ key ] = props[ prop ];
       }
@@ -49,3 +52,3 @@ return res;
     const el = this.leafletElement;
-    if (!el) return;
+    if (!el || !el.on) return;
 
@@ -52,0 +55,0 @@ const diff = clone(prev);

src/MapLayer.js

@@ -1,5 +0,8 @@
-import assign from 'lodash/assign';
-import React, { PropTypes } from 'react';
+import { assign } from 'lodash';
+import React, { cloneElement, Children, PropTypes } from 'react';
 import { Map } from 'leaflet';
 
+import childrenType from './types/children';
+import layerContainerType from './types/layerContainer';
+
 import MapComponent from './MapComponent';
@@ -9,6 +12,4 @@
   static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node,
-    ]),
+    children: childrenType,
+    layerContainer: layerContainerType,
     map: PropTypes.instanceOf(Map),
@@ -19,3 +20,3 @@ };
     super.componentDidMount();
-    (this.props.layerGroup || this.props.map).addLayer(this.leafletElement);
+    this.props.layerContainer.addLayer(this.leafletElement);
   }
@@ -25,11 +26,11 @@
     super.componentWillUnmount();
-    (this.props.layerGroup || this.props.map).removeLayer(this.leafletElement);
+    this.props.layerContainer.removeLayer(this.leafletElement);
   }
 
-  getClonedChildrenWithMap(extra) {
-    const { children, map } = this.props;
-    const props = assign({map}, extra);
+  getClonedChildrenWithProps(extra) {
+    const { children, map, layerContainer } = this.props;
+    const props = assign({map, layerContainer}, extra);
 
-    return React.Children.map(children, child => {
-      return child ? React.cloneElement(child, props) : null;
+    return Children.map(children, child => {
+      return child ? cloneElement(child, props) : null;
     });
@@ -39,5 +40,5 @@ }
   renderChildrenWithProps(props) {
-    const children = this.getClonedChildrenWithMap(props);
+    const children = this.getClonedChildrenWithProps(props);
     return <div style={{display: 'none'}}>{children}</div>;
   }
 }

src/Marker.js

@@ -17,3 +17,3 @@ import { PropTypes } from 'react';
     super.componentWillMount();
-    const { map, position, ...props } = this.props;
+    const { map: _map, layerContainer: _lc, position, ...props } = this.props;
     this.leafletElement = marker(position, props);
@@ -20,0 +20,0 @@ }

src/MultiPolygon.js

@@ -14,3 +14,3 @@ import { PropTypes } from 'react';
     super.componentWillMount();
-    const { map, polygons, ...props } = this.props;
+    const { map: _map, layerContainer: _lc, polygons, ...props } = this.props;
     this.leafletElement = multiPolygon(polygons, props);
@@ -17,0 +17,0 @@ }

src/MultiPolyline.js

@@ -14,3 +14,3 @@ import { PropTypes } from 'react';
     super.componentWillMount();
-    const {map, polylines, ...props} = this.props;
+    const {map: _map, layerContainer: _lc, polylines, ...props} = this.props;
     this.leafletElement = multiPolyline(polylines, props);
@@ -17,0 +17,0 @@ }

src/Path.js

@@ -1,3 +0,2 @@
-import isEqual from 'lodash/isEqual';
-import pick from 'lodash/pick';
+import { isEqual, pick } from 'lodash';
 
@@ -4,0 +3,0 @@ import MapLayer from './MapLayer';

src/Polygon.js

@@ -17,3 +17,3 @@ import { PropTypes } from 'react';
     super.componentWillMount();
-    const { map, positions, ...props } = this.props;
+    const { map: _map, layerContainer: _lc, positions, ...props } = this.props;
     this.leafletElement = polygon(positions, props);
@@ -20,0 +20,0 @@ }

src/Polyline.js

@@ -13,3 +13,3 @@ import { polyline } from 'leaflet';
     super.componentWillMount();
-    const { map, positions, ...props } = this.props;
+    const { map: _map, layerContainer: _lc, positions, ...props } = this.props;
     this.leafletElement = polyline(positions, props);
@@ -16,0 +16,0 @@ }

src/Popup.js

@@ -18,3 +18,3 @@ import { Children, PropTypes } from 'react';
     super.componentWillMount();
-    const { children, map, popupContainer, ...props } = this.props;
+    const { children: _children, map: _map, popupContainer, ...props } = this.props;
 
@@ -21,0 +21,0 @@ this.leafletElement = popup(props, popupContainer);

src/Rectangle.js

@@ -13,3 +13,3 @@ import { rectangle } from 'leaflet';
     super.componentWillMount();
-    const { bounds, map, ...props } = this.props;
+    const { bounds, map: _map, layerContainer: _lc, ...props } = this.props;
     this.leafletElement = rectangle(bounds, props);
@@ -16,0 +16,0 @@ }

src/TileLayer.js

@@ -13,3 +13,3 @@ import { PropTypes } from 'react';
     super.componentWillMount();
-    const { map, url, ...props } = this.props;
+    const { map: _map, layerContainer: _lc, url, ...props } = this.props;
     this.leafletElement = tileLayer(url, props);
@@ -16,0 +16,0 @@ }

src/types/index.js

 export bounds from './bounds';
+export children from './children';
 export controlPosition from './controlPosition';
 export latlng from './latlng';
 export latlngList from './latlngList';
+export layerContainer from './layerContainer';

src/WMSTileLayer.js

@@ -13,5 +13,5 @@ import { PropTypes } from 'react';
     super.componentWillMount();
-    const { map, url, ...props } = this.props;
+    const { map: _map, layerContainer: _lc, url, ...props } = this.props;
     this.leafletElement = tileLayer.wms(url, props);
   }
 }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

502108

increased by9.86%

Number of package files

77

increased by5.48%

Lines of code

9322

increased by11.44%

Number of lines in readme file

373

increased by16.56%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

20

increased by5.26%

Number of low supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedwarning@^2.0.0

• + Addedwarning@2.1.0(transitive)