diff --git a/README.md b/README.md index 7c84928..cd515fd 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ However there are several specials... - **plane** : a plane icon that aligns with the bearing of travel. - **ship** : a ship icon that aligns with the bearing of travel. + - **car** : a car icon that aligns with the bearing of travel. - **friend** : pseudo Nato style blue rectangle. - **hostile** : pseudo Nato style red circle. - **neutral** : pseudo Nato style green square. @@ -115,3 +116,6 @@ formats up the msg as per above and sends to the websocket to plot on the map. It also shows how to zoom and move the map or add a new layer. [{"id":"f63d823.f09c28","type":"websocket-listener","path":"/ws/worldmap","wholemsg":null},{"id":"6caef267.93510c","type":"inject","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":217,"y":398,"z":"f307b843.0cf848","wires":[["fb7109d5.048ef8"]]},{"id":"fb7109d5.048ef8","type":"function","name":"add new layer","func":"msg.payload = {};\nmsg.payload.command = {};\n\nvar u = 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';\nvar o = JSON.stringify({ maxZoom: 19, attribution: '© OpenStreetMap'});\n\nmsg.payload.command.map = {name:\"OSMhot\", url:u, opt:o};\nmsg.payload.command.layer = \"OSMhot\";\n\nreturn msg;","outputs":1,"noerr":0,"x":454,"y":433,"z":"f307b843.0cf848","wires":[["e9c3a4cd.163c58"]]},{"id":"e9c3a4cd.163c58","type":"websocket out","name":"","server":"f63d823.f09c28","client":"","x":753.5,"y":540,"z":"f307b843.0cf848","wires":[]},{"id":"b68e0d77.4971f","type":"function","name":"USGS Quake monitor csv re-parse","func":"msg.payload.lat = msg.payload.latitude;\nmsg.payload.lon = msg.payload.longitude;\nmsg.payload.layer = \"earthquake\";\nmsg.payload.name = msg.payload.id;\nmsg.payload.icon = \"globe\";\nmsg.payload.iconColor = \"orange\";\n\ndelete msg.payload.latitude;\ndelete msg.payload.longitude;\t\nreturn msg;","outputs":1,"noerr":0,"x":416.5,"y":560,"z":"f307b843.0cf848","wires":[["e9c3a4cd.163c58"]]},{"id":"1a0508d4.e5faf7","type":"function","name":"move and zoom","func":"msg.payload = { command:{layer:\"Esri Terrain\",lat:0,lon:0,zoom:3} };\nreturn msg;","outputs":1,"noerr":0,"x":427,"y":476,"z":"f307b843.0cf848","wires":[["e9c3a4cd.163c58"]]},{"id":"8d1dcc2c.72e23","type":"csv","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","x":250,"y":500,"z":"f307b843.0cf848","wires":[["b68e0d77.4971f"]]},{"id":"8fbd9df9.70426","type":"inject","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":163,"y":440,"z":"f307b843.0cf848","wires":[["1a0508d4.e5faf7"]]},{"id":"b8f3fe3f.470c","type":"http request","name":"","method":"GET","url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.csv","x":145.5,"y":560,"z":"f307b843.0cf848","wires":[["8d1dcc2c.72e23"]]},{"id":"47e1240c.b81edc","type":"inject","name":"Quakes","topic":"","payload":"","payloadType":"none","repeat":"900","crontab":"","once":false,"x":90,"y":500,"z":"f307b843.0cf848","wires":[["b8f3fe3f.470c"]]},{"id":"784ff2e9.87b00c","type":"worldmap","name":"","x":798,"y":499,"z":"f307b843.0cf848","wires":[]}] + + +Car icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY. diff --git a/package.json b/package.json index 605daae..3dadb2c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name" : "node-red-contrib-web-worldmap", - "version" : "0.0.10", + "version" : "0.0.11", "description" : "A Node-RED node to provide a web page of a world map for plotting things on.", "dependencies" : { "express": "4.*" diff --git a/worldmap.html b/worldmap.html index a396c89..ce8981c 100644 --- a/worldmap.html +++ b/worldmap.html @@ -39,7 +39,7 @@
  • deleted : set to true to remove the named marker. (default false)

    • Any other sub-properties of msg.payload will be added to the icon popup text box as extra information.

    -

    Icons of type plane or ship will use built in SVG icons that align to the +

    Icons of type plane, ship or car will use built in SVG icons that align to the bearing value.

    diff --git a/worldmap/index.html b/worldmap/index.html index 99aa2f8..3c518c4 100644 --- a/worldmap/index.html +++ b/worldmap/index.html @@ -144,7 +144,7 @@ function start(wsUri) { // Create the websocket ws.onclose = function(evt) { console.log("DISCONNECTED"); document.getElementById("foot").innerHTML = ""+ibmfoot+""; - 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 ? } // This expects a websocket message with data as a stringified object containing at least name, lat and lon @@ -679,6 +679,20 @@ function setMarker(data) { var 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"; + var icon = ''; + icon += ''; + var svgcar = "data:image/svg+xml;base64," + btoa(icon); + var myMarker = L.divIcon({ + className:"caricon", + iconAnchor: [15, 15], + html:'', + }); + 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 += 'Pictures
    '; + } else if (data.icon === "friend") { marker = L.marker(ll, { icon: L.divIcon({ className: 'circle f', iconSize: [20, 12] }), title: data.name }); }