add rectangles to drawn shapes

update readme etc

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.0.6-beta - Re-enable editing of draw layer, add rectangles to lines and areas.
  - v2.0.5-beta - Fix clustering on zoom (update old library)
  - v2.0.4-beta - Add helicopter icon. Correct Leaflet.Coordinates file name. Fix right contextmenu.
  - v2.0.3-beta - Let circles have popups. Better drawing of ellipses

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.0.6-beta - Re-enable editing of draw layer, add rectangles to lines and areas.
 - v2.0.5-beta - Fix clustering on zoom (update old library)
 - v2.0.4-beta - Add helicopter icon. Correct Leaflet.Coordinates file name. Fix right contextmenu.
 - v2.0.3-beta - Let circles have popups. Better drawing of ellipses
@@ -186,23 +187,19 @@ in addition existing male, female, fa-male and fa-female icons are all represent
  - As this uses the mapbox api you may wish to edit the index3d.html code to include your api key to remove any usage restrictions.
  - This view is a side project to the Node-RED Worldmap project so I'm happy to take PRs but it probably won't be actively developed.
 
-### Areas and Lines
+### Areas, Lines and Rectangles
 
 If the msg.payload contains an **area** property - that is an array of co-ordinates, e.g.
 
-    ... , "area": [ [51.05, -0.08], [51.5, -1], [51.2, -0.047] ], ...
+    msg.payload = {"name": "zone1", "area": [ [51.05, -0.08], [51.5, -1], [51.2, -0.047] ]}
 
-then rather than draw a point and icon it draws the polygon. Likewise if it contains a
-**line** property it will draw the polyline.
+then rather than draw a point and icon it draws the polygon. If the "area" array only has 2
+elements, then it assumes this is a bounding box for a rectangle and draws a rectangle.
+
+Likewise if it contains a **line** property it will draw the polyline.
+
+There are extra optional properties you can specify - see Options below.
 
- - **name** : is used as the id key - so can be redrawn/moved.
- - **layer** : declares which layer you put it on.
- - **color** : can set the colour of the polygon or line.
- - **fillColor** : can set the fill colour of the polygon.
- - **fillOpacity** : can set the opacity of the polygon fill colour.
- - **dashArray** : optional dash array for polyline.
- - **clickable** : boolean - set to true to allow click to show popup.
- - **popup** : html string to display in popup (as well as name).
 
 ### Circles and Ellipses
 
@@ -221,17 +218,18 @@ a number of degrees.
 
 ### Options
 
-Areas, Lines and Circles can also specify more optional properties:
- - color
- - fillColor
- - stroke
- - weight
- - opacity
- - fill
- - fillOpacity
- - dashArray
- - clickable - if true sets the passed in name as popup
- - popup - extra html string to display inside the popup
+Areas, Rectangles, Lines, Circles and Ellipses can also specify more optional properties:
+
+ - **layer** : declares which layer you put it on.
+ - **color** : can set the colour of the polygon or line.
+ - **fillColor** : can set the fill colour of the polygon.
+ - **fillOpacity** : can set the opacity of the polygon fill colour.
+ - **dashArray** : optional dash array for polyline.
+ - **clickable** : boolean - set to true to allow click to show popup.
+ - **popup** : html string to display in popup (as well as name).
+ - **weight** : the width of the line (or outline)
+
+Other properties can be found in the leaflet documentation.
 
 ## Drawing
 
@@ -239,7 +237,7 @@ A single *right click* will allow you to add a point to the map - you must speci
 
 Right-clicking on an icon will allow you to delete it.
 
-If you select the **drawing** layer you can also add polylines, polygons and rectangles.
+If you select the **drawing** layer you can also add and edit polylines, polygons, rectangles and circles.
 
 ## Events from the map
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.0.5-beta",
+    "version": "2.0.6-beta",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",

worldmap/index.html

@@ -1040,7 +1040,13 @@ function setMarker(data) {
         layers[lay].addLayer(polygons[data.name]);
     }
     else if (data.hasOwnProperty("area") && Array.isArray(data.area)) {
-        var polyarea = L.polygon(data.area, opt);
+        var polyarea;
+        if (data.area.length === 2) {
+            polyarea = L.rectangle(data.area, opt);
+        }
+        else {
+            polyarea = L.polygon(data.area, opt);
+        }
         if (opt.clickable) {
             var words = "<b>"+data.name+"</b>";
             if (data.popup) { var words = words + "<br/>" + data.popup; }
@@ -1572,7 +1578,6 @@ function doCommand(cmd) {
         }
     }
     if (cmd.hasOwnProperty("grid")) {
-        console.log("DING",cmd.grid);
         if (cmd.grid.hasOwnProperty("showgrid")) {
             var changed = false;
             if ((cmd.grid.showgrid == "true" || cmd.grid.showgrid == true ) && !showGrid) { changed = true; }