Leaflet Map Panes (#227)

* MapPane implements Leaflet panes.

* Added MapPane to index.js

* Helper function 'getInstanceOptions' to pass options + possible pane from context.

* Implemented possible pane context into appropriate items.

* Added MapPane to docs and examples.

* Added to docs/API

* Typo fix

* Typo fix

* Initial commit for MapPane component.

* Allow overriding pane name through props.

* Allow nested panes.

* Renamed 'MapPane' to 'Pane'

* Renamed 'getInstanceOptions' to 'getOptions'

* Renamed MapPane.js to Pane.js

* Removed paneType

* Renamed MapPane to Pane in documentation and examples.

* Removed _isMounted, Moved this._name to this.state.name

* Bugfix missing 'PropTypes'

* componentWillMount moved to componentDidMount

* Removed paneType export from types/index

* Added Pane export in index to alphabetical order.

* Updated docs and example.

* Comments, className, removed zIndex.

* Updated pane docs and example.

* Removed deprecated lines in createPane.

* Disallow default pane names.

* Updated docs

* Removed 'cloneElement' for children, Bugfix removing pane.

docs/API.md

@@ -30,6 +30,7 @@ Check Leaflet documentation for the events associated to each component.
   - [BaseTileLayer](Components.md#basetilelayer)
   - [Path](Components.md#path)
 - [Map](Components.md#map)
+- [Pane](Components.md#pane)
 - [UI Layers](Components.md#ui-layers)
   - [Marker](Components.md#marker)
   - [Popup](Components.md#popup)

docs/Components.md

@@ -11,6 +11,7 @@ You can directly access the Leaflet element created by a component using `this.l
   - [MapLayer](#maplayer)
   - [Path](#path)
 - [Map](#map)
+- [Pane](#pane)
 - [UI Layers](#ui-layers)
   - [Marker](#marker)
   - [Popup](#popup)
@@ -81,6 +82,14 @@ This is the top-level component that must be mounted for children ones to be ren
 **Other properties**
 - `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
+**Dynamic properties**
+- `name: string` (optional): Names of default 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

example/components/pane.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import { Pane, TileLayer, Rectangle } from '../../src'
+
+const outer = [
+  [50.505, -29.09],
+  [52.505, 29.09],
+]
+const inner = [
+  [49.505, -2.09],
+  [53.505, 2.09],
+]
+
+export default class PaneExample extends Component {
+  state = {
+    bounds: outer,
+  }
+
+  onClickInner = () => {
+    this.setState({bounds: inner})
+  }
+
+  onClickOuter = () => {
+    this.setState({bounds: outer})
+  }
+
+  render () {
+    return (
+      <Map bounds={this.state.bounds}>
+        <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'}
+            />
+          </Pane>
+        </Pane>
+      </Map>
+    )
+  }
+}

src/Circle.js

@@ -15,7 +15,7 @@ export default class Circle extends Path {
   componentWillMount () {
     super.componentWillMount()
     const { center, radius, ...props } = this.props
-    this.leafletElement = circle(center, radius, props)
+    this.leafletElement = circle(center, radius, this.getOptions(props))
   }
 
   componentDidUpdate (prevProps: Object) {

src/CircleMarker.js

@@ -15,7 +15,7 @@ export default class CircleMarker extends Path {
   componentWillMount () {
     super.componentWillMount()
     const { center, ...props } = this.props
-    this.leafletElement = circleMarker(center, props)
+    this.leafletElement = circleMarker(center, this.getOptions(props))
   }
 
   componentDidUpdate (prevProps: Object) {

src/FeatureGroup.js

@@ -20,7 +20,7 @@ export default class FeatureGroup extends Path {
   }
 
   componentWillMount () {
-    this.leafletElement = featureGroup()
+    this.leafletElement = featureGroup(this.getOptions(this.props))
   }
 
   componentDidMount () {

src/GeoJSON.js

@@ -14,7 +14,7 @@ export default class GeoJSON extends Path {
   componentWillMount () {
     super.componentWillMount()
     const { data, ...props } = this.props
-    this.leafletElement = geoJSON(data, props)
+    this.leafletElement = geoJSON(data, this.getOptions(props))
   }
 
   componentDidUpdate (prevProps: Object) {

src/GridLayer.js

@@ -13,7 +13,7 @@ export default class GridLayer extends MapLayer {
 
   componentWillMount () {
     super.componentWillMount()
-    this.leafletElement = gridLayer(this.props)
+    this.leafletElement = gridLayer(this.getOptions(this.props))
   }
 
   componentDidUpdate (prevProps: Object) {

src/ImageOverlay.js

@@ -17,7 +17,7 @@ export default class ImageOverlay extends MapLayer {
   componentWillMount () {
     super.componentWillMount()
     const { bounds, url, ...props } = this.props
-    this.leafletElement = imageOverlay(url, bounds, props)
+    this.leafletElement = imageOverlay(url, bounds, this.getOptions(props))
   }
 
   componentDidUpdate (prevProps: Object) {

src/LayerGroup.js

@@ -3,6 +3,7 @@
 import { layerGroup } from 'leaflet'
 
 import layerContainerType from './types/layerContainer'
+
 import MapLayer from './MapLayer'
 
 export default class LayerGroup extends MapLayer {
@@ -18,6 +19,6 @@ export default class LayerGroup extends MapLayer {
 
   componentWillMount () {
     super.componentWillMount()
-    this.leafletElement = layerGroup()
+    this.leafletElement = layerGroup(this.getOptions())
   }
 }

src/MapComponent.js

@@ -72,4 +72,17 @@ export default class MapComponent extends Component<any, any, any> {
     const el = this.leafletElement
     if (el) el.fire(type, data)
   }
+
+  getOptions (props = {}) {
+    const pane = props.pane || this.context.pane
+
+    if (pane) {
+      return {
+        ...props,
+        pane,
+      }
+    }
+
+    return props
+  }
 }

src/MapLayer.js

@@ -16,6 +16,7 @@ export default class MapLayer extends MapComponent {
   static contextTypes = {
     layerContainer: layerContainerType,
     map: mapType,
+    pane: React.PropTypes.string,
   };
 
   get layerContainer (): Object {

src/Marker.js

@@ -27,7 +27,7 @@ export default class Marker extends MapLayer {
   componentWillMount () {
     super.componentWillMount()
     const { position, ...props } = this.props
-    this.leafletElement = marker(position, props)
+    this.leafletElement = marker(position, this.getOptions(props))
   }
 
   componentDidUpdate (prevProps: Object) {