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)); }
@@ -841,6 +841,7 @@ function setMarker(data) {
         }
 
         // remove icon from list of properties, then add all others to popup
+        if (data.hasOwnProperty("icon") || (!data.hasOwnProperty("radius"))) {
             if (data.hasOwnProperty("icon")) { delete data.icon; }
             if (data.hasOwnProperty("iconColor")) { delete data.iconColor; }
             for (var i in data) {
@@ -867,10 +868,11 @@ function setMarker(data) {
                 rightmenuMarker.setLatLng(e.latlng);
                 map.openPopup(rightmenuMarker);
             });
-        if (heatAll || map.hasLayer(layers[lay])) { heat.addLatLng(ll); }
 
+            if (heatAll || map.hasLayer(layers[lay])) { heat.addLatLng(ll); }
             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