diff --git a/README.md b/README.md index b8b4b47..078daef 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ map web page for plotting "things" on. ![Map Image](https://dceejay.github.io/pages/images/redmap.png) ### Changes + - v1.0.30 - Add ability to send an array of data points or commands. Add overlay map. Allow more drawing options for lines, areas, circles. - v1.0.29 - Add, tracks node, Fix websocket on Windows - v1.0.28 - Move websocket to specific path, and support satellite node - v1.0.26 - Add info on how to use with local WMS server @@ -90,6 +91,18 @@ than draw a point it will draw a circle. As per Areas and Lines you may also specify *iconColor*, and *layer*. +#### Options + +Areas, Lines and Circles can also specify more optional properties: + - color + - fillColor + - stroke + - weight + - opacity + - fill + - fillOpacity + - clickable (if true sets the passed in name as Popup) + ### Drawing A single *right click* will allow you to add a point to the map - you must specify the `name` and optionally the `icon` and `layer`. diff --git a/worldmap.js b/worldmap.js index 586a099..861e818 100644 --- a/worldmap.js +++ b/worldmap.js @@ -71,6 +71,7 @@ module.exports = function(RED) { client.disconnect(true); }); } + node.on("close", function() { socket = null; }); node.status({}); socket.on('connection', callback); } diff --git a/worldmap/index.html b/worldmap/index.html index a4eb5dc..9eb4946 100644 --- a/worldmap/index.html +++ b/worldmap/index.html @@ -152,7 +152,7 @@ ws.on('error', function() { ws.on('worldmapdata', function(data) { if (Array.isArray(data)) { - console.log("Data passed in is Array"); + //console.log("ARRAY"); for (var prop in data) { if (data[prop].command) { doCommand(data[prop].command); delete data[prop].command; } if (data[prop].hasOwnProperty("name")) { setMarker(data[prop]); } @@ -762,24 +762,24 @@ function setMarker(data) { } else if (data.hasOwnProperty("line") && Array.isArray(data.line)) { delete opt.fill; - if (!data.hasOwnProperty("weight")) opt.weight = 3; //Standard settings different for lines - if (!data.hasOwnProperty("opacity")) opt.opacity = 0.8; + if (!data.hasOwnProperty("weight")) { opt.weight = 3; } //Standard settings different for lines + if (!data.hasOwnProperty("opacity")) { opt.opacity = 0.8; } var polyln = L.polyline(data.line, opt); - if (opt.clickable) polyln.bindPopup(data.name); + if (opt.clickable) { polyln.bindPopup(data.name); } polygons[data.name] = polyln; polygons[data.name].lay = lay; layers[lay].addLayer(polyln); } else if (data.hasOwnProperty("area") && Array.isArray(data.area)) { var polyarea = L.polygon(data.area, opt); - if (opt.clickable) polyarea.bindPopup(data.name); + if (opt.clickable) { polyarea.bindPopup(data.name); } polygons[data.name] = polyarea; polygons[data.name].lay = lay; layers[lay].addLayer(polyarea); } else if (data.hasOwnProperty("sdlat") && data.hasOwnProperty("sdlon")) { - if (!data.hasOwnProperty("iconColor")) opt.color = "blue"; //different standard Color Settings - if (!data.hasOwnProperty("fillColor")) opt.fillColor = "blue"; + if (!data.hasOwnProperty("iconColor")) { opt.color = "blue"; } //different standard Color Settings + if (!data.hasOwnProperty("fillColor")) { opt.fillColor = "blue"; } delete opt.clickable; 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, opt); if (data.clickable != false) { @@ -798,7 +798,7 @@ function setMarker(data) { if (data.hasOwnProperty("radius")) { if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) { var polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, opt); - if (opt.clickable) polycirc.bindPopup(data.name); + if (opt.clickable) { polycirc.bindPopup(data.name); } polygons[data.name] = polycirc; polygons[data.name].lay = lay; layers[lay].addLayer(polycirc); @@ -826,7 +826,7 @@ function setMarker(data) { var words=""+data.name+"
"; - // Create the icons... handle ship, earthquake as specials + // Create the icons... handle plane, car, ship, wind, earthquake as specials var marker, mymarker; var icon, q; if (data.icon === "ship") { @@ -841,31 +841,57 @@ function setMarker(data) { else if (data.icon === "plane") { data.iconColor = data.iconColor || "black"; if (data.hasOwnProperty("squawk")) { data.iconColor = "red"; } - icon = ''; - icon += ''; + icon = ''; + icon += ''; var svgplane = "data:image/svg+xml;base64," + btoa(icon); var dir = data.hdg || data.bearing; myMarker = L.divIcon({ className:"planeicon", - iconAnchor: [15, 15], - html:'', + iconAnchor: [16, 16], + html:'', }); - marker = L.marker(ll, {title: data.name, icon: myMarker}); + marker = L.marker(ll, {title:data.name, icon:myMarker}); //q = 'http://www.bing.com/images/search?q='+data.icon+'%20'+encodeURIComponent(data.name); //words += 'Pictures
'; } else if (data.icon === "car") { data.iconColor = data.iconColor || "black"; - icon = ''; - icon += ''; + icon = ''; + icon += ''; var svgcar = "data:image/svg+xml;base64," + btoa(icon); var dir = data.hdg || data.bearing; myMarker = L.divIcon({ className:"caricon", - iconAnchor: [15, 15], - html:'', + iconAnchor: [16, 16], + html:'', }); - marker = L.marker(ll, {title: data.name, icon: myMarker}); + marker = L.marker(ll, {title:data.name, icon:myMarker}); + } + else if (data.icon === "arrow") { + data.iconColor = data.iconColor || "black"; + icon = ''; + icon += ''; + var svgarrow = "data:image/svg+xml;base64," + btoa(icon); + var dir = data.hdg || data.bearing; + myMarker = L.divIcon({ + className:"arrowicon", + iconAnchor: [16, 16], + html:"'", + }); + marker = L.marker(ll, {title:data.name, icon:myMarker}); + } + else if (data.icon === "wind") { + data.iconColor = data.iconColor || "black"; + icon = ''; + icon += ''; + var svgwind = "data:image/svg+xml;base64," + btoa(icon); + var dir = data.hdg || data.bearing; + myMarker = L.divIcon({ + className:"windicon", + iconAnchor: [16, 16], + html:'', + }); + marker = L.marker(ll, {title:data.name, icon:myMarker}); } else if (data.icon === "satellite") { data.iconColor = data.iconColor || "black"; @@ -1077,7 +1103,7 @@ function doCommand(cmd) { } } else if (cmd.map.hasOwnProperty("bounds")) { //Image Overlay in the bounds specified (2D Array) - if (cmd.map.bounds.length === 2 && cmd.map.bounds[0].length === 2 && cmd.map.bounds[1].length === 2) { + if (cmd.map.bounds.length === 2 && cmd.map.bounds[0].length === 2 && cmd.map.bounds[1].length === 2) { overlays[cmd.map.overlay] = new L.imageOverlay(cmd.map.url, L.latLngBounds(cmd.map.bounds)); } } diff --git a/worldmap/worldmap.appcache b/worldmap/worldmap.appcache index 8cafa73..8e4c8b9 100644 --- a/worldmap/worldmap.appcache +++ b/worldmap/worldmap.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# date: May 2nd 2017 - v1.0.29 +# date: Jun 26th 2017 - v1.0.30 CACHE: index.html