148 lines
6.3 KiB
HTML
148 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright 2015, 2016 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="Mapsurfer">Mapsurfer</option>
|
|
<option value="MapQuest OSM">MapQuest OSM</option>
|
|
<option value="Nat Geo">National Geographic</option>
|
|
<option value="UK OS Opendata">UK OS Opendata</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-cluster"><i class="fa fa-gears"></i> Cluster at</label>
|
|
zoom levels less than <input type="text" id="node-input-cluster" placeholder="10 (0-19)" style="width:60px;">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-maxage"><i class="fa fa-timer"></i> Max age</label>
|
|
Remove markers after <input type="text" id="node-input-maxage" style="width:60px;"> seconds
|
|
</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">
|
|
<p>Plots "things" on a web map. Needs an internet connection.</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="http://fortawesome.github.io/Font-Awesome/icons/" target="_new">font awesome</a> icon name</li>
|
|
<li><code>iconColor</code> : standard CSS color name or #rrggbb hex value.</li>
|
|
<li><code>photoUrl</code> : adds an image pointed at by the url to the popup box.</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 icon popup text box as extra information.</p>
|
|
<p>Icons of type <i>plane</i>, <i>ship</i> or <i>car</i> will use built in SVG icons that align to the
|
|
<code>bearing</code> value.</p>
|
|
<p>There are some <a href="https://www.npmjs.com/package/node-red-contrib-web-worldmap" target="_new">extra commands</a>
|
|
for drawing <b>lines</b> and <b>areas</b>, and to <b>add layers</b> and to <b>control</b> the map remotely.</p>
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
RED.keyboard.add("*",/* w */ 87,{ctrl:true, shift:true},function() { window.open(document.location.protocol+"//"+document.location.host+RED.settings.httpNodeRoot+"/worldmap") });
|
|
RED.nodes.registerType('worldmap',{
|
|
category: 'location',
|
|
color:"darksalmon",
|
|
defaults: {
|
|
lat: {value:""},
|
|
lon: {value:""},
|
|
zoom: {value:""},
|
|
layer: {value:""},
|
|
cluster: {value:""},
|
|
maxage: {value:""},
|
|
name: {value:""}
|
|
},
|
|
inputs:1,
|
|
outputs:0,
|
|
icon: "white-globe.png",
|
|
align: "right",
|
|
label: function() {
|
|
return this.name||"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)+'/worldmap).';
|
|
},
|
|
oneditprepare: function() {
|
|
$( "#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-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 events from a worldmap web page.</p>
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
RED.nodes.registerType('worldmap in',{
|
|
category: 'location',
|
|
color:"darksalmon",
|
|
defaults: {
|
|
name: {value:""}
|
|
},
|
|
inputs:0,
|
|
outputs:1,
|
|
icon: "white-globe.png",
|
|
label: function() {
|
|
return this.name||"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)+'/worldmap).';
|
|
}
|
|
});
|
|
</script>
|