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; }