improve geojson layer handling

2020-05-05 23:37:27 +01:00 · 2020-05-05 23:37:27 +01:00 · bea77d3d39
commit bea77d3d39
parent d4f30d8970
4 changed files with 70 additions and 28 deletions
--- 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.
--- 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: '&copy; 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 <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="mapinfo">CC 3.0 BY</a>.
+Car, Bus and Helicopter icons originally made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="mapinfo">CC 3.0 BY</a>.
--- 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",
--- 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]) {
+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)
-            }
-            if (feature.hasOwnProperty("geometry") && feature.geometry.hasOwnProperty("type") && feature.geometry.type === "LineString") {
-                st.fill = false;
+            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('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>'); }
    }
-        overlays[glayer] = L.geoJson(g,opt);
-        //layercontrol.addOverlay(overlays[glayer],glayer);
-        map.addLayer(overlays[glayer]);
+    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();
    }
-    overlays[glayer].addData(g);
+    layers[lay].addLayer(markers[n]);
+    map.addLayer(layers[lay]);
 }

 connect();