add quad(copter) drone icon

bump to 4.4.0

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v4.4.0 - Add quad(copter) drone icon.
  - v4.3.3 - Fix for objects changing layers.
  - v4.3.2 - Fix geojson popup missing label name.
  - v4.3.1 - Small fix to icon transparency, and routing detail.

README.md

@@ -13,6 +13,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
 
 ### Updates
 
+- v4.4.0  - Add quad(copter) drone icon.
 - v4.3.3  - Fix for objects changing layers.
 - v4.3.2  - Fix geojson popup missing label name.
 - v4.3.1  - Small fix to icon transparency, and routing detail.
@@ -106,7 +107,8 @@ There are also several special icons...
  - **ship** : a ship icon that aligns with the heading of travel.
  - **car** : a car icon that aligns with the heading of travel.
  - **bus** : a bus/coach icon that aligns with the heading of travel.
- - **uav** : a small uav like icon that aligns with the heading of travel.
+ - **uav** : a small drone uav like icon that aligns with the heading of travel.
+ - **quad** : a small quadcopter uav like icon that aligns with the heading of travel.
  - **helicopter** : a small helicopter icon that aligns with the heading of travel.
  - **sensor** : a camera icon that points to the heading angle.
  - **arrow** : a map GPS arrow type pointer that aligns with the heading of travel.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "4.3.3",
+    "version": "4.4.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "@turf/bezier-spline": "~6.5.0",

worldmap/worldmap.js

@@ -1845,6 +1845,18 @@ function setMarker(data) {
             });
             marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
+        else if (data.icon === "quad") {
+            data.iconColor = data.iconColor || "black";
+            icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22">';
+            icon+= '<path d="m6 3a3 3 0 0 0 -3 3 3 3 0 0 0 3 3 3 3 0 0 0 1.0859375-.2070312c.5392711.8209481.9140625 1.6424172.9140625 2.2070312 0 .563623-.3724493 1.384498-.9101562 2.205078a3 3 0 0 0 -1.0898438-.205078 3 3 0 0 0 -3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0 -.2050781-1.080078c.8233483-.542436 1.6446221-.919922 2.2050781-.919922.55949 0 1.37815.375313 2.201172.916016a3 3 0 0 0 -.201172 1.083984 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0 -3-3 3 3 0 0 0 -1.085938.207031c-.539273-.820943-.914062-1.642417-.914062-2.207031 0-.563623.372445-1.3844956.910156-2.2050781a3 3 0 0 0 .002.00195 3 3 0 0 0 1.087844.2031281 3 3 0 0 0 3-3 3 3 0 0 0 -3-3 3 3 0 0 0 -3 3 3 3 0 0 0 .205078 1.0800781c-.823351.5424443-1.644622.9199219-2.205078.9199219-.55949 0-1.3781473-.3753084-2.2011719-.9160156a3 3 0 0 0 .2011719-1.0839844 3 3 0 0 0 -3-3zm0 1a2 2 0 0 1 2 2 2 2 0 0 1 -.0527344.453125c-.4577913-.368834-.8926099-.7589139-1.2402344-1.1601562a1 1 0 0 0 -.6933593-.2929688 1 1 0 0 0 -.7207031.2929688 1 1 0 0 0 0 1.4140624 1 1 0 0 0 .058594.054688c.3824613.333788.7551689.7476371 1.1074216 1.1835933a2 2 0 0 1 -.4589844.0546875 2 2 0 0 1 -2-2 2 2 0 0 1 2-2zm10 0a2 2 0 0 1 2 2 2 2 0 0 1 -2 2 2 2 0 0 1 -.457031-.054687c.37051-.4592027.761959-.8951713 1.164062-1.2382813a1 1 0 0 0 0-1.4140624 1 1 0 0 0 -1.414062 0 1 1 0 0 0 -.05274.054687c-.337606.3818392-.750702.7543351-1.185541 1.1054687a2 2 0 0 1 -.054688-.453125 2 2 0 0 1 2-2zm-10 10a2 2 0 0 1 .4570312.05469c-.3705108.459203-.7619484.895165-1.1640624 1.238281a1 1 0 0 0 0 1.414062 1 1 0 0 0 1.4140624 0 1 1 0 0 0 .052734-.05469c.3376223-.381857.7507063-.754333 1.1855473-1.105468a2 2 0 0 1 .0546875.453125 2 2 0 0 1 -2 2 2 2 0 0 1 -2-2 2 2 0 0 1 2-2zm10 0a2 2 0 0 1 2 2 2 2 0 0 1 -2 2 2 2 0 0 1 -2-2 2 2 0 0 1 .05273-.453125c.457792.368835.892604.758903 1.240235 1.160156a1 1 0 0 0 1.414062 0 1 1 0 0 0 0-1.414062c-.01717-.01465-.0336-.03387-.05078-.04883a1 1 0 0 0 -.0078-.0059c-.382475-.333732-.755177-.747602-1.107431-1.183551a2 2 0 0 1 .458984-.054688z" fill="'+data.iconColor+'"/></svg>';
+            var svgquad = "data:image/svg+xml;base64," + btoa(icon);
+            myMarker = L.divIcon({
+                className:"quadicon",
+                iconAnchor: [16, 16],
+                html:'<img src="'+svgquad+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
+            });
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
+        }
         else if (data.icon === "car") {
             data.iconColor = data.iconColor || "black";
             icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="47px" height="47px" viewBox="0 0 47 47">';
@@ -2262,6 +2274,15 @@ function setMarker(data) {
         marker.bindPopup(words, wopt);
         marker._popup.dname = data["name"];
     }
+
+    if (data.hasOwnProperty("clickURL")) {
+        marker.on('click', function () {
+            console.log("Click URL - ",data.clickURL)
+            window.open(data.clickURL.replace('@',''), 'newwindow', 'width=640, height=480');
+            return false;
+        });
+    }
+
     marker.lay = lay;                       // and the layer it is on
 
     // marker.on('click', function(e) {