dmxm/node-red-contrib-jwht-map
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Let user specify custom map by default

Browse Source
This commit is contained in:
Dave Conway-Jones 2021-09-24 16:22:35 +01:00
parent 5eb3985ad1
commit c94545d648
No known key found for this signature in database
GPG Key ID: 88BA2B8A411BE9FF
5 changed files with 80 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -1,5 +1,6 @@
### Change Log for Node-RED Worldmap ### Change Log for Node-RED Worldmap
- v2.16.0 - Allow specifying custom base map server.
- v2.15.8 - Adjust ui check timing for UI worldmap. - v2.15.8 - Adjust ui check timing for UI worldmap.
- v2.15.7 - Tidy up geoJson handling a bit more. - v2.15.7 - Tidy up geoJson handling a bit more.
- v2.15.5 - Fix SIDC icons to accept unicoded icons as labels. - v2.15.5 - Fix SIDC icons to accept unicoded icons as labels.

1
README.md
View File

@ -11,6 +11,7 @@ map web page for plotting "things" on.
### Updates ### Updates
- v2.16.0 - Allow specifying custom base map server.
- v2.15.8 - Adjust ui check timing for UI worldmap. - v2.15.8 - Adjust ui check timing for UI worldmap.
- v2.15.7 - Tidy up geoJson handling a bit more. - v2.15.7 - Tidy up geoJson handling a bit more.
- v2.15.5 - Fix SIDC icons to accept unicoded icons as labels. - v2.15.5 - Fix SIDC icons to accept unicoded icons as labels.

4
package.json
View File

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

84
worldmap.html
View File

@ -1,20 +1,4 @@
<!DOCTYPE html> <!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"> <script type="text/html" data-template-name="worldmap">
<div class="form-row"> <div class="form-row">
<table border="0" width="96%"> <table border="0" width="96%">
@ -28,7 +12,7 @@
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-layer"><i class="fa fa-map"></i> Base map</label> <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 grey">OpenStreetMap Greyscale</option>
<option value="OSM">OpenStreetMap</option> <option value="OSM">OpenStreetMap</option>
<option value="Esri">ESRI Streetmap</option> <option value="Esri">ESRI Streetmap</option>
@ -42,8 +26,20 @@
<option value="Hike Bike">Hike Bike OSM</option> <option value="Hike Bike">Hike Bike OSM</option>
<option value="Terrain">Terrain</option> <option value="Terrain">Terrain</option>
<option value="Watercolor">Stamen Watercolor</option> <option value="Watercolor">Stamen Watercolor</option>
<option value="Custom">Custom Map Provider</option>
</select> </select>
</div> </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"> <div class="form-row">
<label for="node-input-cluster"><i class="fa fa-dot-circle-o"></i>Cluster when</label> <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;"> 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>
<div class="form-row"> <div class="form-row">
<label for="node-input-coords"><i class="fa fa-compass"></i> Co-ordinates</label> <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="none">Not shown</option>
<option value="deg">Degrees</option> <option value="deg">Degrees</option>
<option value="dms">D.M.S</option> <option value="dms">D.M.S</option>
</select> </select>
<i class="fa fa-th" style="margin-left:22px;"></i> Graticule <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="false">Not shown</option>
<option value="true">Visible</option> <option value="true">Visible</option>
</select> </select>
@ -114,8 +110,8 @@
<label for="node-input-name"><i class="fa fa-file"></i> Name</label> <label for="node-input-name"><i class="fa fa-file"></i> Name</label>
<input type="text" id="node-input-name" placeholder="name"> <input type="text" id="node-input-name" placeholder="name">
</div> </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, <div class="form-tips">Set <i>Cluster when</i> to 0 to disable clustering of points.<br/>
then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the map in a new tab.</div> 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>
<script type="text/html" data-help-name="worldmap"> <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="Hike Bike">Hike Bike OSM</option>
<option value="Terrain">Terrain</option> <option value="Terrain">Terrain</option>
<option value="Watercolor">Stamen Watercolor</option> <option value="Watercolor">Stamen Watercolor</option>
<option value="Custom">Custom Map Provider</option>
</select> </select>
</div> </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"> <div class="form-row">
<label for="node-input-cluster"><i class="fa fa-dot-circle-o"></i>Cluster when</label> <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;"> 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>
<div class="form-row"> <div class="form-row">
<label for="node-input-coords"><i class="fa fa-compass"></i> Co-ordinates</label> <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="none">Not shown</option>
<option value="deg">Degrees</option> <option value="deg">Degrees</option>
<option value="dms">D.M.S</option> <option value="dms">D.M.S</option>
</select> </select>
<i class="fa fa-th" style="margin-left:22px;"></i> Graticule <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="false">Not shown</option>
<option value="true">Visible</option> <option value="true">Visible</option>
</select> </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> <label for="node-input-name"><i class="fa fa-file"></i> Name</label>
<input type="text" id="node-input-name" placeholder="name"> <input type="text" id="node-input-name" placeholder="name">
</div> </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, <div class="form-tips">Set <i>Cluster when</i> to 0 to disable clustering of points.<br/>
then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the map in a new tab.</div> 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>
<script type="text/html" data-help-name="ui_worldmap"> <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"}, coords: {value:"false"},
showgrid: {value:"false"}, showgrid: {value:"false"},
allowFileDrop: {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, inputs:1,
outputs:0, 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-zoom").spinner({min:0, max:18});
$("#node-input-cluster").spinner({min:0, max:19}); $("#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"}, coords: {value:"false"},
showgrid: {value:"false"}, showgrid: {value:"false"},
allowFileDrop: {value:"false"}, allowFileDrop: {value:"false"},
path: {value:"/worldmap"} path: {value:"/worldmap"},
mapname: {value:""},
mapurl: {value:""},
mapopt: {value:""},
mapwms: {value:false}
}, },
inputs:1, inputs:1,
outputs:0, 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-zoom").spinner({min:0, max:18});
$("#node-input-cluster").spinner({min:0, max:19}); $("#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();
}
});
} }
}); });
} }

35
worldmap.js
View File

@ -1,19 +1,4 @@
/* eslint-disable no-inner-declarations */ /* 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) { module.exports = function(RED) {
"use strict"; "use strict";
@ -47,6 +32,13 @@ module.exports = function(RED) {
node.showgrid = n.showgrid || "false"; node.showgrid = n.showgrid || "false";
node.allowFileDrop = n.allowFileDrop || "false"; node.allowFileDrop = n.allowFileDrop || "false";
node.path = n.path || "/worldmap"; 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 (node.path.charAt(0) != "/") { node.path = "/" + node.path; }
if (!sockets[node.path]) { if (!sockets[node.path]) {
var libPath = path.posix.join(RED.settings.httpNodeRoot, node.path, 'leaflet', 'sockjs.min.js'); var libPath = path.posix.join(RED.settings.httpNodeRoot, node.path, 'leaflet', 'sockjs.min.js');
@ -68,11 +60,22 @@ module.exports = function(RED) {
client.on('data', function(message) { client.on('data', function(message) {
message = JSON.parse(message); message = JSON.parse(message);
if (message.action === "connected") { if (message.action === "connected") {
var m = {};
var c = {init:true}; 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.lat && node.lat.length > 0) { c.lat = node.lat; }
if (node.lon && node.lon.length > 0) { c.lon = node.lon; } if (node.lon && node.lon.length > 0) { c.lon = node.lon; }
if (node.zoom && node.zoom.length > 0) { c.zoom = node.zoom; } 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.cluster && node.cluster.length > 0) { c.cluster = node.cluster; }
if (node.maxage && node.maxage.length > 0) { c.maxage = node.maxage; } if (node.maxage && node.maxage.length > 0) { c.maxage = node.maxage; }
c.showmenu = node.showmenu; c.showmenu = node.showmenu;