lets lines and areas have popups

CHANGELOG.md

@@ -1,6 +1,7 @@
 ### Change Log for Node-RED Worldmap
 
- - v2.0.1-beta - Add optional graticule
+ - v2.0.2-beta - Let lines and areas also have popups
+ - v2.0.1-beta - Add optional graticule.
  - v2.0.0-beta - Move to leaflet 1.4.x plus all plugins updated
  - v1.5.40 - Only enable on.location function when not in an iframe. Issue #89. Tidy html.
  - v1.5.39 - Add weather-lite icons

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.0.2-beta - Let lines and areas also have popups
 - v2.0.1-beta - Add optional graticule
 - v2.0.0-beta - Move to leaflet 1.4.x plus all plugins updated
 - v1.5.40 - Only enable on.location function when not in an iframe. Issue #89. Tidy html.
@@ -190,12 +191,14 @@ If the msg.payload contains an **area** property - that is an array of co-ordina
 then rather than draw a point and icon it draws the polygon. Likewise if it contains a
 **line** property it will draw the polyline.
 
+ - **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.
- - **name** : is used as the id key - so can be redrawn/moved.
- - **layer** : declares which layer you put it on..
+ - **clickable** : boolean - set to true to allow click to show popup.
+ - **popup** : html string to display in popup (as well as name).
 
 ### Circles
 
@@ -220,7 +223,8 @@ Areas, Lines and Circles can also specify more optional properties:
  - fill
  - fillOpacity
  - dashArray
- - clickable (if true sets the passed in name as Popup)
+ - clickable - if true sets the passed in name as popup
+ - popup - extra html string to display as part of popup
 
 ## Drawing
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.0.1-beta",
+    "version": "2.0.2-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

@@ -281,11 +281,11 @@ var Lgrid = L.latlngGraticule({
 	font: "Verdana",
     fontColor: "#666",
     zoomInterval: [
-		{start: 2, end: 2, interval: 40},
-		{start: 3, end: 3, interval: 20},
-		{start: 4, end: 4, interval: 10},
-		{start: 5, end: 7, interval: 5},
-		{start: 8, end: 20, interval: 1}
+		{start:1, end:2, interval:40},
+		{start:3, end:3, interval:20},
+		{start:4, end:4, interval:10},
+		{start:5, end:7, interval:5},
+		{start:8, end:20, interval:1}
 	]
 });
 
@@ -1035,14 +1035,22 @@ function setMarker(data) {
         if (!data.hasOwnProperty("weight")) { opt.weight = 3; }    //Standard settings different for lines
         if (!data.hasOwnProperty("opacity")) { opt.opacity = 0.8; }
         var polyln = L.polyline(data.line, opt);
-        if (opt.clickable) { polyln.bindPopup(data.name); }
+        if (opt.clickable) { 
+            var words = "<b>"+data.name+"</b>";
+            if (data.popup) { var words = words + "<br/>" + data.popup; }
+            polyln.bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200});
+        }
         polygons[data.name] = polyln;
         polygons[data.name].lay = lay;
         layers[lay].addLayer(polygons[data.name]);
     }
     else if (data.hasOwnProperty("area") && Array.isArray(data.area)) {
         var polyarea = L.polygon(data.area, opt);
-        if (opt.clickable) { polyarea.bindPopup(data.name); }
+        if (opt.clickable) {
+            var words = "<b>"+data.name+"</b>";
+            if (data.popup) { var words = words + "<br/>" + data.popup; }
+            polyarea.bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200});
+        }
         polygons[data.name] = polyarea;
         polygons[data.name].lay = lay;
         layers[lay].addLayer(polygons[data.name]);