npm - node-red-contrib-web-worldmap - Versions diffs - 2.15.6 → 2.16.1 - Mend

node-red-contrib-web-worldmap 2.15.6 → 2.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,7 +1,9 @@
 ### Change Log for Node-RED Worldmap
- - v2.15.6 - Tidy up geoJson handling a bit more.
- - v2.15.5 - Fix SDIC icons to accept unicoded icons as labels.
+ - v2.16.0 - Allow specifying custom base map server.
+ - v2.15.8 - Adjust ui check timing for UI worldmap.
+ - v2.15.7 - Tidy up geoJson handling a bit more.
+ - v2.15.5 - Fix SIDC icons to accept unicoded icons as labels.
  - v2.15.4 - Let clear heatmap command do what it says.
  - v2.15.3 - Fix panit command to work, try to use alt units, popup alignments.
  - v2.15.0 - let speed be text and specify units if required (kt,kn,knots,mph,kmh,kph) default m/s.

package/README.md CHANGED Viewed

@@ -11,8 +11,10 @@ map web page for plotting "things" on.
 ### Updates
-- v2.15.6 - Tidy up geoJson handling a bit more.
-- v2.15.5 - Fix SDIC icons to accept unicoded icons as labels.
+- v2.16.0 - Allow specifying custom base map server.
+- v2.15.8 - Adjust ui check timing for UI worldmap.
+- v2.15.7 - Tidy up geoJson handling a bit more.
+- v2.15.5 - Fix SIDC icons to accept unicoded icons as labels.
 - v2.15.4 - Let clear heatmap command do what it says.
 - v2.15.3 - Fix panit command to work, try to use alt units, popup alignments.
 - v2.15.0 - let speed be text and specify units if required (kt,kn,knots,mph,kmh,kph) default m/s.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.15.6",
+    "version": "2.16.1",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",
@@ -32,7 +32,7 @@
     },
     "author": {
         "name": "Dave Conway-Jones",
-        "email": "ceejay@vnet.ibm.com",
+        "email": "dceejay@gmail.com",
         "url": "http://nodered.org"
     },
     "contributors": [

package/worldmap/worldmap.js CHANGED Viewed

@@ -662,7 +662,7 @@ map.on('moveend', function() {
 var addmenu = "<b>Add marker</b><br><input type='text' id='rinput' autofocus onkeydown='if (event.keyCode == 13) addThing();' placeholder='name (,icon, layer, colour, heading)'/>";
 var rightmenuMap = L.popup({keepInView:true, minWidth:250}).setContent(addmenu);
-var rclk;
+var rclk = {};
 var hiderightclick = false;
 var addThing = function() {
     var thing = document.getElementById('rinput').value;
@@ -697,7 +697,7 @@ var feedback = function(n,v,a,c) {
     }
     else {
         if (n === undefined) { n = "map"; }
-        ws.send(JSON.stringify({action:a||"feedback", name:n, value:v, lat:rclk.lat, lon:rclk.lng,}));
+        ws.send(JSON.stringify({action:a||"feedback", name:n, value:v, lat:rclk.lat, lon:rclk.lng}));
     }
     if (c === true) { map.closePopup(); }
 }
@@ -2532,7 +2532,6 @@ function doGeojson(n,g,l,o) {
                 l.bindPopup('<pre style="overflow-x: scroll">'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
             }
         }
         if (o && o.hasOwnProperty("clickable") && o.clickable === true) {
             l.on('click', function (e) {
                 ws.send(JSON.stringify({action:"clickgeo",name:n,type:f.type,properties:f.properties,geometry:f.geometry}));

package/worldmap.html CHANGED Viewed

@@ -1,20 +1,4 @@
 <!DOCTYPE html>
-<!--
-  Copyright 2015, 2021 IBM Corp.
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-  http://www.apache.org/licenses/LICENSE-2.0
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
--->
 <script type="text/html" data-template-name="worldmap">
 <div class="form-row">
     <table border="0" width="96%">
@@ -28,7 +12,7 @@
 </div>
 <div class="form-row">
     <label for="node-input-layer"><i class="fa fa-map"></i> Base map</label>
-    <select id="node-input-layer">
+    <select id="node-input-layer" style="width:70%;">
         <option value="OSM grey">OpenStreetMap Greyscale</option>
         <option value="OSM">OpenStreetMap</option>
         <option value="Esri">ESRI Streetmap</option>
@@ -42,8 +26,20 @@
         <option value="Hike Bike">Hike Bike OSM</option>
         <option value="Terrain">Terrain</option>
         <option value="Watercolor">Stamen Watercolor</option>
+        <option value="Custom">Custom Map Provider</option>
     </select>
 </div>
+<div class="form-row" id="customMap">
+    <label for="node-input-mapname">&nbsp;&nbsp;&nbsp;Map name</label>
+    <input type="text" id="node-input-mapname" placeholder="name for Layer Menu"><br/>
+    <label for="node-input-mapurl">&nbsp;&nbsp;&nbsp;Map URL</label>
+    <input type="text" id="node-input-mapurl" placeholder="URL"><br/>
+    <label for="node-input-mapopt">&nbsp;&nbsp;&nbsp;Map options</label>
+    <input type="text" id="node-input-mapopt" placeholder="options (Leaflet JSON string)"><br/>
+    <label for="node-input-mapwms">&nbsp;&nbsp;&nbsp;</label>
+    <input type="checkbox" id="node-input-mapwms" style="display:inline-block; width:20px; vertical-align:baseline;">
+    Map server uses WMS
+</div>
 <div class="form-row">
     <label for="node-input-cluster"><i class="fa fa-dot-circle-o"></i>Cluster when</label>
     zoom level is less than <input type="text" id="node-input-cluster" placeholder="0 (0,off - 19)" style="width:100px;">
@@ -90,13 +86,13 @@
 </div>
 <div class="form-row">
     <label for="node-input-coords"><i class="fa fa-compass"></i> Co-ordinates</label>
-    <select id="node-input-coords" style="width:95px;">
+    <select id="node-input-coords" style="width:101px;">
         <option value="none">Not shown</option>
         <option value="deg">Degrees</option>
         <option value="dms">D.M.S</option>
     </select>
     <i class="fa fa-th" style="margin-left:22px;"></i> Graticule
-    <select id="node-input-showgrid" style="width:95px;">
+    <select id="node-input-showgrid" style="width:101px;">
         <option value="false">Not shown</option>
         <option value="true">Visible</option>
     </select>
@@ -114,8 +110,8 @@
     <label for="node-input-name"><i class="fa fa-file"></i> Name</label>
     <input type="text" id="node-input-name" placeholder="name">
 </div>
-<div class="form-tips">Set <i>Cluster when</i> to 0 to disable clustering of points.<br/>If <i>Path</i> is left empty,
-then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the map in a new tab.</div>
+<div class="form-tips">Set <i>Cluster when</i> to 0 to disable clustering of points.<br/>
+If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the map in a new tab.</div>
 </script>
 <script type="text/html" data-help-name="worldmap">
@@ -193,8 +189,20 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
         <option value="Hike Bike">Hike Bike OSM</option>
         <option value="Terrain">Terrain</option>
         <option value="Watercolor">Stamen Watercolor</option>
+        <option value="Custom">Custom Map Provider</option>
     </select>
 </div>
+<div class="form-row" id="customMap">
+    <label for="node-input-mapname">&nbsp;&nbsp;&nbsp;Map name</label>
+    <input type="text" id="node-input-mapname" placeholder="name for Layer Menu"><br/>
+    <label for="node-input-mapurl">&nbsp;&nbsp;&nbsp;Map URL</label>
+    <input type="text" id="node-input-mapurl" placeholder="URL"><br/>
+    <label for="node-input-mapopt">&nbsp;&nbsp;&nbsp;Map options</label>
+    <input type="text" id="node-input-mapopt" placeholder="options (Leaflet JSON string)"><br/>
+    <label for="node-input-mapwms">&nbsp;&nbsp;&nbsp;</label>
+    <input type="checkbox" id="node-input-mapwms" style="display:inline-block; width:20px; vertical-align:baseline;">
+    Map server uses WMS
+</div>
 <div class="form-row">
     <label for="node-input-cluster"><i class="fa fa-dot-circle-o"></i>Cluster when</label>
     zoom level is less than <input type="text" id="node-input-cluster" placeholder="0 (0,off - 19)" style="width:100px;">
@@ -241,13 +249,13 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
 </div>
 <div class="form-row">
     <label for="node-input-coords"><i class="fa fa-compass"></i> Co-ordinates</label>
-    <select id="node-input-coords" style="width:95px;">
+    <select id="node-input-coords" style="width:101px;">
         <option value="none">Not shown</option>
         <option value="deg">Degrees</option>
         <option value="dms">D.M.S</option>
     </select>
     <i class="fa fa-th" style="margin-left:22px;"></i> Graticule
-    <select id="node-input-showgrid" style="width:95px;">
+    <select id="node-input-showgrid" style="width:101px;">
         <option value="false">Not shown</option>
         <option value="true">Visible</option>
     </select>
@@ -265,8 +273,8 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
     <label for="node-input-name"><i class="fa fa-file"></i> Name</label>
     <input type="text" id="node-input-name" placeholder="name">
 </div>
-<div class="form-tips">Set <i>Cluster when</i> to 0 to disable clustering of points.<br/>If <i>Path</i> is left empty,
-then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the map in a new tab.</div>
+<div class="form-tips">Set <i>Cluster when</i> to 0 to disable clustering of points.<br/>
+If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the map in a new tab.</div>
 </script>
 <script type="text/html" data-help-name="ui_worldmap">
@@ -336,7 +344,11 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
             coords: {value:"false"},
             showgrid: {value:"false"},
             allowFileDrop: {value:"false"},
-            path: {value:"/worldmap"}
+            path: {value:"/worldmap"},
+            mapname: {value:""},
+            mapurl: {value:""},
+            mapopt: {value:"", validate:function(v) {try{ v.length===0 || JSON.parse(v); return true;} catch(e) {return false;}}},
+            mapwms: {value:false}
         },
         inputs:1,
         outputs:0,
@@ -366,6 +378,13 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
             }
             $("#node-input-zoom").spinner({min:0, max:18});
             $("#node-input-cluster").spinner({min:0, max:19});
+            $("#node-input-layer").on("change",function() {
+                if ($("#node-input-layer").val() === "Custom") {
+                    $("#customMap").show();
+                } else {
+                    $("#customMap").hide();
+                }
+            });
         }
     });
@@ -405,7 +424,11 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
                     coords: {value:"false"},
                     showgrid: {value:"false"},
                     allowFileDrop: {value:"false"},
-                    path: {value:"/worldmap"}
+                    path: {value:"/worldmap"},
+                    mapname: {value:""},
+                    mapurl: {value:""},
+                    mapopt: {value:""},
+                    mapwms: {value:false}
                 },
                 inputs:1,
                 outputs:0,
@@ -438,6 +461,13 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
                     }
                     $("#node-input-zoom").spinner({min:0, max:18});
                     $("#node-input-cluster").spinner({min:0, max:19});
+                    $("#node-input-layer").on("change",function() {
+                        if ($("#node-input-layer").val() === "Custom") {
+                            $("#customMap").show();
+                        } else {
+                            $("#customMap").hide();
+                        }
+                    });
                 }
             });
         }

package/worldmap.js CHANGED Viewed

@@ -1,19 +1,4 @@
 /* eslint-disable no-inner-declarations */
-/**
- * Copyright 2015, 2021 IBM Corp.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- **/
 module.exports = function(RED) {
     "use strict";
@@ -37,7 +22,6 @@ module.exports = function(RED) {
         node.layer = n.layer || "";
         node.cluster = n.cluster || "";
         node.maxage = n.maxage || "";
-        if (n.maxage == 0) { node.maxage = "0"; }
         node.showmenu = n.usermenu || "show";
         node.layers = n.layers || "show";
         node.panlock = n.panlock || "false";
@@ -48,6 +32,13 @@ module.exports = function(RED) {
         node.showgrid = n.showgrid || "false";
         node.allowFileDrop = n.allowFileDrop || "false";
         node.path = n.path || "/worldmap";
+        node.mapname = n.mapname || "";
+        node.mapurl = n.mapurl || "";
+        node.mapopt = n.mapopt || "";
+        node.mapwms = n.mapwms || false;
+        try { node.mapopt2 = JSON.parse(node.mapopt); }
+        catch(e) { node.mapopt2 = null; }
         if (node.path.charAt(0) != "/") { node.path = "/" + node.path; }
         if (!sockets[node.path]) {
             var libPath = path.posix.join(RED.settings.httpNodeRoot, node.path, 'leaflet', 'sockjs.min.js');
@@ -69,11 +60,22 @@ module.exports = function(RED) {
             client.on('data', function(message) {
                 message = JSON.parse(message);
                 if (message.action === "connected") {
+                    var m = {};
                     var c = {init:true};
+                    if (node.layer && node.layer == "Custom") {
+                        m.name = node.mapname;
+                        m.url = node.mapurl;
+                        m.opt = node.mapopt2;
+                        if (node.mapwms === true) { m.wms = true; }
+                        client.write(JSON.stringify({command:{map:m}}));
+                        c.layer = m.name;
+                    }
+                    else {
+                        if (node.layer && node.layer.length > 0) { c.layer = node.layer; }
+                    }
                     if (node.lat && node.lat.length > 0) { c.lat = node.lat; }
                     if (node.lon && node.lon.length > 0) { c.lon = node.lon; }
                     if (node.zoom && node.zoom.length > 0) { c.zoom = node.zoom; }
-                    if (node.layer && node.layer.length > 0) { c.layer = node.layer; }
                     if (node.cluster && node.cluster.length > 0) { c.cluster = node.cluster; }
                     if (node.maxage && node.maxage.length > 0) { c.maxage = node.maxage; }
                     c.showmenu = node.showmenu;
@@ -127,7 +129,6 @@ module.exports = function(RED) {
         });
         sockets[node.path].on('connection', callback);
     }
     var WorldMap = function(n) {
         worldMap(this, n);
     }
@@ -161,54 +162,54 @@ module.exports = function(RED) {
     }
     var ui = undefined;
+    try {
+        ui = RED.require("node-red-dashboard")(RED);
+    }
+    catch(e) {
+        RED.log.info("Node-RED Dashboard not found - ui_worldmap not installed.");
+    }
     setTimeout( function() {
-        try {
-            ui = RED.require("node-red-dashboard")(RED);
-            if (ui) {
-                function UIWorldMap(config) {
-                    try {
-                        var node = this;
-                        worldMap(node, config);
-                        var done = null;
-                        if (checkConfig(node, config)) {
-                            var html = HTML(ui, config);
-                            done = ui.addWidget({
-                                node: node,
-                                order: config.order,
-                                group: config.group,
-                                width: config.width,
-                                height: config.height,
-                                format: html,
-                                templateScope: "local",
-                                emitOnlyNewValues: false,
-                                forwardInputMessages: false,
-                                storeFrontEndInputAsState: false,
-                                convertBack: function (value) {
-                                    return value;
-                                },
-                                beforeEmit: function(msg, value) {
-                                    return { msg: { items: value } };
-                                },
-                                beforeSend: function (msg, orig) {
-                                    if (orig) { return orig.msg; }
-                                },
-                                initController: function($scope, events) {
-                                }
-                            });
-                        }
-                    }
-                    catch (e) {
-                        console.log(e);
+        if (ui) {
+            function UIWorldMap(config) {
+                try {
+                    var node = this;
+                    worldMap(node, config);
+                    var done = null;
+                    if (checkConfig(node, config)) {
+                        var html = HTML(ui, config);
+                        done = ui.addWidget({
+                            node: node,
+                            order: config.order,
+                            group: config.group,
+                            width: config.width,
+                            height: config.height,
+                            format: html,
+                            templateScope: "local",
+                            emitOnlyNewValues: false,
+                            forwardInputMessages: false,
+                            storeFrontEndInputAsState: false,
+                            convertBack: function (value) {
+                                return value;
+                            },
+                            beforeEmit: function(msg, value) {
+                                return { msg: { items: value } };
+                            },
+                            beforeSend: function (msg, orig) {
+                                if (orig) { return orig.msg; }
+                            },
+                            initController: function($scope, events) {
+                            }
+                        });
                     }
-                    node.on("close", function() {
-                        if (done) { done(); }
-                    });
                 }
-                setImmediate(function() { RED.nodes.registerType("ui_worldmap", UIWorldMap) });
+                catch (e) {
+                    console.log(e);
+                }
+                node.on("close", function() {
+                    if (done) { done(); }
+                });
             }
-        }
-        catch(e) {
-            RED.log.info("Node-RED Dashboard not found - ui_worldmap not installed.");
+            setImmediate(function() { RED.nodes.registerType("ui_worldmap", UIWorldMap) });
         }
     }, 250);
@@ -503,7 +504,6 @@ module.exports = function(RED) {
     }
     RED.nodes.registerType("worldmap-hull",WorldMapHull);
     RED.httpNode.get("/.ui-worldmap", function(req, res) {
         res.send(ui ? "true": "false");
     });