diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a7be4e..8d49054 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ### Change Log for Node-RED Worldmap + - v2.3.9 - improve geojson layer and name handling. - v2.3.8 - fix fa-marker offset to improve accuracy. - v2.3.7 - show icon within circle if icon present. Issue #128 - v2.3.6 - show ruler if grid is turned on. diff --git a/README.md b/README.md index bde13a0..e64fc55 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ map web page for plotting "things" on. ### Updates +- v2.3.9 - improve geojson layer and name handling. - v2.3.8 - fix fa-marker offset to improve accuracy. - v2.3.7 - show icon within circle if icon present. Issue #128 - v2.3.6 - show ruler if grid is turned on. @@ -234,7 +235,37 @@ a number of degrees. ### GeoJSON If the msg.payload contains a **geojson** property, and no **lat** and **lon**, then rather than draw a point -it will render the geojson. Other optional properties (see below) can be used to style the geojson. +it will render the geojson. + + msg.payload = { + "name": "MyPolygon", + "geojson": { + "type": "Feature", + "geometry": { + "type": "Polygon", + "coordinates": [[[-180,10],[20,90],[180,-5],[-30,-90]]] + }, + "style": { + "stroke-width": "8", + "stroke": "#ff00ff", + "fill-color": "#808000", + "fill-opacity": 0.2 + } + } + } + +Other optional properties (see below) can be used to style the geojson "outside" of the feature itself. + + msg.payload = { + "name": "Myline", + "color": "#0000ff", + "weight": "6", + "dashArray": "30 20", + "geojson": { + "type": "LineString", + "coordinates": [[0,0],[0,90]] + } + } ### Options @@ -570,4 +601,4 @@ It also shows how to zoom and move the map or add a new layer. [{"id":"86457344.50e6b","type":"inject","z":"745a133b.dd6dec","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":190,"y":2420,"wires":[["9a142026.fa47f"]]},{"id":"9a142026.fa47f","type":"function","z":"745a133b.dd6dec","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 = { 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":420,"y":2420,"wires":[["c643e022.1816c"]]},{"id":"c643e022.1816c","type":"worldmap","z":"745a133b.dd6dec","name":"","x":750,"y":2460,"wires":[]},{"id":"2998e233.4ba64e","type":"function","z":"745a133b.dd6dec","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":540,"y":2560,"wires":[["c643e022.1816c"]]},{"id":"e72c5732.9fa198","type":"function","z":"745a133b.dd6dec","name":"move and zoom","func":"msg.payload = { command:{layer:\"Esri Terrain\",lat:0,lon:0,zoom:3} };\nreturn msg;","outputs":1,"noerr":0,"x":420,"y":2460,"wires":[["c643e022.1816c"]]},{"id":"12317723.589249","type":"csv","z":"745a133b.dd6dec","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","x":390,"y":2500,"wires":[["2998e233.4ba64e"]]},{"id":"10e5e5f0.8daeaa","type":"inject","z":"745a133b.dd6dec","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":190,"y":2460,"wires":[["e72c5732.9fa198"]]},{"id":"b6917d83.d1bac","type":"http request","z":"745a133b.dd6dec","name":"","method":"GET","url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.csv","x":270,"y":2560,"wires":[["12317723.589249"]]},{"id":"3842171.4d487e8","type":"inject","z":"745a133b.dd6dec","name":"Quakes","topic":"","payload":"","payloadType":"none","repeat":"900","crontab":"","once":false,"x":200,"y":2500,"wires":[["b6917d83.d1bac"]]}] -Car, Bus and Helicopter icons originally made by Freepik from www.flaticon.com is licensed by CC 3.0 BY. +Car, Bus and Helicopter icons originally made by Freepik from www.flaticon.com are licensed by CC 3.0 BY. diff --git a/package.json b/package.json index acdc59b..9bcda15 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "node-red-contrib-web-worldmap", - "version": "2.3.8", + "version": "2.3.9", "description": "A Node-RED node to provide a web page of a world map for plotting things on.", "dependencies": { "cgi": "0.3.1", diff --git a/worldmap/worldmap.js b/worldmap/worldmap.js index 7ea7fbc..c443dd4 100644 --- a/worldmap/worldmap.js +++ b/worldmap/worldmap.js @@ -111,7 +111,7 @@ var connect = function() { else { if (data.command) { doCommand(data.command); delete data.command; } if (data.hasOwnProperty("name")) { setMarker(data); } - else if (data.hasOwnProperty("type")) { doGeojson(data); } + else if (data.hasOwnProperty("type")) { doGeojson("geojson",data); } else { console.log("SKIP",data); // if (typeof data === "string") { doDialog(data); } @@ -1109,7 +1109,7 @@ function setMarker(data) { } } else if (data.hasOwnProperty("geojson")) { - doGeojson(data.geojson,(data.layer || "geojson"),opt); + doGeojson(data.name,data.geojson,(data.layer || "unknown"),opt); } if (polygons[data.name] !== undefined) { @@ -2050,31 +2050,41 @@ function doCommand(cmd) { } // handle any incoming GEOJSON directly - may style badly -function doGeojson(g,l,o) { - var glayer = l || "geojson"; - if (!basemaps[glayer]) { - var opt = { style: function(feature) { - var st = { stroke:true, color:"#910000", weight:2, fill:true, fillColor:"#910000", fillOpacity:0.3 }; - st = Object.assign(st,o); - if (feature.hasOwnProperty("properties")) { - console.log("GPROPS", feature.properties) - } - if (feature.hasOwnProperty("geometry") && feature.geometry.hasOwnProperty("type") && feature.geometry.type === "LineString") { - st.fill = false; - } - if (feature.hasOwnProperty("style")) { - console.log("GSTYLE", feature.style) - } - return st; - }} - opt.onEachFeature = function (f,l) { - if (f.properties) { l.bindPopup('
'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'
'); } - } - overlays[glayer] = L.geoJson(g,opt); - //layercontrol.addOverlay(overlays[glayer],glayer); - map.addLayer(overlays[glayer]); - } - overlays[glayer].addData(g); +function doGeojson(n,g,l,o) { + var lay = l || "unknown"; + // if (!basemaps[lay]) { + var opt = { style: function(feature) { + var st = { stroke:true, color:"#910000", weight:2, fill:true, fillColor:"#910000", fillOpacity:0.3 }; + st = Object.assign(st,o); + if (feature.hasOwnProperty("properties")) { + console.log("GPROPS", feature.properties) + st.color = feature.properties["stroke"] || st.color; + st.weight = feature.properties["stroke-width"] || st.weight; + st.fillColor = feature.properties["fill-color"] || st.fillColor; + st.fillOpacity = feature.properties["fill-opacity"] || st.fillOpacity; + } + if (feature.hasOwnProperty("style")) { + console.log("GSTYLE", feature.style) + st.color = feature.style["stroke"] || st.color; + st.weight = feature.style["stroke-width"] || st.weight; + st.fillColor = feature.style["fill-color"] || st.fillColor; + st.fillOpacity = feature.style["fill-opacity"] || st.fillOpacity; + } + if (feature.hasOwnProperty("geometry") && feature.geometry.hasOwnProperty("type") && feature.geometry.type === "LineString") { + st.fill = false; + } + return st; + }} + opt.onEachFeature = function (f,l) { + if (f.properties) { l.bindPopup('
'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'
'); } + } + markers[n] = L.geoJson(g,opt); + markers[n].lay = lay; + if (typeof layers[lay] == "undefined") { // add layer if if doesn't exist + layers[lay] = new L.LayerGroup(); + } + layers[lay].addLayer(markers[n]); + map.addLayer(layers[lay]); } connect();