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

slight css change and small tweaks

Browse Source
This commit is contained in:
Dave Conway-Jones 2016-05-08 11:07:09 +01:00
parent 6ca7d0685f
commit 17cea6022a
4 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -6,12 +6,10 @@ map web page for plotting "things" on.
### Install ### Install
Run the following command in your Node-RED user directory - typically `~/.node-red` Run the following command in your Node-RED user directory - typically `~/.node-red`
npm install node-red-contrib-web-worldmap npm install node-red-contrib-web-worldmap
### Usage ### Usage
Plots "things" on a map. The map will be served from `{httpRoot}/worldmap` Plots "things" on a map. The map will be served from `{httpRoot}/worldmap`
@ -107,7 +105,6 @@ To add a new layer
opt:JSON.stringify('{ maxZoom: 19, attribution: "© OpenStreetMap"}') opt:JSON.stringify('{ maxZoom: 19, attribution: "© OpenStreetMap"}')
}; };
Demo Flow Demo Flow
--------- ---------

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name" : "node-red-contrib-web-worldmap", "name" : "node-red-contrib-web-worldmap",
"version" : "0.0.11", "version" : "0.0.12",
"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" : {
"express": "4.*" "express": "4.*"

2
worldmap/css/map.css
View File

@ -18,7 +18,7 @@ a {
top:0px; top:0px;
left:0px; left:0px;
height:41px; height:41px;
width:100%;" width:100%;
} }
#results { #results {

47
worldmap/index.html
View File

@ -49,7 +49,7 @@
<script type="text/javascript" src="leaflet/leaflet-openweathermap.js"></script> <script type="text/javascript" src="leaflet/leaflet-openweathermap.js"></script>
</head> </head>
<body onunload="socket.disconnect;"> <body onunload="ws.close;">
<div id="topbar"> <div id="topbar">
<a href="http://nodered.org"><img src="images/node-red.png" width="72px" height="28px" style="padding-top:4px; margin:4px; vertical-align: middle;"/></a> <a href="http://nodered.org"><img src="images/node-red.png" width="72px" height="28px" style="padding-top:4px; margin:4px; vertical-align: middle;"/></a>
<span style="display:inline-block; padding-top:6px; vertical-align:middle;"><font size="+2"><b> Node-RED</b> map all the things</font></span> <span style="display:inline-block; padding-top:6px; vertical-align:middle;"><font size="+2"><b> Node-RED</b> map all the things</font></span>
@ -91,7 +91,7 @@
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
var startpos = [51.03, -1.379]; var startpos = [51.03, -1.379]; // Start location - somewhere in UK :-)
var startzoom = 10; var startzoom = 10;
var map; var map;
@ -104,14 +104,14 @@ var marks = [];
var marksIndex = 0; var marksIndex = 0;
var popid = ""; var popid = "";
var menuOpen = false; var menuOpen = false;
var maxage = 600; var maxage = 600; // default max age of icons on map in seconds - cleared after 10 mins
baselayername = "OSM grey"; var baselayername = "OSM grey"; // Default base layer OSM but uniform grey
var ws; var ws;
var wsUri; var wsUri;
var loc = window.location; var loc = window.location;
window.onbeforeunload = function(e) { window.onbeforeunload = function(e) {
return 'Reloading will delete all the local markers, including drawing on the "drawing" layer'; return 'Reloading will delete all the local markers, including any drawing on the "drawing" layer';
}; };
if (window.self !== window.top) { console.log("In an Iframe"); } if (window.self !== window.top) { console.log("In an Iframe"); }
@ -127,7 +127,7 @@ else {
//wsUri = "ws://"+window.location.hostname+":1880/red/ws/map"; //wsUri = "ws://"+window.location.hostname+":1880/red/ws/map";
} }
//console.log(wsUri); //console.log(wsUri);
var ibmfoot = "&nbsp;&copy; IBM 2015" var ibmfoot = "&nbsp;&copy; IBM 2015,2016"
var isChrome = !!window.chrome; var isChrome = !!window.chrome;
if (!isChrome) { document.getElementById("showHelp").innerHTML=""; } if (!isChrome) { document.getElementById("showHelp").innerHTML=""; }
@ -143,7 +143,7 @@ function start(wsUri) { // Create the websocket
ws.onclose = function(evt) { ws.onclose = function(evt) {
console.log("DISCONNECTED"); console.log("DISCONNECTED");
document.getElementById("foot").innerHTML = "<font color='#944'>"+ibmfoot+"</font>"; document.getElementById("foot").innerHTML = "<font color='#900'>"+ibmfoot+"</font>";
setTimeout(function() { start(wsUri) }, 3000); // try to reconnect every 3 secs... bit fast ? setTimeout(function() { start(wsUri) }, 3000); // try to reconnect every 3 secs... bit fast ?
} }
@ -251,7 +251,7 @@ function doTidyUp() {
} }
} }
// move the daylight / nighttime boundary (if enabled) // move the daylight / nighttime boundary (if enabled) every minute
function moveTerminator() { // if terminator line plotted move it every minute function moveTerminator() { // if terminator line plotted move it every minute
if (layers["_daynight"].getLayers().length > 0) { if (layers["_daynight"].getLayers().length > 0) {
layers["_daynight"].clearLayers(); layers["_daynight"].clearLayers();
@ -260,7 +260,7 @@ function moveTerminator() { // if terminator line plotted move it every minute
} }
setInterval( function() {moveTerminator()}, 60000 ); setInterval( function() {moveTerminator()}, 60000 );
// Call tidyup every {maxage} seconds // Call tidyup every {maxage} seconds - default 10 mins
var stale = null; var stale = null;
function setMaxAge() { function setMaxAge() {
maxage = document.getElementById('maxage').value; maxage = document.getElementById('maxage').value;
@ -296,7 +296,7 @@ function moveToMarks() {
map.setView(m.getLatLng(), map.getZoom()); map.setView(m.getLatLng(), map.getZoom());
m.openPopup(); m.openPopup();
marksIndex++; marksIndex++;
setTimeout(moveToMarks, 2000); setTimeout(moveToMarks, 2500);
} }
} }
@ -521,6 +521,8 @@ var CartoPos = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{
// Nice watercolour based maps by Stamen Design // Nice watercolour based maps by Stamen Design
var watermap = new L.StamenTileLayer('watercolor'); var watermap = new L.StamenTileLayer('watercolor');
basemaps["Watercolor"] = watermap; basemaps["Watercolor"] = watermap;
// Terrain map of US only
var usterrainmap = new L.StamenTileLayer('terrain'); var usterrainmap = new L.StamenTileLayer('terrain');
basemaps["US terrain"] = usterrainmap; basemaps["US terrain"] = usterrainmap;
@ -560,7 +562,6 @@ map.on('draw:created', function (e) {
//console.log(JSON.stringify(layer.toGeoJSON())); //console.log(JSON.stringify(layer.toGeoJSON()));
ws.send("add:"+type+","+layer._latlngs); ws.send("add:"+type+","+layer._latlngs);
layers["drawing"].addLayer(layer); layers["drawing"].addLayer(layer);
}); });
// Add the roads overlay // Add the roads overlay
@ -587,9 +588,9 @@ overlays["pressure"] = L.tileLayer('http://{s}.tile.openweathermap.org/map/press
overlays["weather"] = L.OWM.current({interval:30, minZoom:8, appId:"9ae11d4f6f9bed61f32fc061f715cc71"}); overlays["weather"] = L.OWM.current({interval:30, minZoom:8, appId:"9ae11d4f6f9bed61f32fc061f715cc71"});
// Add the shipping navigation markers // Add the shipping navigation markers
var OpenSeaMap = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', { //var OpenSeaMap = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors' // attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
}); //});
//overlays["ship nav"] = OpenSeaMap; //overlays["ship nav"] = OpenSeaMap;
if ( window.localStorage.hasOwnProperty("lastlayer") ) { if ( window.localStorage.hasOwnProperty("lastlayer") ) {
@ -622,7 +623,7 @@ var delMarker = function(dname) {
// the MAIN add something to map function // the MAIN add something to map function
function setMarker(data) { function setMarker(data) {
//console.log(typeof data, data); console.log(typeof data, data);
var ll; var ll;
var stay = popped; var stay = popped;
@ -646,6 +647,17 @@ function setMarker(data) {
polygons[data.name] = polygon; polygons[data.name] = polygon;
layers[lay].addLayer(polygon); layers[lay].addLayer(polygon);
} }
else if (data.hasOwnProperty("sdlat") && data.hasOwnProperty("sdlon")) {
var ellipse = L.ellipse(new L.LatLng((data.lat*1), (data.lon*1)), [200000*data.sdlon*Math.cos(data.lat*Math.PI/180), 200000*data.sdlat], 0, {color:(data.iconColor || "blue"), weight:2} );
ellipse.on('click', function(e) {
var popup = L.popup()
.setLatLng(new L.LatLng((data.lat*1), (data.lon*1)))
.setContent('<p><b>'+data.name+'</b><br/>lat : '+data.lat+'<br/>lon : '+data.lon+'</p>')
.openOn(map);
});
polygons[data.name] = ellipse;
layers[lay].addLayer(ellipse);
}
else { else {
//console.log("handling",data.name); //console.log("handling",data.name);
if (typeof data.coordinates == "object") { ll = new L.LatLng(data.coordinates[1],data.coordinates[0]); } if (typeof data.coordinates == "object") { ll = new L.LatLng(data.coordinates[1],data.coordinates[0]); }
@ -690,8 +702,6 @@ function setMarker(data) {
html:'<img src="'+svgcar+'" style="width:31px; height:30px; -webkit-transform:rotate('+data.bearing+'deg); -moz-transform:rotate('+data.bearing+'deg);" />', html:'<img src="'+svgcar+'" style="width:31px; height:30px; -webkit-transform:rotate('+data.bearing+'deg); -moz-transform:rotate('+data.bearing+'deg);" />',
}); });
marker = L.marker(ll, {title: data.name, icon: myMarker}); marker = L.marker(ll, {title: data.name, icon: myMarker});
var q = 'http://www.bing.com/images/search?q='+data.icon+'%20'+encodeURIComponent(data.name);
words += '<a href=\''+q+'\' target="_thingpic">Pictures</a><br>';
} }
else if (data.icon === "friend") { else if (data.icon === "friend") {
marker = L.marker(ll, { icon: L.divIcon({ className: 'circle f', iconSize: [20, 12] }), title: data.name }); marker = L.marker(ll, { icon: L.divIcon({ className: 'circle f', iconSize: [20, 12] }), title: data.name });
@ -722,9 +732,6 @@ function setMarker(data) {
marker = L.marker(ll, {title: data.name, icon: myMarker}); marker = L.marker(ll, {title: data.name, icon: myMarker});
} }
//var q = "/red/boatpic?name="+data.name;
//words += '<img width=240px height=180px alt="" src="'+q+'"><br/>';
// remove icon from list of properties, then add all others to popup // remove icon from list of properties, then add all others to popup
if (data.hasOwnProperty("icon")) { delete data.icon; } if (data.hasOwnProperty("icon")) { delete data.icon; }
if (data.hasOwnProperty("iconColor")) { delete data.iconColor; } if (data.hasOwnProperty("iconColor")) { delete data.iconColor; }