v0.8.0-rc.3

.npmignore

@@ -1,6 +1,8 @@
+coverage
 example
-src
 __tests__
 .editorconfig
+.eslintrc
 .travis.yml
-gulpfile.js
+bower.json
+gulpfile.babel.js

CHANGELOG.md

@@ -1,3 +1,8 @@
+## v0.8.0-rc.3 (29/09/15)
+
+- Added `LayerGroup` component ([#58](https://github.com/PaulLeCam/react-leaflet/pull/58)).
+- `Map` now supports dynamic `bounds` and `maxBounds` properties ([#72](https://github.com/PaulLeCam/react-leaflet/pull/72)).
+
 ## v0.8.0-rc.2 (22/09/15)
 
 Check if `Popup` content node exists before trying to unmount.

README.md

@@ -127,11 +127,11 @@ Base class extending `PopupContainer` with the following methods:
 This is the top-level component that must be mounted for children ones to be rendered. Refer to Leaflet documentation for more information about the properties.
 
 **Properties**
-- `bounds` (optional, dynamic): A rectangle for the map to contain. It will be centered, and the map will zoom in as close as it can while still showing the full bounds. This property is dynamic, if you change it it will be reflected on the map.
+- `bounds: Bounds` (optional, dynamic): A rectangle for the map to contain. It will be centered, and the map will zoom in as close as it can while still showing the full bounds. This property is dynamic, if you change it it will be reflected on the map.
 - `center: LatLng` (optional, dynamic): Center of the map. This property is dynamic, if you change it it will be reflected in the map.
 - `className: String` (optional, dynamic): className property of the `<div>` container for the map.
 - `id: String` (optional): The ID of the `<div>` container for the map. If you don't provide it, a unique one will be created.
-- `maxBounds: Bounds` (optional)
+- `maxBounds: Bounds` (optional, dynamic)
 - `maxZoom: Number` (optional)
 - `minZoom: Number` (optional)
 - `style: Object` (optional, dynamic): style property of the `<div>` container for the map.
@@ -207,6 +207,10 @@ All vector layers extend the **Path** component and therefore accept dynamic [Pa
 
 #### Other Layers
 
+##### LayerGroup
+
+Use the `LayerGroup` wrapper component to group children layers together.
+
 ##### Implemented but needing testing and documentation
 
 - FeatureGroup

example/app.js

@@ -3,8 +3,9 @@ import { render } from 'react-dom';
 
 import SimpleExample from './simple';
 import EventsExample from './events';
-import VectorLayersExample from './vector-layers';
 import BoundsExample from './bounds';
+import VectorLayersExample from './vector-layers';
+import OtherLayersExample from './other-layers';
 
 const examples = (
   <div>
@@ -14,11 +15,13 @@ const examples = (
     <h2>Events</h2>
     <p>Click the map to show a marker at your detected location</p>
     <EventsExample />
-    <h2>Vector layers</h2>
-    <VectorLayersExample />
     <h2>Map view by bounds</h2>
     <p>Click a rectangle to fit the map to its bounds</p>
     <BoundsExample />
+    <h2>Vector layers</h2>
+    <VectorLayersExample />
+    <h2>Other layers</h2>
+    <OtherLayersExample />
   </div>
 );
 

example/build/app.js

@@ -17,13 +17,17 @@ var _events = require('./events');
 
 var _events2 = _interopRequireDefault(_events);
 
+var _bounds = require('./bounds');
+
+var _bounds2 = _interopRequireDefault(_bounds);
+
 var _vectorLayers = require('./vector-layers');
 
 var _vectorLayers2 = _interopRequireDefault(_vectorLayers);
 
-var _bounds = require('./bounds');
+var _otherLayers = require('./other-layers');
 
-var _bounds2 = _interopRequireDefault(_bounds);
+var _otherLayers2 = _interopRequireDefault(_otherLayers);
 
 var examples = _react2['default'].createElement(
   'div',
@@ -53,25 +57,31 @@ var examples = _react2['default'].createElement(
   _react2['default'].createElement(
     'h2',
     null,
-    'Vector layers'
+    'Map view by bounds'
   ),
-  _react2['default'].createElement(_vectorLayers2['default'], null),
+  _react2['default'].createElement(
+    'p',
+    null,
+    'Click a rectangle to fit the map to its bounds'
+  ),
+  _react2['default'].createElement(_bounds2['default'], null),
   _react2['default'].createElement(
     'h2',
     null,
-    'Map view by bounds'
+    'Vector layers'
   ),
+  _react2['default'].createElement(_vectorLayers2['default'], null),
   _react2['default'].createElement(
-    'p',
+    'h2',
     null,
-    'Click a rectangle to fit the map to its bounds'
+    'Other layers'
   ),
-  _react2['default'].createElement(_bounds2['default'], null)
+  _react2['default'].createElement(_otherLayers2['default'], null)
 );
 
 (0, _reactDom.render)(examples, document.getElementById('app'));
 
-},{"./bounds":2,"./events":3,"./simple":4,"./vector-layers":5,"react":"react","react-dom":"react-dom"}],2:[function(require,module,exports){
+},{"./bounds":2,"./events":3,"./other-layers":4,"./simple":5,"./vector-layers":6,"react":"react","react-dom":"react-dom"}],2:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, '__esModule', {
@@ -270,6 +280,78 @@ var _react2 = _interopRequireDefault(_react);
 
 var _reactLeaflet = require('react-leaflet');
 
+var OtherLayersExample = (function (_Component) {
+  _inherits(OtherLayersExample, _Component);
+
+  function OtherLayersExample() {
+    _classCallCheck(this, OtherLayersExample);
+
+    _get(Object.getPrototypeOf(OtherLayersExample.prototype), 'constructor', this).apply(this, arguments);
+  }
+
+  _createClass(OtherLayersExample, [{
+    key: 'render',
+    value: function render() {
+      var center = [51.505, -0.09];
+
+      var rectangle = [[51.49, -0.08], [51.5, -0.06]];
+
+      return _react2['default'].createElement(
+        _reactLeaflet.Map,
+        { center: center, zoom: 13 },
+        _react2['default'].createElement(_reactLeaflet.TileLayer, {
+          attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+          url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+        }),
+        _react2['default'].createElement(
+          _reactLeaflet.LayerGroup,
+          null,
+          _react2['default'].createElement(_reactLeaflet.Circle, { center: center, fillColor: 'blue', radius: 200 }),
+          _react2['default'].createElement(_reactLeaflet.Circle, { center: center, fillColor: 'red', radius: 100, stroke: false }),
+          _react2['default'].createElement(
+            _reactLeaflet.LayerGroup,
+            null,
+            _react2['default'].createElement(_reactLeaflet.Circle, { center: [51.51, -0.08], color: 'green', fillColor: 'green', radius: 100 })
+          )
+        ),
+        _react2['default'].createElement(
+          _reactLeaflet.LayerGroup,
+          null,
+          _react2['default'].createElement(_reactLeaflet.Rectangle, { bounds: rectangle, color: 'black' })
+        )
+      );
+    }
+  }]);
+
+  return OtherLayersExample;
+})(_react.Component);
+
+exports['default'] = OtherLayersExample;
+module.exports = exports['default'];
+
+},{"react":"react","react-leaflet":"react-leaflet"}],5:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+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 _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; 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 { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactLeaflet = require('react-leaflet');
+
 var SimpleExample = (function (_Component) {
   _inherits(SimpleExample, _Component);
 
@@ -320,7 +402,7 @@ var SimpleExample = (function (_Component) {
 exports['default'] = SimpleExample;
 module.exports = exports['default'];
 
-},{"react":"react","react-leaflet":"react-leaflet"}],5:[function(require,module,exports){
+},{"react":"react","react-leaflet":"react-leaflet"}],6:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, '__esModule', {