allow GPX, KML icon

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v1.4.3 - support custom icon for GPX and KML. Better readme for geojson.
  - v1.4.2 - add NVG layer capability
  - v1.4.1 - let `msg.payload.popup` set the popup contents.
  - v1.4.0 - only send to specific _ sessionid if specified.

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v1.4.3 - support custom icon for GPX and KML. Better readme for geojson.
 - v1.4.2 - add NVG layer capability
 - v1.4.1 - let `msg.payload.popup` set the popup contents.
 - v1.4.0 - only send to specific _ sessionid if specified.
@@ -278,17 +279,20 @@ Optional properties include
     msg.payload.command.map = {
         overlay:"myGeoJSON",
         geojson:{ your geojson feature as an object },
-        opt:{ optional geojson options, style, filter, onEach, Feature, etc },
+        opt:{ optional geojson options, style, etc },
         fit:true
     };
 
+The geojson features may contain a `properties` property. That may also include a `style` with properties - stroke, stroke-width, stroke-opacity, fill, fill-opacity. Any other properties will be listed in the popup.
+
+The `opt` property is optional. See the <a href="https://leafletjs.com/examples/geojson/">Leaflet geojson docs</a> for more info on possible options. Note: only simple options are supported as functions cannot be serialised.
 
 The `fit` property is optional. If present the map will automatically zoom to fit the area relevant to the geojson.
 see http://leafletjs.com/examples/geojson/ for more details about options for opt.
 
 #### To add a new KML, GPX, or TOPOJSON overlay
 
-As per the geojson overlay you can also inject a KML layer or TOPOJSON layer. The syntax is the same but with either a `kml` property - containing the KML string - or a `topojson` property containing the topojson.
+As per the geojson overlay you can also inject a KML layer, GPX layer or TOPOJSON layer. The syntax is the same but with either a `kml` property containing the KML string - a `gpx` property containing a GPX string - or a `topojson` property containing the topojson.
 
     msg.payload.command.map = {
         overlay:"myKML",
@@ -296,9 +300,9 @@ As per the geojson overlay you can also inject a KML layer or TOPOJSON layer. Th
     };
 
 
- For GPX layers, it is possible to define which icon to use for point markers by adding the
+ For GPX and KML layers, it is possible to define which icon to use for point markers by adding the
  following properties to `msg.payload.command.map`:
- - **icon** : <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="mapinfo">font awesome</a> icon name.
+ - **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name.
  - **iconColor** : Standard CSS colour name or #rrggbb hex value.
 
 Again the `fit` property can be added to make the map zoom to the relevant area.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "1.4.2",
+    "version": "1.4.3",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",

worldmap/index.html

@@ -1239,7 +1239,34 @@ function doCommand(cmd) {
             map.removeLayer(overlays[cmd.map.overlay]);
             existsalready = true;
         }
-        var opt = cmd.map.opt || {style:function(feature) {return {color:feature.properties.color||feature.properties.roofColor}}};
+        var opt = cmd.map.opt || { style:function(feature) {
+            var st = { stroke:true, weight:2, fill:true };
+            if (feature.hasOwnProperty("properties")) {
+                st.color = feature.properties.color||feature.properties.roofColor||"black";
+                if (feature.properties.hasOwnProperty("color")) { delete feature.properties.color; }
+                if (feature.properties.hasOwnProperty("roofColor")) { delete feature.properties.roofColor; }
+            }
+            if (feature.hasOwnProperty("properties") && feature.properties.hasOwnProperty('style')) {
+                if (feature.properties.style.hasOwnProperty('stroke')) {
+                    st.color = feature.properties.style.stroke;
+                }
+                if (feature.properties.style.hasOwnProperty('stroke-width')) {
+                    st.weight = feature.properties.style["stroke-width"];
+                }
+                if (feature.properties.style.hasOwnProperty('stroke-opacity')) {
+                    st.opacity = feature.properties.style["stroke-opacity"];
+                }
+                if (feature.properties.style.hasOwnProperty('fill')) {
+                    if (feature.properties.style.fill == "none") { st.fill = false; }
+                    else { st.fillColor = feature.properties.style.fill; }
+                }
+                if (feature.properties.style.hasOwnProperty('fill-opacity')) {
+                    st.fillOpacity = feature.properties.style["fill-opacity"];
+                }
+            }
+            delete feature.properties.style;
+            return st;
+        }};
         opt.onEachFeature = function (f,l) {
             l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
         }
@@ -1289,6 +1316,25 @@ function doCommand(cmd) {
         map.addLayer(overlays[cmd.map.overlay]);
         if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
     }
+
+    var custIco = function() {
+        var customLayer = L.geoJson();
+        if (cmd.map.hasOwnProperty("icon")) {
+            var col = cmd.map.iconColor || "#910000";
+            var myMarker = L.divIcon({
+                className:"faicon",
+                html: '<center><i class="fa fa-fw '+cmd.map.icon+'" style="color:'+col+'"></i></center>',
+                iconSize: [15, 15],
+            });
+            customLayer = L.geoJson(null, {
+                pointToLayer: function(geoJsonPoint, latlng) {
+                    return L.marker(latlng, {icon: myMarker, title: geoJsonPoint.properties.name});
+                }
+            });
+        }
+        return customLayer;
+    }
+
     // Add a new KML overlay layer
     if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("kml") ) {
         if (overlays.hasOwnProperty(cmd.map.overlay)) {
@@ -1296,7 +1342,7 @@ function doCommand(cmd) {
             existsalready = true;
         }
         //var opt = {async:true};
-        overlays[cmd.map.overlay] = omnivore.kml.parse(cmd.map.kml);
+        overlays[cmd.map.overlay] = omnivore.kml.parse(cmd.map.kml, null, custIco());
         if (!existsalready) {
             layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
         }
@@ -1322,22 +1368,7 @@ function doCommand(cmd) {
             map.removeLayer(overlays[cmd.map.overlay]);
             existsalready = true;
         }
-
+        overlays[cmd.map.overlay] = omnivore.gpx.parse(cmd.map.gpx, null, custIco());
-        var customLayer = L.geoJson();
-        if (cmd.map.hasOwnProperty("icon")) {
-            var col = cmd.map.iconColor || "#910000";
-            var myMarker = L.divIcon({
-                className:"faicon",
-                html: '<center><i class="fa fa-fw '+cmd.map.icon+'" style="color:'+col+'"></i></center>',
-                iconSize: [15, 15],
-            });
-            customLayer = L.geoJson(null, {
-                pointToLayer: function(geoJsonPoint, latlng) {
-                    return L.marker(latlng, {icon: myMarker, title: geoJsonPoint.properties.name});
-                }
-            });
-        }
-        overlays[cmd.map.overlay] = omnivore.gpx.parse(cmd.map.gpx, null, customLayer);
 
         if (!existsalready) {
             layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Sept 10th 2018 - v1.4.2
+# date: Sept 20th 2018 - v1.4.3
 
 CACHE:
 index.html