diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8183fd4..358383d 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/README.md b/README.md
index 6e4a356..f8e5260 100644
--- a/README.md
+++ b/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
diff --git a/package.json b/package.json
index 008615c..bced6a0 100644
--- a/package.json
+++ b/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",
diff --git a/worldmap/index.html b/worldmap/index.html
index ba718e5..fc95ce1 100644
--- a/worldmap/index.html
+++ b/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 = ""+data.name+"";
if (data.popup) { var words = words + "
" + 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; }