316 lines
15 KiB
HTML
316 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright 2015, 2019 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/x-red" data-template-name="worldmap">
|
|
<div class="form-row">
|
|
<table border="0" width="96%">
|
|
<tr><td width="100px"><i class="fa fa-globe"></i> Start<td>Latitude</td><td>Longitude</td><td width="60px">Zoom</td></tr>
|
|
<tr><td> </td>
|
|
<td><input type="text" id="node-input-lat" style="width:90px;"></td>
|
|
<td><input type="text" id="node-input-lon" style="width:90px;"></td>
|
|
<td><input type="text" id="node-input-zoom" style="width:60px;" placeholder="1 - 18"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-layer"><i class="fa fa-map"></i> Base map</label>
|
|
<select id="node-input-layer">
|
|
<option value="OSM grey">OpenStreetMap Greyscale</option>
|
|
<option value="OSM">OpenStreetMap</option>
|
|
<option value="Esri">ESRI Streetmap</option>
|
|
<option value="Esri Satellite">ESRI Satellite</option>
|
|
<option value="Esri Terrain">ESRI Terrain</option>
|
|
<option value="Esri Ocean">ESRI Ocean</option>
|
|
<option value="Nat Geo">National Geographic</option>
|
|
<option value="UK OS Opendata">UK OS Opendata</option>
|
|
<!-- <option value="Hike Bike">Hike Bike OSM</option> -->
|
|
<option value="Terrain">Terrain</option>
|
|
<option value="Watercolor">Stamen Watercolor</option>
|
|
</select>
|
|
</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;">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-maxage"><i class="fa fa-clock-o"></i> Max age</label>
|
|
Remove markers after <input type="text" id="node-input-maxage" placeholder="600" style="width:67px;"> seconds
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-usermenu"><i class="fa fa-user"></i> User menu</label>
|
|
<select id="node-input-usermenu" style="width:64px;">
|
|
<option value="show">Show</option>
|
|
<option value="hide">Hide</option>
|
|
</select>
|
|
<i class="fa fa-bars" style="margin-left:30px;"></i> Layer menu
|
|
<select id="node-input-layers" style="width:64px;">
|
|
<option value="show">Show</option>
|
|
<option value="hide">Hide</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-panlock"><i class="fa fa-lock"></i> Lock map</label>
|
|
<select id="node-input-panlock" style="width:64px;">
|
|
<option value="false">False</option>
|
|
<option value="true">True</option>
|
|
</select>
|
|
<i class="fa fa-lock" style="margin-left:30px;"></i> Lock zoom
|
|
<select id="node-input-zoomlock" style="width:64px;">
|
|
<option value="false">False</option>
|
|
<option value="true">True</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-panit"><i class="fa fa-arrows-alt"></i> Auto-pan</label>
|
|
<select id="node-input-panit" style="width:72px;">
|
|
<option value="true">Enable</option>
|
|
<option value="false">Disable</option>
|
|
</select>
|
|
<i class="fa fa-hand-o-right" style="margin-left:22px;"></i> Right click
|
|
<select id="node-input-hiderightclick" style="width:72px;">
|
|
<option value="false">Enable</option>
|
|
<option value="true">Disable</option>
|
|
</select>
|
|
</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;">
|
|
<option value="none">Not shown</option>
|
|
<option value="deg">Degrees</option>
|
|
<option value="dms">D.M.S</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-path"><i class="fa fa-globe"></i> Web Path</label>
|
|
<input type="text" id="node-input-path" placeholder="worldmap">
|
|
</div>
|
|
<div class="form-row">
|
|
<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>
|
|
</script>
|
|
|
|
<script type="text/x-red" data-help-name="worldmap">
|
|
<p>Plots "things" on a web map. Needs an internet connection.</p>
|
|
<p>It is possible to instantiate multiple worldmap nodes but each one must be given a unique
|
|
path. Worldmap-in nodes are matched to worldmap nodes by having exactly the same path.
|
|
<p>Shortcut - <code>⌘⇧m</code> - ctrl-shift-m to jump to the default Map (<tt>/worldmap</tt>).</p>
|
|
<p>The minimum <code>msg.payload</code> must contain <code>name</code>, <code>lat</code> and <code>lon</code> properties, e.g.</p>
|
|
<pre>{"name":"Joe", "lat":51, "lon":-1.05}</pre>
|
|
<p><code>name</code> must be a unique identifier.</p>
|
|
<p>Optional properties include</p>
|
|
<ul>
|
|
<li><code>layer</code> : specify a layer on the map to add marker to.</li>
|
|
<li><code>speed</code> : combined with bearing, draws a vector.</li>
|
|
<li><code>bearing</code> : combined with speed, draws a vector.</li>
|
|
<li><code>accuracy</code> : combined with bearing, draws a polygon of possible direction.</li>
|
|
<li><code>icon</code> : <a href="https://fontawesome.com/v4.7.0/icons/" target="_new">font awesome</a> icon name or <a href="https://github.com/dceejay/RedMap/blob/master/emojilist.md" target="_new">:emoji name:</a>, or url of icon image.</li>
|
|
<li><code>iconColor</code> : standard CSS color name or #rrggbb hex value.</li>
|
|
<li><code>SIDC</code> : NATO symbology code (instead of icon).</li>
|
|
<li><code>label</code> : permanent label next to marker, or</li>
|
|
<li><code>tooltip</code> : hover over text for marker. (alternative to label)</li>
|
|
<li><code>bulding</code> : OSMBuildings GeoJSON object.</li>
|
|
<li><code>ttl</code> : time to live of an individual marker before deletion.</li>
|
|
<li><code>photoUrl</code> : adds an image pointed at by the url to the popup box.</li>
|
|
<li><code>videoUrl</code> : adds an mp4 (320x240) pointed at by the url to Popup box</li>
|
|
<li><code>weblink</code> : link to an external web page.</li>
|
|
<li><code>deleted</code> : set to <i>true</i> to remove the named marker. (default false)</li>
|
|
</ul>
|
|
<p>Any other sub-properties of <code>msg.payload</code> will be added to the marker popup text box as extra information.</p>
|
|
<p>Icons of type <i>plane</i>, <i>ship</i>, <i>car</i>, <i>uav</i> or <i>arrow</i> will use built in SVG icons that align to the
|
|
<code>bearing</code> value.</p>
|
|
<p>Font Awesome (<a href="https://fontawesome.com/v4.7.0/icons/" target="_new">fa-icons 4.7</a>) can also be used, as can
|
|
NATO symbology codes (SIDC), or <a href="https://github.com/dceejay/RedMap/blob/master/emojilist.md" target="_new">:emoji name:</a>,
|
|
or the url of a small icon image (32x32)</p>
|
|
<p>See the <a href="https://www.npmjs.com/package/node-red-contrib-web-worldmap" target="_new">README</a> for further
|
|
details and examples of icons and commands for drawing <b>lines</b> and <b>areas</b>, and to <b>add layers</b> and
|
|
to <b>control</b> the map remotely, including how to use a local map server.</p>
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
var lnk = document.location.host+RED.settings.httpNodeRoot+"/worldmap";
|
|
lnk = lnk.replace(new RegExp('\/{1,}','g'),'/');
|
|
if (!RED.hasOwnProperty("actions")) {
|
|
RED.keyboard.add("*",/* m */ 77,{ctrl:true, shift:true},function() { window.open(document.location.protocol+"//"+lnk) });
|
|
}
|
|
else {
|
|
RED.keyboard.add("*","ctrl-shift-m","Show Map");
|
|
RED.actions.add("Show Map",function() { window.open(document.location.protocol+"//"+lnk) });
|
|
}
|
|
RED.nodes.registerType('worldmap',{
|
|
category: 'location',
|
|
color:"darksalmon",
|
|
defaults: {
|
|
name: {value:""},
|
|
lat: {value:""},
|
|
lon: {value:""},
|
|
zoom: {value:""},
|
|
layer: {value:""},
|
|
cluster: {value:""},
|
|
maxage: {value:""},
|
|
usermenu: {value:"show"},
|
|
layers: {value:"show"},
|
|
panit: {value:"false"},
|
|
panlock: {value:"false"},
|
|
zoomlock: {value:"false"},
|
|
hiderightclick: {value:"false"},
|
|
coords: {value: "false"},
|
|
path: {value:"/worldmap"}
|
|
},
|
|
inputs:1,
|
|
outputs:0,
|
|
icon: "white-globe.png",
|
|
align: "right",
|
|
label: function() {
|
|
return this.name||(this.path.charAt(0)==='/'?this.path.substr(1):this.path)||"world map";
|
|
},
|
|
labelStyle: function() {
|
|
return this.name?"node_label_italic":"";
|
|
},
|
|
info: function() {
|
|
return 'The map can be found [here]('+RED.settings.httpNodeRoot.slice(0,-1)+this.path+').';
|
|
},
|
|
oneditprepare: function() {
|
|
if ($("#node-input-path").val() === undefined) {
|
|
$("#node-input-path").val("worldmap");
|
|
this.path = "worldmap";
|
|
}
|
|
if ($("#node-input-hiderightclick").val() === null) {
|
|
$("#node-input-hiderightclick").val("false");
|
|
this.hiderightclick = "false";
|
|
}
|
|
if ($("#node-input-coords").val() === null) {
|
|
$("#node-input-coords").val("none");
|
|
this.coords = "none";
|
|
}
|
|
$("#node-input-zoom").spinner({min:0, max:18});
|
|
$("#node-input-cluster").spinner({min:0, max:19});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script type="text/x-red" data-template-name="worldmap in">
|
|
<div class="form-row">
|
|
<label for="node-input-path"><i class="fa fa-globe"></i> Web Path</label>
|
|
<input type="text" id="node-input-path" placeholder="worldmap">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-file"></i> Name</label>
|
|
<input type="text" id="node-input-name" placeholder="name">
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-red" data-help-name="worldmap in">
|
|
<p>Receives actions from a worldmap web page.</p>
|
|
<p>Actions include
|
|
<ul><li><b>connected</b> - when a new client connects
|
|
<li><b>disconnect</b> - when a client disconnects
|
|
<li><b>click</b> - when a marker is clicked</li>
|
|
<li><b>move</b> - when a marker is dragged/moved</li>
|
|
<li><b>delete</b> - when a point or shape is deleted</li>
|
|
<li><b>point</b> - when a point is added manually using right-click</li>
|
|
<li><b>draw</b> - when a shape is added manually to the drawing layer</li>
|
|
<li><b>layer</b> - when a base layer is changed</li>
|
|
<li><b>addlayer</b> - when an overlay is added to the map</li>
|
|
<li><b>dellayer</b> - when an overlay is removed from the map</li>
|
|
<li><b>feedback</b> - when a user calls the feedback() function in the browser</li>
|
|
</ul>
|
|
Use the debug node to see the complete payload of the msg returned.</p>
|
|
<p>All actions also include a <code>msg._sessionid</code> property that indicates which client session the
|
|
action came from. Any outgoing msg that includes this property will only go back to that session.</p>
|
|
<p>Further information can be found in the
|
|
<a href="https://github.com/dceejay/RedMap/blob/master/README.md#events-from-the-map" target="_new">Events section</a>
|
|
of the README.</p>
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
RED.nodes.registerType('worldmap in',{
|
|
category: 'location',
|
|
color:"darksalmon",
|
|
defaults: {
|
|
name: {value:""},
|
|
path: {value:"/worldmap"}
|
|
},
|
|
inputs:0,
|
|
outputs:1,
|
|
icon: "white-globe.png",
|
|
label: function() {
|
|
return this.name||this.path.substr(1)||"world map";
|
|
},
|
|
labelStyle: function() {
|
|
return this.name?"node_label_italic":"";
|
|
},
|
|
info: function() {
|
|
return 'The map can be found [here]('+RED.settings.httpNodeRoot.slice(0,-1)+this.path+').';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<script type="text/x-red" data-template-name="worldmap-tracks">
|
|
<div class="form-row">
|
|
<label for="node-input-depth"><i class="fa fa-map-marker"></i> Number of</label>
|
|
points in track <input type="text" id="node-input-depth" style="width:50%" placeholder="number - default 20">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-layer"><i class="fa fa-map"></i> Track Layer</label>
|
|
<select id="node-input-layer">
|
|
<option value="combined">on marker layer</option>
|
|
<option value="separate">one per marker layer</option>
|
|
<option value="single">single Track layer</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-file"></i> Name</label>
|
|
<input type="text" id="node-input-name" placeholder="name">
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-red" data-help-name="worldmap-tracks">
|
|
<p>Creates tracks lines based on a specified number of previous locations.</p>
|
|
<p>The number of tracked points can be set per marker by specifying <code>msg.payload.trackpoints</code> as part of the update for a marker.</p>
|
|
<p>You can also specify the msg.payload.color, weight, opacity and dashArray properties for the track if required.</p>
|
|
<p>Holds all the points in memory, so if you have a lot of points held for a
|
|
large depth then memory usage may become excessive.</p>
|
|
<p>To delete a track send a msg.payload containing both the name of the object and
|
|
set deleted to true - for example <code>msg.payload = { "name":"Fred", "deleted":true }</code></p>
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
RED.nodes.registerType('worldmap-tracks',{
|
|
category: 'location',
|
|
color:"darksalmon",
|
|
defaults: {
|
|
name: {value:""},
|
|
depth: {value:20},
|
|
layer: {value:"combined"}
|
|
},
|
|
inputs:1,
|
|
outputs:1,
|
|
icon: "white-globe.png",
|
|
paletteLabel: "tracks",
|
|
label: function() {
|
|
return this.name||"tracks";
|
|
},
|
|
labelStyle: function() {
|
|
return this.name?"node_label_italic":"";
|
|
}
|
|
});
|
|
</script>
|