Use socket.io for Worldmap
Major bump to 1.0.0
This commit is contained in:
Dave Conway-Jones
parent
e39dae334d
commit
0fcfb24c9d
11
README.md
11
README.md
@ -4,6 +4,12 @@ node-red-contrib-web-worldmap
|
||||
A <a href="http://nodered.org" target="_new">Node-RED</a> node to provide world
|
||||
map web page for plotting "things" on.
|
||||
|
||||
### Changes
|
||||
- v1.0.0 - now uses socket.io to connect to backend - means this node now has an input connection
|
||||
(like "proper" nodes should :-), and you no longer need a websocket node in parallel.
|
||||
Obviously this is a breaking change hence the major version number bump. Also thus adds a `worldmap in`
|
||||
node to handle events coming from the map interaction. (to be documented more fully but are fairly obvious).
|
||||
|
||||
### Install
|
||||
|
||||
Run the following command in your Node-RED user directory - typically `~/.node-red`
|
||||
@ -14,11 +20,6 @@ Run the following command in your Node-RED user directory - typically `~/.node-r
|
||||
|
||||
Plots "things" on a map. The map will be served from `{httpRoot}/worldmap`
|
||||
|
||||
To use this node you must also place a **websocket out** node onto the workspace
|
||||
and set the endpoint to
|
||||
|
||||
{httpRoot}/ws/worldmap
|
||||
|
||||
The minimum **msg.payload** must contain `name`, `lat` and `lon` properties, e.g.
|
||||
|
||||
{name:"Joe", lat:51, lon:-1.05}
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"name" : "node-red-contrib-web-worldmap",
|
||||
"version" : "0.0.15",
|
||||
"version" : "1.0.0",
|
||||
"description" : "A Node-RED node to provide a web page of a world map for plotting things on.",
|
||||
"dependencies" : {
|
||||
"express": "4.*"
|
||||
"express": "4.*",
|
||||
"socket.io": "^1.4.6"
|
||||
},
|
||||
"repository" : {
|
||||
"type":"git",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright 2015 IBM Corp.
|
||||
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.
|
||||
@ -23,9 +24,7 @@
|
||||
|
||||
<script type="text/x-red" data-help-name="worldmap">
|
||||
<p>Plots "things" on a web map. Needs an internet connection.</p>
|
||||
<p>To use this node you must also create a <code>websocket out</code> node
|
||||
configured to point at <b>{httpRoot}/ws/worldmap</b> .</p>
|
||||
<p>The minimum <code>msg.payload</code> sent to the websocket must contain <code>name</code>, <code>lat</code> and <code>lon</code> properties, e.g.</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>
|
||||
@ -50,7 +49,7 @@
|
||||
defaults: {
|
||||
name: {value:""}
|
||||
},
|
||||
inputs:0,
|
||||
inputs:1,
|
||||
outputs:0,
|
||||
icon: "white-globe.png",
|
||||
align: "right",
|
||||
@ -65,3 +64,38 @@
|
||||
}
|
||||
});
|
||||
</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>
|
||||
<p></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>
|
||||
|
||||
26
worldmap.js
26
worldmap.js
@ -1,5 +1,5 @@
|
||||
/**
|
||||
* Copyright 2015 IBM Corp.
|
||||
* 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.
|
||||
@ -17,12 +17,32 @@
|
||||
module.exports = function(RED) {
|
||||
"use strict";
|
||||
var express = require("express");
|
||||
var io = require('socket.io')(RED.server);
|
||||
|
||||
var WorldMap = function(n) {
|
||||
RED.nodes.createNode(this,n);
|
||||
this.log("Serving map from "+__dirname+" as "+RED.settings.httpNodeRoot.slice(0,-1)+"/worldmap");
|
||||
var node = this;
|
||||
//node.log("Serving map from "+__dirname+" as "+RED.settings.httpNodeRoot.slice(0,-1)+"/worldmap");
|
||||
RED.httpNode.use("/worldmap", express.static(__dirname + '/worldmap'));
|
||||
io.on('connection', function(socket) {
|
||||
node.on('input', function(msg) {
|
||||
socket.emit("worldmapdata",msg.payload);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
RED.nodes.registerType("worldmap",WorldMap);
|
||||
|
||||
var WorldMapIn = function(n) {
|
||||
RED.nodes.createNode(this,n);
|
||||
var node = this;
|
||||
io.on('connection', function(socket) {
|
||||
socket.on('worldmap', function(data) {
|
||||
node.send({payload:data, topic:"worldmap"});
|
||||
});
|
||||
socket.on('disconnect', function() {
|
||||
node.send({payload:{action:"disconnect"}, topic:"worldmap"});
|
||||
});
|
||||
});
|
||||
}
|
||||
RED.nodes.registerType("worldmap in",WorldMapIn);
|
||||
}
|
||||
|
||||
@ -31,6 +31,8 @@
|
||||
<link rel="stylesheet" type="text/css" href="leaflet/leaflet-openweathermap.css"/>
|
||||
|
||||
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
|
||||
|
||||
<script type="text/javascript" src="leaflet/socket.io-1.4.5.js"></script>
|
||||
<script type="text/javascript" src="leaflet/leaflet.js"></script>
|
||||
<script type="text/javascript" src="leaflet/Leaflet.vector-markers.min.js"></script>
|
||||
<script type="text/javascript" src="leaflet/leaflet.boatmarker.js"></script>
|
||||
@ -52,7 +54,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="leaflet/dialog-polyfill.css"/>
|
||||
</head>
|
||||
|
||||
<body onunload="ws.close;">
|
||||
<body onunload="ws.emit('end');">
|
||||
<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>
|
||||
<span style="display:inline-block; padding-top:6px; vertical-align:middle;"><font size="+2"><b> Node-RED</b> map all the things</font></span>
|
||||
@ -71,7 +73,7 @@
|
||||
<tr><td style="cursor:pointer"><span id="showHelp" ><i class="fa fa-info fa-lg fa-fw"></i>Help</span></td></tr>
|
||||
</table></div>
|
||||
<div id="map"></div>
|
||||
<div id="foot"> © IBM 2015</div>
|
||||
<div id="foot"> © IBM 2015,2016</div>
|
||||
<!-- <div id="heat"><button type="button" onclick="clearHeat();">Clear Heatmap</button></div> -->
|
||||
|
||||
<dialog id="helpWindow">
|
||||
@ -123,54 +125,38 @@ window.onbeforeunload = function(e) {
|
||||
if (window.self !== window.top) { console.log("In an Iframe"); }
|
||||
else { console.log("NOT in an Iframe"); }
|
||||
|
||||
if (loc.host.indexOf("bluemix") !== -1) {
|
||||
wsUri = "ws://" + loc.host +"/ws/worldmap";
|
||||
}
|
||||
else {
|
||||
if (loc.protocol === "https:") { wsUri = "wss:"; }
|
||||
else { wsUri = "ws:"; }
|
||||
wsUri += "//" + loc.host + loc.pathname.replace("worldmap/","ws/worldmap");
|
||||
//wsUri = "ws://"+window.location.hostname+":1880/red/ws/map";
|
||||
}
|
||||
//console.log(wsUri);
|
||||
var ibmfoot = " © IBM 2015,2016"
|
||||
|
||||
function start(wsUri) { // Create the websocket
|
||||
ws = new WebSocket(wsUri);
|
||||
function start() { // Create the websocket
|
||||
//ws = new WebSocket(wsUri);
|
||||
ws = io();
|
||||
|
||||
ws.onopen = function(evt) {
|
||||
//ws.onopen = function(evt) {
|
||||
ws.on('connect', function() {
|
||||
console.log("CONNECTED");
|
||||
document.getElementById("foot").innerHTML = "<font color='#494'>"+ibmfoot+"</font>";
|
||||
//ws.send("Open for mapping");
|
||||
};
|
||||
ws.emit("worldmap",{action:"connected"});
|
||||
});
|
||||
|
||||
ws.onclose = function(evt) {
|
||||
//ws.onclose = function(evt) {
|
||||
ws.on('close', function() {
|
||||
console.log("DISCONNECTED");
|
||||
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() }, 3000); // try to reconnect every 3 secs... bit fast ?
|
||||
});
|
||||
|
||||
// This expects a websocket message with data as a stringified object containing at least name, lat and lon
|
||||
ws.onmessage = function (evt) {
|
||||
//console.log("MESSAGE",evt);
|
||||
var data;
|
||||
try {
|
||||
data = JSON.parse(evt.data); // expects a stringified object
|
||||
} catch (e) {
|
||||
console.log("BAD PARSE",evt.data);
|
||||
return;
|
||||
}
|
||||
ws.on('worldmapdata', function(data) {
|
||||
if (data.command) { doCommand(data.command); delete data.command; }
|
||||
if (data.hasOwnProperty("name") && data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) { setMarker(data); }
|
||||
else { console.log("SKIP",data); }
|
||||
}
|
||||
});
|
||||
|
||||
ws.onerror = function(evt) {
|
||||
ws.on('error', function(evt) {
|
||||
console.log("ERROR",evt);
|
||||
document.getElementById("foot").innerHTML = "<font color='#f00'>"+ibmfoot+"</font>";
|
||||
});
|
||||
}
|
||||
}
|
||||
start(wsUri);
|
||||
start();
|
||||
|
||||
if ( window.localStorage.hasOwnProperty("lastpos") ) {
|
||||
var sp = JSON.parse(localStorage.getItem("lastpos"));
|
||||
@ -356,7 +342,7 @@ map.on('overlayadd', function(e) {
|
||||
overlays["drawing"].bringToBack();
|
||||
}
|
||||
//else { console.log("layer add :",e.name); }
|
||||
ws.send(e.name+":add");
|
||||
ws.emit("worldmap",{action:"addlayer", name:e.name});
|
||||
});
|
||||
|
||||
map.on('overlayremove', function(e) {
|
||||
@ -372,13 +358,13 @@ map.on('overlayremove', function(e) {
|
||||
map.removeControl(drawControl);
|
||||
}
|
||||
//else console.log("layer del :",e.name);
|
||||
ws.send(e.name+":del");
|
||||
ws.emit("worldmap",{action:"delete", name:e.name});
|
||||
});
|
||||
|
||||
map.on('baselayerchange', function(e) {
|
||||
//console.log("base layer now :",e.name);
|
||||
baselayername = e.name;
|
||||
ws.send(e.name+":chg");
|
||||
ws.emit("worldmap",{action:"modify", name:e.name});
|
||||
});
|
||||
|
||||
map.on('zoomend', function() {
|
||||
@ -400,7 +386,7 @@ map.on('zoomend', function() {
|
||||
});
|
||||
|
||||
//map.on('contextmenu', function(e) {
|
||||
// ws.send("click:"+e.latlng.lat.toFixed(5)+","+e.latlng.lng.toFixed(5));
|
||||
// ws.emit("worldmap",{action:"rightclick", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5)});
|
||||
//});
|
||||
|
||||
var rightmenuMap = L.popup().setContent("<input type='text' id='rinput' onkeydown='if (event.keyCode == 13) addThing();' placeholder='name (,icon, layer)'/>");
|
||||
@ -409,7 +395,7 @@ var rclk;
|
||||
var addThing = function() {
|
||||
var thing = document.getElementById('rinput').value;
|
||||
console.log(thing);
|
||||
ws.send("add:point,"+rclk.lat.toFixed(5)+","+rclk.lng.toFixed(5)+","+thing);
|
||||
ws.emit("worldmap",{action:"point", lat:rclk.lat.toFixed(5), lon:rclk.lng.toFixed(5), point:thing});
|
||||
map.closePopup();
|
||||
var bits = thing.split(",");
|
||||
var lay = (bits[2] || "drawing").trim();
|
||||
@ -571,7 +557,7 @@ map.on('draw:created', function (e) {
|
||||
var layer = e.layer;
|
||||
//console.log(type, layer._latlngs);
|
||||
//console.log(JSON.stringify(layer.toGeoJSON()));
|
||||
ws.send("add:"+type+","+layer._latlngs);
|
||||
ws.emit("worldmap",{action:"draw",type:type, points:layer._latlngs});
|
||||
layers["drawing"].addLayer(layer);
|
||||
});
|
||||
|
||||
@ -625,7 +611,7 @@ var delMarker = function(dname) {
|
||||
}
|
||||
if (typeof markers[dname] != "undefined") {
|
||||
var d = {name:dname,type:"DELETE",lat:markers[dname]._latlng.lat,lon:markers[dname]._latlng.lng};
|
||||
ws.send("del:"+dname);
|
||||
ws.emit("worldmap",{action:"delete", name:dname});
|
||||
layers[markers[dname].lay].removeLayer(markers[dname]);
|
||||
delete markers[dname];
|
||||
}
|
||||
@ -634,7 +620,7 @@ var delMarker = function(dname) {
|
||||
|
||||
// the MAIN add something to map function
|
||||
function setMarker(data) {
|
||||
console.log(typeof data, data);
|
||||
//console.log(typeof data, data);
|
||||
var ll;
|
||||
var stay = popped;
|
||||
|
||||
@ -677,37 +663,38 @@ function setMarker(data) {
|
||||
var words="<b>"+data.name+"</b><br/>";
|
||||
|
||||
// Create the icons... handle ship, earthquake as specials
|
||||
var marker;
|
||||
var marker, mymarker;
|
||||
var icon, q;
|
||||
if (data.icon === "ship") {
|
||||
marker = L.boatMarker(ll, {
|
||||
title: data.name,
|
||||
color: (data.iconColor || "blue")
|
||||
});
|
||||
marker.setHeading(data.bearing);
|
||||
var q = 'http://www.bing.com/images/search?q='+data.icon+'%20%2B"'+encodeURIComponent(data.name)+'"';
|
||||
q = 'http://www.bing.com/images/search?q='+data.icon+'%20%2B"'+encodeURIComponent(data.name)+'"';
|
||||
words += '<a href=\''+q+'\' target="_thingpic">Pictures</a><br>';
|
||||
}
|
||||
else if (data.icon === "plane") {
|
||||
data.iconColor = data.iconColor || "black";
|
||||
if (data.hasOwnProperty("squawk")) { data.iconColor = "red"; }
|
||||
var icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="310px" height="310px" viewBox="0 0 310 310" >';
|
||||
icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="310px" height="310px" viewBox="0 0 310 310" >';
|
||||
icon += '<g><path d="M134.875,19.74c0.04-22.771,34.363-22.771,34.34,0.642v95.563L303,196.354v35.306l-133.144-43.821v71.424l30.813,24.072v27.923l-47.501-14.764l-47.501,14.764v-27.923l30.491-24.072v-71.424L3,231.66v-35.306l131.875-80.409V19.74z" fill="'+data.iconColor+'"/></g></svg>';
|
||||
var svgplane = "data:image/svg+xml;base64," + btoa(icon);
|
||||
var myMarker = L.divIcon({
|
||||
myMarker = L.divIcon({
|
||||
className:"planeicon",
|
||||
iconAnchor: [15, 15],
|
||||
html:'<img src="'+svgplane+'" 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});
|
||||
var q = 'http://www.bing.com/images/search?q='+data.icon+'%20'+encodeURIComponent(data.name);
|
||||
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 === "car") {
|
||||
data.iconColor = data.iconColor || "black";
|
||||
var icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="47px" height="47px" viewBox="0 0 47.032 47.032">';
|
||||
icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="47px" height="47px" viewBox="0 0 47.032 47.032">';
|
||||
icon += '<g><path d="M29.395,0H17.636c-3.117,0-5.643,3.467-5.643,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759 c3.116,0,5.644-2.527,5.644-5.644V6.584C35.037,3.467,32.511,0,29.395,0z M34.05,14.188v11.665l-2.729,0.351v-4.806L34.05,14.188z M32.618,10.773c-1.016,3.9-2.219,8.51-2.219,8.51H16.631l-2.222-8.51C14.41,10.773,23.293,7.755,32.618,10.773z M15.741,21.713 v4.492l-2.73-0.349V14.502L15.741,21.713z M13.011,37.938V27.579l2.73,0.343v8.196L13.011,37.938z M14.568,40.882l2.218-3.336 h13.771l2.219,3.336H14.568z M31.321,35.805v-7.872l2.729-0.355v10.048L31.321,35.805z" fill="'+data.iconColor+'"/></g></svg>';
|
||||
var svgcar = "data:image/svg+xml;base64," + btoa(icon);
|
||||
var myMarker = L.divIcon({
|
||||
myMarker = L.divIcon({
|
||||
className:"caricon",
|
||||
iconAnchor: [15, 15],
|
||||
html:'<img src="'+svgcar+'" style="width:31px; height:30px; -webkit-transform:rotate('+data.bearing+'deg); -moz-transform:rotate('+data.bearing+'deg);" />',
|
||||
@ -734,7 +721,7 @@ function setMarker(data) {
|
||||
marker = L.marker(ll, { icon: L.divIcon({ className: 'circle e', iconSize: [data.mag*5, data.mag*5] }), title: data.name });
|
||||
}
|
||||
else {
|
||||
var myMarker = L.VectorMarkers.icon({
|
||||
myMarker = L.VectorMarkers.icon({
|
||||
icon: data.icon || "circle",
|
||||
markerColor: (data.iconColor || "#910000"),
|
||||
prefix: 'fa',
|
||||
|
||||
4
worldmap/leaflet/socket.io-1.4.5.js
Normal file
4
worldmap/leaflet/socket.io-1.4.5.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user