Add Pane

PaulLeCam · Oct 17, 2016 · 440d026 · 440d026
1 parent 10e7b12
commit 440d026
Show file tree

Hide file tree

Showing 28 changed files with 1,100 additions and 559 deletions.
diff --git a/dist/react-leaflet.js b/dist/react-leaflet.js
diff --git a/dist/react-leaflet.min.js b/dist/react-leaflet.min.js
diff --git a/example/components/index.js b/example/components/index.js
@@ -1,3 +1,4 @@
+import Leaflet from 'leaflet'
 import React from 'react'
 import { render } from 'react-dom'
 
@@ -12,6 +13,9 @@ import BoundsExample from './bounds'
 import CustomComponentExample from './custom-component'
 import AnimateExample from './animate'
 import TooltipExample from './tooltip'
+import PaneExample from './pane'
+
+Leaflet.Icon.Default.imagePath = '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/images/'
 
 const examples = (
   <div>
@@ -31,6 +35,8 @@ const examples = (
     <ZoomControlExample />
     <h2>Layers control</h2>
     <LayersControlExample />
+    <h2>Panes</h2>
+    <PaneExample />
     <h2>Draggable Marker</h2>
     <DraggableExample />
     <h2>Map view by bounds</h2>

diff --git a/example/components/pane.js b/example/components/pane.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Pane, TileLayer, Rectangle } from '../../src'
+import { Map, Pane, TileLayer, Rectangle } from '../../src'
 
 const outer = [
   [50.505, -29.09],
@@ -12,47 +12,33 @@ const inner = [
 
 export default class PaneExample extends Component {
   state = {
-    bounds: outer,
+    render: true,
   }
 
-  onClickInner = () => {
-    this.setState({bounds: inner})
-  }
-
-  onClickOuter = () => {
-    this.setState({bounds: outer})
+  componentDidMount () {
+    setInterval(() => {
+      this.setState({
+        render: !this.state.render,
+      })
+    }, 5000)
   }
 
   render () {
     return (
-      <Map bounds={this.state.bounds}>
+      <Map bounds={outer}>
         <TileLayer
           attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
         />
-        <Pane name='cyan-rectangle' style={{
-          zIndex: 500,
-        }}>
-          <Rectangle
-            bounds={outer}
-            color={'Cyan'}
-          />
-        </Pane>
-
-        <Pane name='yellow-rectangle' style={{
-          zIndex: 499,
-        }}>
-          <Rectangle
-            bounds={inner}
-            color={'Yellow'}
-          />
-
-          {/* Nested Pane */}
-          <Pane name='purple-rectangle' className={'purplePane-purplePane'}>
-            <Rectangle
-              bounds={outer}
-              color={'Purple'}
-            />
+        {this.state.render ? (
+          <Pane name='cyan-rectangle' style={{zIndex: 500}}>
+            <Rectangle bounds={outer} color='cyan' />
+          </Pane>
+        ) : null}
+        <Pane name='yellow-rectangle' style={{zIndex: 499}}>
+          <Rectangle bounds={inner} color='yellow' />
+          <Pane name='purple-rectangle' className='purplePane-purplePane'>
+            <Rectangle bounds={outer} color='purple' />
           </Pane>
         </Pane>
       </Map>

diff --git a/lib/Circle.js b/lib/Circle.js
@@ -49,7 +49,7 @@ var Circle = function (_Path) {
 
       var props = _objectWithoutProperties(_props, ['center', 'radius']);
 
-      this.leafletElement = (0, _leaflet.circle)(center, radius, props);
+      this.leafletElement = (0, _leaflet.circle)(center, radius, this.getOptions(props));
     }
   }, {
     key: 'componentDidUpdate',

diff --git a/lib/CircleMarker.js b/lib/CircleMarker.js
@@ -48,7 +48,7 @@ var CircleMarker = function (_Path) {
 
       var props = _objectWithoutProperties(_props, ['center']);
 
-      this.leafletElement = (0, _leaflet.circleMarker)(center, props);
+      this.leafletElement = (0, _leaflet.circleMarker)(center, this.getOptions(props));
     }
   }, {
     key: 'componentDidUpdate',

diff --git a/lib/FeatureGroup.js b/lib/FeatureGroup.js
@@ -48,7 +48,7 @@ var FeatureGroup = function (_Path) {
   }, {
     key: 'componentWillMount',
     value: function componentWillMount() {
-      this.leafletElement = (0, _leaflet.featureGroup)();
+      this.leafletElement = (0, _leaflet.featureGroup)(this.getOptions(this.props));
     }
   }, {
     key: 'componentDidMount',

diff --git a/lib/GeoJSON.js b/lib/GeoJSON.js
@@ -48,7 +48,7 @@ var GeoJSON = function (_Path) {
 
       var props = _objectWithoutProperties(_props, ['data']);
 
-      this.leafletElement = (0, _leaflet.geoJSON)(data, props);
+      this.leafletElement = (0, _leaflet.geoJSON)(data, this.getOptions(props));
     }
   }, {
     key: 'componentDidUpdate',
@@ -67,4 +67,4 @@ var GeoJSON = function (_Path) {
 GeoJSON.propTypes = {
   data: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.object]).isRequired
 };
-exports.default = GeoJSON;
+exports.default = GeoJSON;
diff --git a/lib/GridLayer.js b/lib/GridLayer.js
@@ -37,7 +37,7 @@ var GridLayer = function (_MapLayer) {
     key: 'componentWillMount',
     value: function componentWillMount() {
       _get(GridLayer.prototype.__proto__ || Object.getPrototypeOf(GridLayer.prototype), 'componentWillMount', this).call(this);
-      this.leafletElement = (0, _leaflet.gridLayer)(this.props);
+      this.leafletElement = (0, _leaflet.gridLayer)(this.getOptions(this.props));
     }
   }, {
     key: 'componentDidUpdate',

diff --git a/lib/ImageOverlay.js b/lib/ImageOverlay.js
@@ -49,7 +49,7 @@ var ImageOverlay = function (_MapLayer) {
 
       var props = _objectWithoutProperties(_props, ['bounds', 'url']);
 
-      this.leafletElement = (0, _leaflet.imageOverlay)(url, bounds, props);
+      this.leafletElement = (0, _leaflet.imageOverlay)(url, bounds, this.getOptions(props));
     }
   }, {
     key: 'componentDidUpdate',

diff --git a/lib/LayerGroup.js b/lib/LayerGroup.js
@@ -46,7 +46,7 @@ var LayerGroup = function (_MapLayer) {
     key: 'componentWillMount',
     value: function componentWillMount() {
       _get(LayerGroup.prototype.__proto__ || Object.getPrototypeOf(LayerGroup.prototype), 'componentWillMount', this).call(this);
-      this.leafletElement = (0, _leaflet.layerGroup)();
+      this.leafletElement = (0, _leaflet.layerGroup)(this.getOptions());
     }
   }]);
 

diff --git a/lib/LayersControl.js b/lib/LayersControl.js
@@ -207,7 +207,7 @@ var LayersControl = function (_MapControl) {
   }, {
     key: 'addBaseLayer',
     value: function addBaseLayer(layer, name) {
-      var checked = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
+      var checked = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
       if (checked) {
         this.context.map.addLayer(layer);
@@ -217,7 +217,7 @@ var LayersControl = function (_MapControl) {
   }, {
     key: 'addOverlay',
     value: function addOverlay(layer, name) {
-      var checked = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
+      var checked = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
       if (checked) {
         this.context.map.addLayer(layer);

diff --git a/lib/MapComponent.js b/lib/MapComponent.js
@@ -20,6 +20,8 @@ var _clone2 = require('lodash/clone');
 
 var _clone3 = _interopRequireDefault(_clone2);
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 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');
@@ -88,8 +90,8 @@ var MapComponent = function (_Component) {
   }, {
     key: 'bindLeafletEvents',
     value: function bindLeafletEvents() {
-      var next = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
-      var prev = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+      var next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var prev = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
       var el = this.leafletElement;
       if (!el || !el.on) return {};
@@ -117,6 +119,14 @@ var MapComponent = function (_Component) {
       var el = this.leafletElement;
       if (el) el.fire(type, data);
     }
+  }, {
+    key: 'getOptions',
+    value: function getOptions() {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      var pane = props.pane || this.context.pane;
+      return pane ? _extends({}, props, { pane: pane }) : props;
+    }
   }]);
 
   return MapComponent;

diff --git a/lib/MapLayer.js b/lib/MapLayer.js
@@ -81,6 +81,7 @@ MapLayer.propTypes = {
 };
 MapLayer.contextTypes = {
   layerContainer: _layerContainer2.default,
-  map: _map2.default
+  map: _map2.default,
+  pane: _react2.default.PropTypes.string
 };
 exports.default = MapLayer;
diff --git a/lib/Marker.js b/lib/Marker.js
@@ -55,7 +55,7 @@ var Marker = function (_MapLayer) {
 
       var props = _objectWithoutProperties(_props, ['position']);
 
-      this.leafletElement = (0, _leaflet.marker)(position, props);
+      this.leafletElement = (0, _leaflet.marker)(position, this.getOptions(props));
     }
   }, {
     key: 'componentDidUpdate',