Let circles be clickable, and better ellipses.

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.0.3-beta - Let circles have popups. Better drawing of ellipses
  - v2.0.2-beta - Let lines and areas also have popups
  - v2.0.1-beta - Add optional graticule.
  - v2.0.0-beta - Move to leaflet 1.4.x plus all plugins updated

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.0.3-beta - Let circles have popups. Better drawing of ellipses
 - v2.0.2-beta - Let lines and areas also have popups
 - v2.0.1-beta - Add optional graticule
 - v2.0.0-beta - Move to leaflet 1.4.x plus all plugins updated
@@ -200,7 +201,7 @@ then rather than draw a point and icon it draws the polygon. Likewise if it cont
  - **clickable** : boolean - set to true to allow click to show popup.
  - **popup** : html string to display in popup (as well as name).
 
-### Circles
+### Circles and Ellipses
 
 If the msg.payload contains a **radius** property, as well as name, lat and lon, then rather
 than draw a point it will draw a circle. The *radius* property is specified in meters.
@@ -209,8 +210,11 @@ than draw a point it will draw a circle. The *radius* property is specified in m
 
 As per Areas and Lines you may also specify *color*, *fillColor*, and *layer*.
 
-If the payload contains a **sdlat** and **sdlon** property instead of *radius* an ellipse will be drawn. The sdlat and sdlon propertys specify the semi-axes of the ellipse.
-These are specified in the Latitude/Longitude format.
+If the **radius** property is an array of two numbers, these specify the minor and major radii
+of an ellipse, in meters. A **tilt** property can also be applied to rotate the ellipse by
+a number of degrees.
+
+    msg.payload = { "name":"Bristol Channel", "lat":51.5, "lon":-2.9, "radius":[30000,70000], "tilt":45 };
 
 ### Options
 
@@ -224,7 +228,7 @@ Areas, Lines and Circles can also specify more optional properties:
  - fillOpacity
  - dashArray
  - clickable - if true sets the passed in name as popup
- - popup - extra html string to display as part of popup
+ - popup - extra html string to display inside the popup
 
 ## Drawing
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.0.2-beta",
+    "version": "2.0.3-beta",
     "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

@@ -1060,13 +1060,10 @@ function setMarker(data) {
         if (!data.hasOwnProperty("fillColor")) { opt.fillColor = "blue"; }
         delete opt.clickable;
         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, opt);
-        if (data.clickable != false) {
-            ellipse.on('click', function(e) {
-                var popup = L.popup()
-                    .setLatLng(new L.LatLng((data.lat*1), (data.lon*1)))
-                    .setContent('<p><b>'+data.name+'</b><br/>lat : '+data.lat+'<br/>lon : '+data.lon+'</p>')
-                    .openOn(map);
-            });
+        if (opt.clickable) {
+            var words = "<b>"+data.name+"</b>";
+            if (data.popup) { var words = words + "<br/>" + data.popup; }
+            ellipse.bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200});
         }
         polygons[data.name] = ellipse;
         polygons[data.name].lay = lay;
@@ -1075,8 +1072,18 @@ function setMarker(data) {
     else {
         if (data.hasOwnProperty("radius")) {
             if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) {
-                var polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, opt);
-                if (opt.clickable) { polycirc.bindPopup(data.name); }
+                var polycirc;
+                if (Array.isArray(data.radius)) {
+                    polycirc = L.ellipse(new L.LatLng((data.lat*1), (data.lon*1)), [data.radius[0]*Math.cos(data.lat*Math.PI/180), data.radius[1]], data.tilt || 0, opt);
+                }
+                else {
+                    polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, opt);
+                }
+                if (opt.clickable) {
+                    var words = "<b>"+data.name+"</b>";
+                    if (data.popup) { var words = words + "<br/>" + data.popup; }
+                    polycirc.bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200});
+                }
                 polygons[data.name] = polycirc;
                 polygons[data.name].lay = lay;
                 layers[lay].addLayer(polycirc);