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

Merge branch 'master' into leaflet-upgrade

Browse Source
This commit is contained in:
Dave Conway-Jones 2019-04-21 18:33:12 +01:00
commit b75a7e3558
No known key found for this signature in database
GPG Key ID: 9E7F9C73F5168CD4
3 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -249,9 +249,9 @@ The **worldmap in** node can be used to receive various events from the map. Exa
{ "action": "feedback", "name": "some name", "value": "some value" } // when a user calls the feedback function - see below
There is a function available to make sending date to Node-RED easier (e.g. from inside a user defined popup), called feedback() - it takes two parameters, name and value, and can be used inside something like an input tag - `onchange='feedback(this.name,this.value)'`. Value can be a more complex object if required as long as it is serialisable.
There is a function available to make sending data to Node-RED easier (e.g. from inside a user defined popup), called feedback() - it takes two (or three) parameters, name, value, and optionally an action name (defaults to "feedback"), and can be used inside something like an input tag - `onchange='feedback(this.name,this.value)'`. Value can be a more complex object if required as long as it is serialisable.
All actions also include a `msg._sessionid` property that indicates which client session they came from. Any msg sent out that includes this property will ONLY be sent to that session - so you can target map updates to certain sessions only if required.
All actions also include a `msg._sessionid` property that indicates which client session they came from. Any msg sent out that includes this property will ONLY be sent to that session - so you can target map updates to specific sessions if required.
## Controlling the map

53
worldmap/index.html
View File

@ -17,6 +17,7 @@
<html>
<head>
<title>Node-RED map all the things</title>
<meta charset="UTF-8">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -70,7 +71,7 @@
<body onunload="if (ws) ws.close();">
<div id="topbar">
<a href="https://nodered.org"><img src="images/node-red.png" width="60px" height="24px"/></a>
<a href="https://nodered.org"><img src="images/node-red.png" width="60" height="24" alt="NRed"/></a>
<span class="topbar"> Node-RED - map all the things</span>
</div>
<div id="results">
@ -80,7 +81,7 @@
<div id="menu"><table>
<tr><td><input type='text' name='search' id='search' size='20' style="width:150px;"/>&nbsp;<span onclick='doSearch();'><i class="fa fa-search fa-lg"></i></span></td></tr>
<tr><td style="cursor:default"><i class="fa fa-spinner fa-lg fa-fw"></i> Set Max Age <input type='text' name='maxage' id='maxage' value="600" size="5" onchange='setMaxAge();'/>s</td></tr>
<tr><td style="cursor:default"><i class="fa fa-search-plus fa-lg fa-fw"></i> Cluster at zoom <<input type='text' name='setclus' id='setclus' size="2" onchange='setCluster(this.value);'/></td></tr>
<tr><td style="cursor:default"><i class="fa fa-search-plus fa-lg fa-fw"></i> Cluster at zoom &lt;<input type='text' name='setclus' id='setclus' size="2" onchange='setCluster(this.value);'/></td></tr>
<tr><td style="cursor:default"><input type='checkbox' id='panit' onclick='doPanit(this.checked);'/> Auto Pan Map</td></tr>
<tr><td style="cursor:default"><input type='checkbox' id='lockit' onclick='doLock(this.checked);'/> Lock Map</td></tr>
<tr><td style="cursor:default"><input type='checkbox' id='heatall' onclick='doHeatAll(this.checked);'/> Heatmap all layers</td></tr>
@ -110,7 +111,7 @@
<button id="exitHelp">Close</button>
</dialog>
<script language="javascript" type="text/javascript">
<script>
var startpos = [51.03, -1.379]; // Start location - somewhere in UK :-)
var startzoom = 10;
@ -176,7 +177,7 @@ var connect = function() {
};
ws.onmessage = function(e) {
var data = JSON.parse(e.data);
//console.log("DATA",typeof data,data);
//console.log("DATA" typeof data,data);
if (Array.isArray(data)) {
//console.log("ARRAY");
// map.closePopup();
@ -276,10 +277,28 @@ else {
if (!inIframe) {
// Add the fullscreen button
L.control.fullscreen().addTo(map);
// Add the locate my position button
L.easyButton( 'fa-crosshairs fa-lg', function() {
map.locate({setView:true, maxZoom:16});
}, "Locate me").addTo(map);
function onLocationFound(e) {
var radius = e.accuracy;
//L.marker(e.latlng).addTo(map).bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius, {color:"cyan", weight:4, opacity:0.8, fill:false, clickable:false}).addTo(map);
if (e.hasOwnProperty("heading")) {
var lengthAsDegrees = e.speed * 60 / 110540;
var ya = e.latlng.lat + Math.sin((90-e.heading)/180*Math.PI)*lengthAsDegrees*Math.cos(e.latlng.lng/180*Math.PI);
var xa = e.latlng.lng + Math.cos((90-e.heading)/180*Math.PI)*lengthAsDegrees;
var lla = new L.LatLng(ya,xa);
L.polygon([ e.latlng, lla ], {color:"cyan", weight:3, opacity:0.8, clickable:false}).addTo(map);
}
ws.send(JSON.stringify({action:"point", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5), point:"self", bearing:e.heading, speed:(e.speed*3.6 || undefined)}));
}
function onLocationError(e) { console.log(e.message); }
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
// Add the measure/ruler button
L.Control.measureControl().addTo(map);
@ -632,8 +651,8 @@ var addThing = function() {
map.addLayer(layers[lay]);
}
var feedback = function(n,v) {
ws.send(JSON.stringify({action:"feedback", name:n, value:v}));
var feedback = function(n,v,a) {
ws.send(JSON.stringify({action:a||"feedback", name:n, value:v}));
}
// allow double right click to zoom out (if enabled)
@ -664,24 +683,6 @@ map.on('contextmenu', function(e) {
}
});
function onLocationFound(e) {
var radius = e.accuracy;
//L.marker(e.latlng).addTo(map).bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius, {color:"cyan", weight:4, opacity:0.8, fill:false, clickable:false}).addTo(map);
if (e.hasOwnProperty("heading")) {
var lengthAsDegrees = e.speed * 60 / 110540;
var ya = e.latlng.lat + Math.sin((90-e.heading)/180*Math.PI)*lengthAsDegrees*Math.cos(e.latlng.lng/180*Math.PI);
var xa = e.latlng.lng + Math.cos((90-e.heading)/180*Math.PI)*lengthAsDegrees;
var lla = new L.LatLng(ya,xa);
L.polygon([ e.latlng, lla ], {color:"cyan", weight:3, opacity:0.8, clickable:false}).addTo(map);
}
ws.send(JSON.stringify({action:"point", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5), point:"self", bearing:e.heading, speed:(e.speed*3.6 || undefined)}));
}
function onLocationError(e) { console.log(e.message); }
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
// Add all the base layer maps
// Use this for OSM online maps
@ -840,7 +841,7 @@ map.on('draw:created', function (e) {
var layer = e.layer;
//console.log(type, layer._latlngs);
//console.log(JSON.stringify(layer.toGeoJSON()));
ws.send(JSON.stringify({action:"draw",type:type, points:layer._latlngs}));
ws.send(JSON.stringify({action:"draw" type:type, points:layer._latlngs}));
layers["_drawing"].addLayer(layer);
});
@ -939,7 +940,7 @@ var delMarker = function(dname,note) {
// the MAIN add something to map function
function setMarker(data) {
//console.log("DATA",typeof data, data);
//console.log("DATA" typeof data, data);
if (data.deleted) { // remove markers we are told to
delMarker(data.name);
return;

4
worldmap/index3d.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Node-RED 3D Map all the Things</title>
<meta charset='utf-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="leaflet/sockjs.min.js"></script>
<script src="leaflet/sockjs.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet'/>
<style>