Add circle mode to map

README.md

@@ -7,6 +7,7 @@ map web page for plotting "things" on.
 ![Map Image](https://dceejay.github.io/pages/images/redmap.png)
 
 ### Changes
+ - v1.0.19 - Add circle mode - specify name, lat, lon and radius.
  - v1.0.18 - Correct .photourl property to match .photoUrl as per docs
  - v1.0.17 - Removed Mapquest maps. Bug fixes - reduced leakage of listeners being added.
  - v1.0.12 - Added ability to set initial start position, zoom level and base map layer.
@@ -70,6 +71,13 @@ then rather than draw a point and icon it draws the polygon. Likewise if it cont
  - **name** : is used as the id key - so can be redrawn/moved.
  - **layer** : declares which layer you put it on..
 
+#### Circles
+
+If the payload contains a **radius** property, as well as name, lat and lon, then rather
+than draw a point it will draw a circle.
+
+As per Areas and Lines you may also specify *iconColor*, and *layer*.
+
 ### Drawing
 
 A single *right click* will allow you to add a point to the map - you must specify the `name` and optionally the `icon` and `layer`.  

package.json

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

worldmap/index.html

@@ -724,6 +724,14 @@ 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) {

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Aug 17th v1.0.17
+# date: Sep 11th v1.0.18
 
 CACHE:
 index.html