node-red-contrib-web-worldmap 5.1.1 → 5.1.2

package/CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v5.1.2 - Fix for longer line msg properties.
  - v5.1.1 - Fix CoT inline image.
  - v5.1.0 - Let special icons be sizeable using iconSize property.
  - v5.0.9 - Slight tidy on flags, bump turf dep.

package/README.md

@@ -13,6 +13,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
 
 ### Updates
 
+- v5.1.2 - Fix for longer line msg properties.
 - v5.1.1 - Fix CoT inline image.
 - v5.1.0 - Let special icons be sizeable using iconSize property.
 - v5.0.9 - Slight tidy on flags, bump turf dep.

package/examples/Moving Icons Demo & Builder.json

@@ -27,25 +27,10 @@
         "mapurl": "",
         "mapopt": "",
         "mapwms": false,
-        "x": 1840,
-        "y": 820,
+        "x": 1760,
+        "y": 920,
         "wires": []
     },
-    {
-        "id": "be0f2591062868c9",
-        "type": "worldmap in",
-        "z": "f6f2187d.f17ca8",
-        "name": "",
-        "path": "/worldmap",
-        "events": "connect,disconnect,point,layer,bounds,files,draw,other",
-        "x": 140,
-        "y": 900,
-        "wires": [
-            [
-                "9a57374d6e27c511"
-            ]
-        ]
-    },
     {
         "id": "9a57374d6e27c511",
         "type": "switch",
@@ -88,8 +73,8 @@
         "checkall": "true",
         "repair": false,
         "outputs": 6,
-        "x": 340,
-        "y": 900,
+        "x": 260,
+        "y": 1000,
         "wires": [
             [
                 "47bd2da7d8d032c5"
@@ -117,8 +102,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Map Context Menu (1; 2; 3; 4; 5)",
         "info": "",
-        "x": 610,
-        "y": 760,
+        "x": 530,
+        "y": 860,
         "wires": []
     },
     {
@@ -127,8 +112,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Add to Store (8)",
         "info": "",
-        "x": 560,
-        "y": 900,
+        "x": 480,
+        "y": 1000,
         "wires": []
     },
     {
@@ -143,8 +128,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 550,
-        "y": 940,
+        "x": 470,
+        "y": 1040,
         "wires": [
             [
                 "e6ebed7ef8df0dcd"
@@ -157,8 +142,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "This example can be used as a marker builder.\\n It utilizes the map's context menu option to create a form for adding map elements,\\n displays the msg.payload value for the element creation, and generates the map icon. \\n The example also demonstrates the following Red Map features: \\n  1. Mapcontext menu/Object Cotextmenu\\n  2. Usage of input fields/HTML/JavaScript in context menus\\n  3. Different icon types for Red Map markers (use SIDC link to generate SIDC string)\\n 4. Attributes of Red Map markers\\n  5. Feedback function\\n  6. Usage of the map input node\\n 7. Delete Objects\\n 8. Store list of objects\\n 9. Moving Objects\\n Usage: Sample data loaded, rightclick to update values\\n create multiple objects using rightclick on the map,\\n copy the payload field into function or change nodes to inject the icon from the backend\\n rightclick on any object to update its attributes or delete it\\n (contextmenu popup will stay open to allow payload copy)",
         "info": "",
-        "x": 860,
-        "y": 320,
+        "x": 780,
+        "y": 420,
         "wires": []
     },
     {
@@ -173,8 +158,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 790,
-        "y": 940,
+        "x": 710,
+        "y": 1040,
         "wires": [
             [
                 "d49d5d6e6b436813"
@@ -193,8 +178,8 @@
         "stream": false,
         "addname": "",
         "property": "payload",
-        "x": 1110,
-        "y": 680,
+        "x": 1030,
+        "y": 780,
         "wires": [
             [
                 "94ae7a702138b59e"
@@ -213,8 +198,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 560,
-        "y": 1020,
+        "x": 480,
+        "y": 1120,
         "wires": [
             [
                 "eb0a9d4569cf7b06"
@@ -233,8 +218,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 750,
-        "y": 1040,
+        "x": 670,
+        "y": 1140,
         "wires": [
             [
                 "d49d5d6e6b436813"
@@ -247,8 +232,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Input Node (6)",
         "info": "",
-        "x": 170,
-        "y": 840,
+        "x": 90,
+        "y": 940,
         "wires": []
     },
     {
@@ -257,8 +242,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Delete (from store)",
         "info": "",
-        "x": 570,
-        "y": 980,
+        "x": 490,
+        "y": 1080,
         "wires": []
     },
     {
@@ -267,8 +252,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Delete (From Map) (7)",
         "info": "",
-        "x": 780,
-        "y": 1000,
+        "x": 700,
+        "y": 1100,
         "wires": []
     },
     {
@@ -277,8 +262,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Move (9)",
         "info": "",
-        "x": 1260,
-        "y": 640,
+        "x": 1180,
+        "y": 740,
         "wires": []
     },
     {
@@ -293,8 +278,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 550,
-        "y": 1100,
+        "x": 470,
+        "y": 1200,
         "wires": [
             [
                 "d22c566910bce313"
@@ -307,8 +292,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Update Object Data",
         "info": "",
-        "x": 570,
-        "y": 1060,
+        "x": 490,
+        "y": 1160,
         "wires": []
     },
     {
@@ -323,8 +308,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 550,
-        "y": 600,
+        "x": 470,
+        "y": 700,
         "wires": [
             [
                 "e2852ab33b037f41"
@@ -348,8 +333,8 @@
         "topic": "",
         "payload": "",
         "payloadType": "date",
-        "x": 370,
-        "y": 600,
+        "x": 290,
+        "y": 700,
         "wires": [
             [
                 "eaea660f91589f0d"
@@ -368,8 +353,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 530,
-        "y": 1180,
+        "x": 450,
+        "y": 1280,
         "wires": [
             [
                 "d22c566910bce313"
@@ -388,8 +373,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 780,
-        "y": 1140,
+        "x": 700,
+        "y": 1240,
         "wires": [
             [
                 "d49d5d6e6b436813"
@@ -402,8 +387,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Update Object Position",
         "info": "",
-        "x": 580,
-        "y": 1140,
+        "x": 500,
+        "y": 1240,
         "wires": []
     },
     {
@@ -412,8 +397,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Object Context Menu ",
         "info": "",
-        "x": 1620,
-        "y": 640,
+        "x": 1540,
+        "y": 740,
         "wires": []
     },
     {
@@ -436,8 +421,8 @@
         "from": "",
         "to": "",
         "reg": false,
-        "x": 950,
-        "y": 680,
+        "x": 870,
+        "y": 780,
         "wires": [
             [
                 "d35078c8f9df08de"
@@ -461,8 +446,8 @@
         "topic": "",
         "payload": "",
         "payloadType": "date",
-        "x": 370,
-        "y": 680,
+        "x": 290,
+        "y": 780,
         "wires": [
             [
                 "18568709ef76cce5"
@@ -495,8 +480,8 @@
         "from": "",
         "to": "",
         "reg": false,
-        "x": 710,
-        "y": 600,
+        "x": 630,
+        "y": 700,
         "wires": [
             []
         ]
@@ -516,8 +501,8 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 530,
-        "y": 680,
+        "x": 450,
+        "y": 780,
         "wires": [
             [
                 "41067c9c0c7f3268"
@@ -543,8 +528,8 @@
         "from": "",
         "to": "",
         "reg": false,
-        "x": 550,
-        "y": 860,
+        "x": 470,
+        "y": 960,
         "wires": [
             []
         ]
@@ -561,8 +546,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 1270,
-        "y": 680,
+        "x": 1190,
+        "y": 780,
         "wires": [
             [
                 "62537dafd11e7751"
@@ -578,10 +563,10 @@
         "fieldType": "msg",
         "format": "html",
         "syntax": "mustache",
-        "template": "<b>Update Object Properties</b><br/><br/>\n<table id='addTable' style=\"width:100%;\">\n<tr><td>Layer</td><td><input type='text' id='inLay' placeholder='unknown' value='{{menu.layer}}' /></td></tr>\n<tr><td>Draggable</td><td><input type='checkbox' id='inDrag' name='inDrag' {{menu.drag}}></td></tr>\n<tr><td>Track</td><td><input type='text' id='inTrack' value='{{menu.track}}' /></td></tr>\n<tr><td>Speed</td><td><input type='text' id='inSpeed' value='{{menu.speed}}' /></td></tr>\n<tr><td>Alt</td><td><input type='text' id='inAlt' value='{{menu.alt}}' /></td></tr>\n<tr><td>Lat</td><td><input type='text' id='inLat' value='{{menu.lat}}' /></td></tr>\n<tr><td>Lon</td><td><input type='text' id='inLon' value='{{menu.lon}}'/></td></tr>\n<tr><td>Label</td><td><input type='text' id='inLabel'  value='{{menu.label}}' /></td></tr>\n<tr><td><a href=\"https://www.spatialillusions.com/unitgenerator-legacy/\" target=\"_blank\">SIDC</a></td>\n<td><input type='text' id='inSIDC'  value='{{menu.SIDC}}' /></td></tr>\n<tr><td>SIDC Options</td><td><input type='text' id='inOptions'  value='{{menu.options}}' /></td></tr>\n<tr><td>Icon Category</td><td>{{{menu.categories}}}</td></tr>\n<tr><td>Icon</td><td>{{{menu.icons}}}</td></tr>\n<tr><td>iconColor</td><td><input type='text' id='inColor' value='{{menu.iconColor}}' /></td></tr>\n<tr><td>toolTip</td><td><input type='text' id='inTool' value='{{menu.tooltip}}' /></td></tr>\n<tr><td>Payload</td><td><div id='payload'></div></td></tr>\n<tr><td></td><td><button id='addIcon' type='button' onclick=\n    'let _lat = document.getElementById(\"inLat\").value; _lat = parseFloat((_lat === \"\") ? rclk.lat.toFixed(6) : _lat);\n    let _lon = document.getElementById(\"inLon\").value; _lon = parseFloat((_lon === \"\") ? rclk.lng.toFixed(6) : _lon);\n    let _lay = document.getElementById(\"inLay\").value;\n    let _drag = document.getElementById(\"inDrag\").checked;\n    let _track = document.getElementById(\"inTrack\").value; _track = parseFloat((_track === \"\") ? 0 : _track);\n    let _speed = document.getElementById(\"inSpeed\").value; _speed = parseFloat((_speed === \"\") ? 0 : _speed);\n    let _alt = document.getElementById(\"inAlt\").value; _alt = parseFloat((_alt === \"\") ? 0 : _alt);\n    let _icon = document.getElementById(\"iconsSelect\").value; _icon = (_icon === \"\") ? \"uav\" : _icon;\n    let _label = document.getElementById(\"inLabel\").value || \"\";\n    let _color = document.getElementById(\"inColor\").value || \"\";\n    let _tool = document.getElementById(\"inTool\").value;\n    let _sidc = document.getElementById(\"inSIDC\").value;\n    let _sidcOptions;\n    try {_sidcOptions = JSON.parse(document.getElementById(\"inOptions\").value);} catch(e) {_sidcOptions = \"\";}\n    _sidcOptions = (_sidc === \"\") ? \"\" : _sidcOptions;\n    for (let key in _sidcOptions) {if ((_sidcOptions[key] === \"\") || (_sidcOptions[key] === 0)) {delete _sidcOptions[key];}}\n    _sidcOptions = (Object.keys(_sidcOptions).length === 0 ) ? \"\" : _sidcOptions;\n    _icon = (_sidc !== \"\") ? \"\" : _icon;\n    let _fbData = {\"layer\": _lay,\"draggable\": _drag,\"track\":_track,\"speed\":_speed,\"alt\":_alt,\"lat\":_lat,\"lon\":_lon,\"icon\":_icon,\"iconColor\":_color,\"tooltip\":_tool,\"label\":_label,\"SIDC\":_sidc,\"options\":_sidcOptions};\n    for (let key in _fbData) {if (_fbData[key] === \"\") {delete _fbData[key];}}\n    document.getElementById(\"payload\").innerHTML = JSON.stringify({\"name\" :\"{{payload.name}}\", ..._fbData},null,2);\n    feedback(\"{{payload.name}}\",_fbData,\"updateObject\",false);'\n    style='width: 100% !important;'>Update Object Data</button></td></tr>\n<tr><td></td><td><button id='addIcon' type='button' style='width:100%;background-color: red; color: white;' onclick='feedback(\"{{payload.name}}\",\"\",\"drawdelete\",true);'>Delete Object</button></td></tr>\n</table>",
+        "template": "<b>Update Object Properties</b><br/><br/>\n<table id='addTable' style=\"width:100%;\">\n<tr><td>Layer</td><td><input type='text' id='inLay' placeholder='unknown' value='{{menu.layer}}' /></td></tr>\n<tr><td>Draggable</td><td><input type='checkbox' id='inDrag' name='inDrag' {{menu.drag}}></td></tr>\n<tr><td>Track</td><td><input type='text' id='inTrack' value='{{menu.track}}' /></td></tr>\n<tr><td>Speed</td><td><input type='text' id='inSpeed' value='{{menu.speed}}' /></td></tr>\n<tr><td>Alt</td><td><input type='text' id='inAlt' value='{{menu.alt}}' /></td></tr>\n<tr><td>Lat</td><td><input type='text' id='inLat' value='{{menu.lat}}' /></td></tr>\n<tr><td>Lon</td><td><input type='text' id='inLon' value='{{menu.lon}}'/></td></tr>\n<tr><td>Label</td><td><input type='text' id='inLabel'  value='{{menu.label}}' /></td></tr>\n<tr><td><a href=\"https://www.spatialillusions.com/unitgenerator-legacy/\" target=\"_blank\">SIDC</a></td>\n<td><input type='text' id='inSIDC'  value='{{menu.SIDC}}' /></td></tr>\n<tr><td>SIDC Options</td><td><input type='text' id='inOptions'  value='{{menu.options}}' /></td></tr>\n<tr><td>Icon Category</td><td>{{{menu.categories}}}</td></tr>\n<tr><td>Icon</td><td>{{{menu.icons}}}</td></tr>\n<tr>\n    <td>iconSize</td>\n    <td><input type='text' id='inSize' value='{{menu.iconSize}}' /></td>\n</tr>\n<tr><td>iconColor</td><td><input type='text' id='inColor' value='{{menu.iconColor}}' /></td></tr>\n<tr><td>toolTip</td><td><input type='text' id='inTool' value='{{menu.tooltip}}' /></td></tr>\n<tr><td>Payload</td><td><div id='payload'></div></td></tr>\n<tr><td></td><td><button id='addIcon' type='button' onclick=\n    'let _lat = document.getElementById(\"inLat\").value; _lat = parseFloat((_lat === \"\") ? rclk.lat.toFixed(6) : _lat);\n    let _lon = document.getElementById(\"inLon\").value; _lon = parseFloat((_lon === \"\") ? rclk.lng.toFixed(6) : _lon);\n    let _lay = document.getElementById(\"inLay\").value;\n    let _drag = document.getElementById(\"inDrag\").checked;\n    let _track = document.getElementById(\"inTrack\").value; _track = parseFloat((_track === \"\") ? 0 : _track);\n    let _speed = document.getElementById(\"inSpeed\").value; _speed = parseFloat((_speed === \"\") ? 0 : _speed);\n    let _alt = document.getElementById(\"inAlt\").value; _alt = parseFloat((_alt === \"\") ? 0 : _alt);\n    let _icon = document.getElementById(\"iconsSelect\").value; _icon = (_icon === \"\") ? \"uav\" : _icon;\n    let _label = document.getElementById(\"inLabel\").value || \"\";\n    let _size = document.getElementById(\"inSize\").value || 32;\n    let _color = document.getElementById(\"inColor\").value || \"\";\n    let _tool = document.getElementById(\"inTool\").value;\n    let _sidc = document.getElementById(\"inSIDC\").value;\n    let _sidcOptions;\n    try {_sidcOptions = JSON.parse(document.getElementById(\"inOptions\").value);} catch(e) {_sidcOptions = \"\";}\n    _sidcOptions = (_sidc === \"\") ? \"\" : _sidcOptions;\n    for (let key in _sidcOptions) {if ((_sidcOptions[key] === \"\") || (_sidcOptions[key] === 0)) {delete _sidcOptions[key];}}\n    _sidcOptions = (Object.keys(_sidcOptions).length === 0 ) ? \"\" : _sidcOptions;\n    _icon = (_sidc !== \"\") ? \"\" : _icon;\n    let _fbData = {\"layer\": _lay,\"draggable\": _drag,\"track\":_track,\"speed\":_speed,\"alt\":_alt,\"lat\":_lat,\"lon\":_lon,\"icon\":_icon,\"iconSize\":_size,\"iconColor\":_color,\"tooltip\":_tool,\"label\":_label,\"SIDC\":_sidc,\"options\":_sidcOptions};\n    for (let key in _fbData) {if (_fbData[key] === \"\") {delete _fbData[key];}}\n    document.getElementById(\"payload\").innerHTML = JSON.stringify({\"name\" :\"{{payload.name}}\", ..._fbData},null,2);\n    feedback(\"{{payload.name}}\",_fbData,\"updateObject\",false);'\n    style='width: 100% !important;'>Update Object Data</button></td></tr>\n<tr><td></td><td><button id='addIcon' type='button' style='width:100%;background-color: red; color: white;' onclick='feedback(\"{{payload.name}}\",\"\",\"drawdelete\",true);'>Delete Object</button></td></tr>\n</table>",
         "output": "str",
-        "x": 1640,
-        "y": 680,
+        "x": 1560,
+        "y": 780,
         "wires": [
             [
                 "f83930ff.b21488"
@@ -593,15 +578,15 @@
         "type": "function",
         "z": "f6f2187d.f17ca8",
         "name": "Set Form Values",
-        "func": "let icons = flow.get(\"iconsObject\");\nlet category = Object.keys(icons).find(key => icons[key].includes(msg.payload.icon));\nmsg.menu = {};\nmsg.menu.layer = msg.payload.layer;\nmsg.menu.drag = msg.payload.draggable === true ? \"checked\" : \"\";\nmsg.menu.track = msg.payload.track || 0;\nmsg.menu.speed = msg.payload.speed || 0;\nmsg.menu.alt = msg.payload.alt || 0;\nmsg.menu.lat = msg.payload.lat;\nmsg.menu.lon = msg.payload.lon;\nmsg.menu.label = msg.payload.label || \"\";\nmsg.menu.SIDC = msg.payload.SIDC || \"\";\nmsg.menu.options = JSON.stringify(msg.payload.options) || \"\";\nmsg.menu.categories = flow.get(\"categoriesSelect\").replace(category+\"\\\"\",category+\"\\\" selected\");\nmsg.menu.icons = flow.get(\"iconsSelect\").replace(msg.payload.icon+\"\\\"\",msg.payload.icon+\"\\\" selected\");;\nmsg.menu.iconColor = msg.payload.iconColor || \"\";\nmsg.menu.tooltip = msg.payload.tooltip || \"\";\n\n\n\n\nreturn msg;",
+        "func": "let icons = flow.get(\"iconsObject\");\nlet category = Object.keys(icons).find(key => icons[key].includes(msg.payload.icon));\nmsg.menu = {};\nmsg.menu.layer = msg.payload.layer;\nmsg.menu.drag = msg.payload.draggable === true ? \"checked\" : \"\";\nmsg.menu.track = msg.payload.track || 0;\nmsg.menu.speed = msg.payload.speed || 0;\nmsg.menu.alt = msg.payload.alt || 0;\nmsg.menu.lat = msg.payload.lat;\nmsg.menu.lon = msg.payload.lon;\nmsg.menu.label = msg.payload.label || \"\";\nmsg.menu.SIDC = msg.payload.SIDC || \"\";\nmsg.menu.options = JSON.stringify(msg.payload.options) || \"\";\nmsg.menu.categories = flow.get(\"categoriesSelect\").replace(category+\"\\\"\",category+\"\\\" selected\");\nmsg.menu.icons = flow.get(\"iconsSelect\").replace(msg.payload.icon+\"\\\"\",msg.payload.icon+\"\\\" selected\");\nmsg.menu.iconSize = msg.payload.iconSize || 32;\nmsg.menu.iconColor = msg.payload.iconColor || \"\";\nmsg.menu.tooltip = msg.payload.tooltip || \"\";\n\n\n\n\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 1440,
-        "y": 680,
+        "x": 1360,
+        "y": 780,
         "wires": [
             [
                 "f85ab8a742392a3c"
@@ -623,8 +608,8 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 1020,
-        "y": 1040,
+        "x": 940,
+        "y": 1140,
         "wires": [
             [
                 "f83930ff.b21488"
@@ -637,8 +622,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Redra cycle",
         "info": "",
-        "x": 370,
-        "y": 640,
+        "x": 290,
+        "y": 740,
         "wires": []
     },
     {
@@ -647,8 +632,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Init",
         "info": "",
-        "x": 350,
-        "y": 560,
+        "x": 270,
+        "y": 660,
         "wires": []
     },
     {
@@ -657,8 +642,8 @@
         "z": "f6f2187d.f17ca8",
         "name": "Immediate draw",
         "info": "",
-        "x": 1020,
-        "y": 1000,
+        "x": 940,
+        "y": 1100,
         "wires": []
     },
     {
@@ -680,8 +665,8 @@
         "from": "",
         "to": "",
         "reg": false,
-        "x": 550,
-        "y": 820,
+        "x": 470,
+        "y": 920,
         "wires": [
             [
                 "68a4405c6a59ddd8"
@@ -697,10 +682,10 @@
         "fieldType": "msg",
         "format": "html",
         "syntax": "mustache",
-        "template": "<b>Update Object Properties</b><br/><br/>\n<table id='addTable' style=\"width:100%;\">\n<tr><td>Name</td><td><input type='text' id='inName' value=''  autofocus;/></td></tr>\n<tr><td>Layer</td><td><input type='text' id='inLay' placeholder='unknown' value='' /></td></tr>\n<tr><td>Draggable</td><td><input type='checkbox' id='inDrag' name='inDrag'></td></tr>\n<tr><td>Track</td><td><input type='text' id='inTrack' value=0 /></td></tr>\n<tr><td>Speed</td><td><input type='text' id='inSpeed' value=0 /></td></tr>\n<tr><td>Alt</td><td><input type='text' id='inAlt' value=0 /></td></tr>\n<tr><td>Lat</td><td><input type='text' id='inLat' placeholder='Value/Empty/dblClk' value='' ondblclick='this.value=rclk.lat.toFixed(6);' /></td></tr>\n<tr><td>Lon</td><td><input type='text' id='inLon' placeholder='Value/Empty/dblClk' value='' ondblclick='this.value=rclk.lng.toFixed(6);' /></td></tr>\n<tr><td>Label</td><td><input type='text' id='inLabel'  value='' /></td></tr>\n<tr><td><a href=\"https://www.spatialillusions.com/unitgenerator-legacy/\" target=\"_blank\">SIDC</a></td>\n<td><input type='text' id='inSIDC'  value='' /></td></tr>\n<tr><td>SIDC Options</td><td><input type='text' id='inOptions'  value='{\"fillOpacity\":0,\"direction\":0,\"speed\":0,\"type\":\"\",\"infoSize\":0,\"infoFields\":\"\",\"staffComments\":\"\",\"altitudeDepth\":\"\",\"quantity\":0,\"additionalInformation\":\"\"}' /></td></tr>\n<tr><td>Icon Category</td><td>{{{flow.categoriesSelect}}}</td></tr>\n<tr><td>Icon</td><td>{{{flow.iconsSelect}}}</td></tr>\n<tr><td>iconColor</td><td><input type='text' id='inColor' value='' /></td></tr>\n<tr><td>toolTip</td><td><input type='text' id='inTool' value='' /></td></tr>\n<tr><td>Payload</td><td><div id='payload'></div></td></tr>\n<tr><td></td><td><button id='addIcon' type='button' onclick=\n    'let _name = document.getElementById(\"inName\").value; _name = (_name === \"\") ? \"ID\"+Math.floor(Math.random() * 10000) : _name;\n    let _lat = document.getElementById(\"inLat\").value; _lat = parseFloat((_lat === \"\") ? rclk.lat.toFixed(6) : _lat);\n    let _lon = document.getElementById(\"inLon\").value; _lon = parseFloat((_lon === \"\") ? rclk.lng.toFixed(6) : _lon);\n    let _lay = document.getElementById(\"inLay\").value;\n    let _drag = document.getElementById(\"inDrag\").checked;\n    let _track = document.getElementById(\"inTrack\").value; _track = parseFloat((_track === \"\") ? 0 : _track);\n    let _speed = document.getElementById(\"inSpeed\").value; _speed = parseFloat((_speed === \"\") ? 0 : _speed);\n    let _alt = document.getElementById(\"inAlt\").value; _alt = parseFloat((_alt === \"\") ? 0 : _alt);\n    let _icon = document.getElementById(\"iconsSelect\").value; _icon = (_icon === \"\") ? \"uav\" : _icon;\n    let _label = document.getElementById(\"inLabel\").value || \"\";\n    let _color = document.getElementById(\"inColor\").value || \"\";\n    let _tool = document.getElementById(\"inTool\").value;\n    let _sidc = document.getElementById(\"inSIDC\").value;\n    let _sidcOptions;\n    try {_sidcOptions = JSON.parse(document.getElementById(\"inOptions\").value);} catch(e) {_sidcOptions = \"\";}\n    _sidcOptions = (_sidc === \"\") ? \"\" : _sidcOptions;\n    for (let key in _sidcOptions) {if ((_sidcOptions[key] === \"\") || (_sidcOptions[key] === 0)) {delete _sidcOptions[key];}}\n    _sidcOptions = (Object.keys(_sidcOptions).length === 0 ) ? \"\" : _sidcOptions;\n    _icon = (_sidc !== \"\") ? \"\" : _icon;\n    let _fbData = {\"layer\": _lay,\"draggable\": _drag,\"track\":_track,\"speed\":_speed,\"alt\":_alt,\"lat\":_lat,\"lon\":_lon,\"icon\":_icon,\"iconColor\":_color,\"tooltip\":_tool,\"label\":_label,\"SIDC\":_sidc,\"options\":_sidcOptions};\n    for (let key in _fbData) {if (_fbData[key] === \"\") {delete _fbData[key];}}\n    document.getElementById(\"payload\").innerHTML = JSON.stringify({\"name\" :_name, ..._fbData},null,2);\n    feedback(_name,_fbData,\"addObject\",false);'\n    style='width: 100% !important;'>Add New Object</button></td></tr>\n</table>",
+        "template": "<b>Update Object Properties</b><br/><br/>\n<table id='addTable' style=\"width:100%;\">\n<tr><td>Name</td><td><input type='text' id='inName' value=''  autofocus;/></td></tr>\n<tr><td>Layer</td><td><input type='text' id='inLay' placeholder='unknown' value='' /></td></tr>\n<tr><td>Draggable</td><td><input type='checkbox' id='inDrag' name='inDrag'></td></tr>\n<tr><td>Track</td><td><input type='text' id='inTrack' value=0 /></td></tr>\n<tr><td>Speed</td><td><input type='text' id='inSpeed' value=0 /></td></tr>\n<tr><td>Alt</td><td><input type='text' id='inAlt' value=0 /></td></tr>\n<tr><td>Lat</td><td><input type='text' id='inLat' placeholder='Value/Empty/dblClk' value='' ondblclick='this.value=rclk.lat.toFixed(6);' /></td></tr>\n<tr><td>Lon</td><td><input type='text' id='inLon' placeholder='Value/Empty/dblClk' value='' ondblclick='this.value=rclk.lng.toFixed(6);' /></td></tr>\n<tr><td>Label</td><td><input type='text' id='inLabel'  value='' /></td></tr>\n<tr><td><a href=\"https://www.spatialillusions.com/unitgenerator-legacy/\" target=\"_blank\">SIDC</a></td>\n<td><input type='text' id='inSIDC'  value='' /></td></tr>\n<tr><td>SIDC Options</td><td><input type='text' id='inOptions'  value='{\"fillOpacity\":0,\"direction\":0,\"speed\":0,\"type\":\"\",\"infoSize\":0,\"infoFields\":\"\",\"staffComments\":\"\",\"altitudeDepth\":\"\",\"quantity\":0,\"additionalInformation\":\"\"}' /></td></tr>\n<tr><td>Icon Category</td><td>{{{flow.categoriesSelect}}}</td></tr>\n<tr><td>Icon</td><td>{{{flow.iconsSelect}}}</td></tr>\n<tr>\n    <td>iconSize</td>\n    <td><input type='text' id='inSize' value='' /></td>\n</tr>\n<tr><td>iconColor</td><td><input type='text' id='inColor' value='' /></td></tr>\n<tr><td>toolTip</td><td><input type='text' id='inTool' value='' /></td></tr>\n<tr><td>Payload</td><td><div id='payload'></div></td></tr>\n<tr><td></td><td><button id='addIcon' type='button' onclick=\n    'let _name = document.getElementById(\"inName\").value; _name = (_name === \"\") ? \"ID\"+Math.floor(Math.random() * 10000) : _name;\n    let _lat = document.getElementById(\"inLat\").value; _lat = parseFloat((_lat === \"\") ? rclk.lat.toFixed(6) : _lat);\n    let _lon = document.getElementById(\"inLon\").value; _lon = parseFloat((_lon === \"\") ? rclk.lng.toFixed(6) : _lon);\n    let _lay = document.getElementById(\"inLay\").value;\n    let _drag = document.getElementById(\"inDrag\").checked;\n    let _track = document.getElementById(\"inTrack\").value; _track = parseFloat((_track === \"\") ? 0 : _track);\n    let _speed = document.getElementById(\"inSpeed\").value; _speed = parseFloat((_speed === \"\") ? 0 : _speed);\n    let _alt = document.getElementById(\"inAlt\").value; _alt = parseFloat((_alt === \"\") ? 0 : _alt);\n    let _icon = document.getElementById(\"iconsSelect\").value; _icon = (_icon === \"\") ? \"uav\" : _icon;\n    let _label = document.getElementById(\"inLabel\").value || \"\";\n    let _size = document.getElementById(\"inSize\").value || 32;\n    let _color = document.getElementById(\"inColor\").value || \"\";\n    let _tool = document.getElementById(\"inTool\").value;\n    let _sidc = document.getElementById(\"inSIDC\").value;\n    let _sidcOptions;\n    try {_sidcOptions = JSON.parse(document.getElementById(\"inOptions\").value);} catch(e) {_sidcOptions = \"\";}\n    _sidcOptions = (_sidc === \"\") ? \"\" : _sidcOptions;\n    for (let key in _sidcOptions) {if ((_sidcOptions[key] === \"\") || (_sidcOptions[key] === 0)) {delete _sidcOptions[key];}}\n    _sidcOptions = (Object.keys(_sidcOptions).length === 0 ) ? \"\" : _sidcOptions;\n    _icon = (_sidc !== \"\") ? \"\" : _icon;\n    let _fbData = {\"layer\": _lay,\"draggable\": _drag,\"track\":_track,\"speed\":_speed,\"alt\":_alt,\"lat\":_lat,\"lon\":_lon,\"icon\":_icon,\"iconSize\": _size, \"iconColor\":_color,\"tooltip\":_tool,\"label\":_label,\"SIDC\":_sidc,\"options\":_sidcOptions};\n    for (let key in _fbData) {if (_fbData[key] === \"\") {delete _fbData[key];}}\n    document.getElementById(\"payload\").innerHTML = JSON.stringify({\"name\" :_name, ..._fbData},null,2);\n    feedback(_name,_fbData,\"addObject\",false);'\n    style='width: 100% !important;'>Add New Object</button></td></tr>\n</table>",
         "output": "str",
-        "x": 750,
-        "y": 820,
+        "x": 670,
+        "y": 920,
         "wires": [
             [
                 "f83930ff.b21488"
@@ -724,8 +709,8 @@
         "drop": true,
         "allowrate": true,
         "outputs": 1,
-        "x": 790,
-        "y": 680,
+        "x": 710,
+        "y": 780,
         "wires": [
             [
                 "f2bc3916dc12ca60"
@@ -751,12 +736,27 @@
         "from": "",
         "to": "",
         "reg": false,
-        "x": 670,
-        "y": 680,
+        "x": 590,
+        "y": 780,
         "wires": [
             [
                 "8923e313189793d4"
             ]
         ]
+    },
+    {
+        "id": "be0f2591062868c9",
+        "type": "worldmap in",
+        "z": "f6f2187d.f17ca8",
+        "name": "",
+        "path": "/worldmap",
+        "events": "connect,disconnect,point,layer,bounds,files,draw,other",
+        "x": 60,
+        "y": 1000,
+        "wires": [
+            [
+                "9a57374d6e27c511"
+            ]
+        ]
     }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "5.1.1",
+    "version": "5.1.2",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "@turf/bezier-spline": "~7.2.0",

package/worldmap/worldmap.js

@@ -253,9 +253,10 @@ var readFile = function(file) {
         file.type.indexOf('kmz') === -1 &&
         file.type.indexOf('json') === -1 &&
         file.type.indexOf('image/jpeg') === -1 &&
+        file.type.indexOf('image/webp') === -1 &&
         file.type.indexOf('image/png') === -1 &&
         file.type.indexOf('image/tiff') === -1) {
-        console.log('File is not text, kml, kmz, jpeg, png, or json', file.type, file);
+        console.log('File is not text, kml, kmz, jpeg, png, webp, or json', file.type, file);
         return;
     }
 
@@ -2359,17 +2360,19 @@ function setMarker(data) {
     if (data.hasOwnProperty("greatcircle")) { delete data.greatcircle; }
 
     // then any remaining properties to the info box
+    var longline = 0;
     if (data.popup) { words = data.popup; }
     else {
         words += '<table>';
         for (var i in data) {
             if ((i != "name") && (i != "length") && (i != "clickable")) {
                 if (typeof data[i] === "object") {
-                    words += '<tr><td>'+ i +'</td><td>' + JSON.stringify(data[i]) + '</td></tr>';
+                    words += '<tr><td valign="top">'+ i +'</td><td>' + JSON.stringify(data[i]) + '</td></tr>';
                 }
                 else {
                     // words += i +" : "+data[i]+"<br/>";
-                    words += '<tr><td>'+ i +'</td><td>' + data[i] + '</td></tr>';
+                    if (data[i].length > longline) { longline = data[i].length; }
+                    words += '<tr><td valign="top">'+ i +'</td><td>' + data[i] + '</td></tr>';
                 }
             }
         }
@@ -2379,6 +2382,7 @@ function setMarker(data) {
     words = "<b>"+data["name"]+"</b><br/>" + words.replace(/\${name}/g,data["name"]); //"<button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
     var wopt = {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200};
     if (words.indexOf('<video ') >=0 || words.indexOf('<img ') >=0 ) { wopt.maxWidth="640"; } // make popup wider if it has an image or video
+    if (longline > 100) { wopt.minWidth="640"; } // make popup wider if it has a long line
     if (!data.hasOwnProperty("clickable") && data.clickable != false) {
         marker.bindPopup(words, wopt);
         marker._popup.dname = data["name"];

package/worldmap.js

@@ -8,7 +8,7 @@ module.exports = function(RED) {
     var compression = require("compression");
     var sockjs = require('sockjs');
     var sockets = {};
-    RED.log.info("Worldmap version " + require('./package.json').version );
+    RED.log.info("Worldmap version: " + require('./package.json').version );
     // add the cgi module for serving local maps.... only if mapserv exists
     if (fs.existsSync((__dirname + '/mapserv'))) {
         RED.httpNode.use("/cgi-bin/mapserv", require('cgi')(__dirname + '/mapserv'));