fix display of longer line popups

Author: dceejay

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.

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.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",

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'));

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"];