From e858f1631c0e97762c57333e6d07fa0d0f86a073 Mon Sep 17 00:00:00 2001
From: Compufreak345 <Compufreak345@gmail.com>
Date: Wed, 7 Oct 2015 19:59:09 +0200
Subject: [PATCH 1/3] Add leaflet-rectangle element.

---
 leaflet-rectangle.html | 86 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 leaflet-rectangle.html

diff --git a/leaflet-rectangle.html b/leaflet-rectangle.html
new file mode 100644
index 0000000..8ac215b
--- /dev/null
+++ b/leaflet-rectangle.html
@@ -0,0 +1,86 @@
+<link rel="import" href="leaflet-core.html">
+<link rel="import" href="leaflet-popup.html">
+
+<dom-module id="leaflet-rectangle">
+    <style>
+        :host{ display: none; }
+    </style>
+    <template><content></content>
+    </template>
+</dom-module>
+
+<script>
+    "use strict";
+    Polymer({
+        is: 'leaflet-rectangle',
+        // TODO: Implement complete inheritance from Polygon <- Polyline <- Path
+        behaviors: [leafletMap.LeafletPath, leafletMap.LeafletPopupContent],
+        /**
+         * A Leaflet [Rectangle] object
+         *
+         * @property feature
+         * @type L.rectangle
+         * @default null
+         */
+        feature: null,
+        properties: {
+            container: {
+                type: Object,
+                observer: '_containerChanged'
+            },
+
+            /**
+             * The `northEast` attribute sets the positions of the north east corner of the rectangle.
+             *
+             * @attribute latitude
+             * @type number
+             */
+            northEast : {
+                type: Object,
+                value : null,
+                reflectToAttribute:true,
+                notify:true,
+                observer:'_boundsChanged'
+            },
+            /**
+             * The `southWest` attribute sets the positions of the southWest corner of the rectangle.
+             *
+             * @attribute latitude
+             * @type number
+             */
+            southWest : {
+                type: Object,
+                value : null,
+                reflectToAttribute:true,
+                notify:true,
+                observer:'_boundsChanged'
+            }
+        },
+        _containerChanged: function() {
+            if (this.container) {
+                // define rectangle geographical bounds
+                var bounds = [this.southWest,this.northEast];
+                this.feature = L.rectangle(bounds, this.getPathOptions());
+                // forward events
+                this.feature.on('click dblclick mousedown mouseover mouseout contextmenu dragstart drag dragend move add remove popupopen popupclose', function(e) {
+                    this.fire(e.type, e);
+                }, this);
+
+                this.updatePopupContent();
+                this.feature.addTo(this.container);
+            }
+        },
+        _boundsChanged: function(newVal) {
+            if(this.feature && newVal) {
+                this.feature.setBounds([this.southWest,this.northEast]);
+            }
+        },
+        detached: function() {
+            if (this.container && this.feature) {
+                this.container.removeLayer(this.feature);
+            }
+        }
+    });
+</script>
+
+

From 0545e89b40a62598eda065cedd4861fcc45dd7b6 Mon Sep 17 00:00:00 2001
From: Compufreak345 <Compufreak345@gmail.com>
Date: Wed, 7 Oct 2015 20:31:04 +0200
Subject: [PATCH 2/3] Improve documentation & demo for leaflet-rectangle & add
 to leaflet-map.html

---
 demo.html              |  5 ++++-
 leaflet-map.html       |  1 +
 leaflet-rectangle.html | 31 +++++++++++++++++++++++--------
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/demo.html b/demo.html
index 73e3a9e..f4028dc 100644
--- a/demo.html
+++ b/demo.html
@@ -272,7 +272,10 @@ <h2 id="vector">Circles, polyline and polygons</h2>
 	<leaflet-circle longitude="77.64" latitude="12.9300"
 		radius="500" color="#077">
 	</leaflet-circle>
-
+	<leaflet-rectangle north-east="[77.61,12.93]"
+					   south-west="[77.62,12.94]" fill="true"
+					   fill-color="#FFCC00" weight="1">
+	</leaflet-rectangle>
 </leaflet-map>
 
 
diff --git a/leaflet-map.html b/leaflet-map.html
index 222a75f..85c3809 100644
--- a/leaflet-map.html
+++ b/leaflet-map.html
@@ -45,3 +45,4 @@
 <link rel="import" href="leaflet-geojson.html">
 <link rel="import" href="leaflet-marker.html">
 <link rel="import" href="leaflet-geolocation.html">
+<link rel="import" href="leaflet-rectangle.html">
diff --git a/leaflet-rectangle.html b/leaflet-rectangle.html
index 8ac215b..43e7924 100644
--- a/leaflet-rectangle.html
+++ b/leaflet-rectangle.html
@@ -1,6 +1,21 @@
 <link rel="import" href="leaflet-core.html">
 <link rel="import" href="leaflet-popup.html">
+<!--
+The `leaflet-rectangle` element represents a rectangle on the map and is used as
+a child element of the `leaflet-map` element. To compose the rectangle, set
+the "northEast" and "southWest"-property to a LatLng-object or -array.
 
+##### Example: Add rectangle
+<leaflet-rectangle weight="1" color="#03f" fill-color="#FFCC00"
+ fill="true" id="rect" container="{{container}}"
+  north-east="[40.91264180711942, 10.334070143473614]"
+   south-west="[50.93705640763448, 13.346227708088888]">This is a rectangle!</leaflet-rectangle>
+
+@element leaflet-rectangle
+@blurb Element for putting a rectangle on the map
+@demo https://leaflet-extras.github.io/leaflet-map/demo.html
+@homepage https://leaflet-extras.github.io/leaflet-map/
+-->
 <dom-module id="leaflet-rectangle">
     <style>
         :host{ display: none; }
@@ -30,10 +45,10 @@
             },
 
             /**
-             * The `northEast` attribute sets the positions of the north east corner of the rectangle.
-             *
-             * @attribute latitude
-             * @type number
+             * The `northEast` attribute sets the position of the north east corner of the rectangle.
+             * (e.g. "[0,0]")
+             * @attribute northEast
+             * @type array
              */
             northEast : {
                 type: Object,
@@ -43,10 +58,10 @@
                 observer:'_boundsChanged'
             },
             /**
-             * The `southWest` attribute sets the positions of the southWest corner of the rectangle.
-             *
-             * @attribute latitude
-             * @type number
+             * The `southWest` attribute sets the position of the southWest corner of the rectangle.
+             * (e.g. "[1,1]")
+             * @attribute southWest
+             * @type array
              */
             southWest : {
                 type: Object,

From 799936b7c093f209a5dd92e2ebf770046328cc73 Mon Sep 17 00:00:00 2001
From: Compufreak345 <Compufreak345@gmail.com>
Date: Thu, 8 Oct 2015 00:42:42 +0200
Subject: [PATCH 3/3] Do not initialise rectangle without northEast/southWest

---
 leaflet-rectangle.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/leaflet-rectangle.html b/leaflet-rectangle.html
index 43e7924..7dcfeee 100644
--- a/leaflet-rectangle.html
+++ b/leaflet-rectangle.html
@@ -72,7 +72,7 @@
             }
         },
         _containerChanged: function() {
-            if (this.container) {
+            if (this.container && this.northEast && this.southWest) {
                 // define rectangle geographical bounds
                 var bounds = [this.southWest,this.northEast];
                 this.feature = L.rectangle(bounds, this.getPathOptions());
@@ -88,6 +88,8 @@
         _boundsChanged: function(newVal) {
             if(this.feature && newVal) {
                 this.feature.setBounds([this.southWest,this.northEast]);
+            } else {
+                this._containerChanged();
             }
         },
         detached: function() {