let you specify both point(icon) and radius

to Close #8
and update fa-icons to 4.7.0

README.md

@@ -6,6 +6,8 @@ map web page for plotting "things" on.
 
 ![Map Image](https://dceejay.github.io/pages/images/redmap.png)
 
+### Changes
+ - v1.0.21 - If you specify range and icon then you get a marker and a range circle, if you just specify range with no icon, you just get a circle, and vice versa.
  - v1.0.20 - Add buildings overlay.
  - v1.0.19 - Add circle mode - specify name, lat, lon and radius.
  - v1.0.18 - Correct .photourl property to match .photoUrl as per docs

package.json

@@ -1,6 +1,6 @@
 {
     "name"          : "node-red-contrib-web-worldmap",
-    "version"       : "1.0.20",
+    "version"       : "1.0.21",
     "description"   : "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies"  : {
         "express": "4.*",

worldmap.html

@@ -79,6 +79,7 @@
 </script>
 
 <script type="text/javascript">
+    RED.keyboard.add("*",/* w */ 87,{ctrl:true, shift:true},function() { window.open(document.location.protocol+"//"+document.location.host+RED.settings.httpNodeRoot+"/worldmap") });
     RED.nodes.registerType('worldmap',{
         category: 'location',
         color:"darksalmon",

worldmap/index.html

@@ -728,14 +728,6 @@ function setMarker(data) {
         polygons[data.name] = polyarea;
         layers[lay].addLayer(polyarea);
     }
-    else if (data.hasOwnProperty("radius")) {
-        if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) {
-            var colac = data.iconColor || "#910000";
-            var polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, {stroke:true, weight:2, color:colac, fillColor:colac, fillOpacity:0.2, clickable:false});
-            polygons[data.name] = polycirc;
-            layers[lay].addLayer(polycirc);
-        }
-    }
     else if (data.hasOwnProperty("sdlat") && data.hasOwnProperty("sdlon")) {
         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, {color:(data.iconColor || "blue"), weight:2} );
         ellipse.on('click', function(e) {
@@ -748,6 +740,14 @@ function setMarker(data) {
         layers[lay].addLayer(ellipse);
     }
     else {
+        if (data.hasOwnProperty("radius")) {
+            if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) {
+                var colac = data.iconColor || "#910000";
+                var polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, {stroke:true, weight:2, color:colac, fillColor:colac, fillOpacity:0.2, clickable:false});
+                polygons[data.name] = polycirc;
+                layers[lay].addLayer(polycirc);
+            }
+        }
         //console.log("handling",data.name);
         if (typeof data.coordinates == "object") { ll = new L.LatLng(data.coordinates[1],data.coordinates[0]); }
         else if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) { ll = new L.LatLng((data.lat*1), (data.lon*1)); }
@@ -837,40 +837,42 @@ function setMarker(data) {
                 prefix: 'fa',
                 iconColor: 'white'
             });
-            marker = L.marker(ll, {title: data.name, icon: myMarker});
+            marker = L.marker(ll, {title:data.name, icon:myMarker});
         }
 
         // remove icon from list of properties, then add all others to popup
-        if (data.hasOwnProperty("icon")) { delete data.icon; }
+        if (data.hasOwnProperty("icon") || (!data.hasOwnProperty("radius"))) {
-        if (data.hasOwnProperty("iconColor")) { delete data.iconColor; }
+            if (data.hasOwnProperty("icon")) { delete data.icon; }
-        for (var i in data) {
+            if (data.hasOwnProperty("iconColor")) { delete data.iconColor; }
-            if (i != "name") {
+            for (var i in data) {
-                if (typeof data[i] === "object") {
+                if (i != "name") {
-                    words += i +" : "+JSON.stringify(data[i])+"<br/>";
+                    if (typeof data[i] === "object") {
-                } else {
+                        words += i +" : "+JSON.stringify(data[i])+"<br/>";
-                    words += i +" : "+data[i]+"<br/>";
+                    } else {
+                        words += i +" : "+data[i]+"<br/>";
+                    }
                 }
             }
-        }
+            if (data.hasOwnProperty("photourl")) {
-        if (data.hasOwnProperty("photourl")) {
+                words += "<img src=\"" + data.photourl + "\" style=\"width:100%; margin-top:10px;\">";
-            words += "<img src=\"" + data.photourl + "\" style=\"width:100%; margin-top:10px;\">";
+            }
-        }
+            if (data.hasOwnProperty("photoUrl")) {
-        if (data.hasOwnProperty("photoUrl")) {
+                words += "<img src=\"" + data.photoUrl + "\" style=\"width:100%; margin-top:10px;\">";
-            words += "<img src=\"" + data.photoUrl + "\" style=\"width:100%; margin-top:10px;\">";
+            }
-        }
+            marker.bindPopup(words);
-        marker.bindPopup(words);
+            marker._popup.dname = data.name;
-        marker._popup.dname = data.name;
+            marker.ts = parseInt(Date.now()/1000);  // save time we got this marker
-        marker.ts = parseInt(Date.now()/1000);  // save time we got this marker
+            marker.lay = lay;                       // and the layer it is on
-        marker.lay = lay;                       // and the layer it is on
+            var rightmenuMarker = L.popup().setContent("<b>"+data.name+"</b><br/><button onclick='delMarker(\""+data.name+"\");'>Delete</button>");
-        var rightmenuMarker = L.popup().setContent("<b>"+data.name+"</b><br/><button onclick='delMarker(\""+data.name+"\");'>Delete</button>");
+            marker.on('contextmenu', function(e) {
-        marker.on('contextmenu', function(e) {
+                rightmenuMarker.setLatLng(e.latlng);
-            rightmenuMarker.setLatLng(e.latlng);
+                map.openPopup(rightmenuMarker);
-            map.openPopup(rightmenuMarker);
+            });
-        });
-        if (heatAll || map.hasLayer(layers[lay])) { heat.addLatLng(ll); }
 
-        markers[data.name] = marker;
+            if (heatAll || map.hasLayer(layers[lay])) { heat.addLatLng(ll); }
-        layers[lay].addLayer(marker);
+            markers[data.name] = marker;
+            layers[lay].addLayer(marker);
+        }
 
         popped = stay;
         if (popped) {

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Oct 18th v1.0.20
+# date: Nov 11th v1.0.21
 
 CACHE:
 index.html