node-red-contrib-web-worldmap 4.3.2 → 4.4.0

package/.github/workflows/eslint.yml

@@ -0,0 +1,50 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master" ]
+  schedule:
+    - cron: '38 2 * * 4'
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install ESLint
+        run: |
+          npm install eslint@8.10.0
+          npm install @microsoft/eslint-formatter-sarif@2.1.7
+
+      - name: Run ESLint
+        run: npx eslint .
+          --config .eslintrc.js
+          --ext .js,.jsx,.ts,.tsx
+          --format @microsoft/eslint-formatter-sarif
+          --output-file eslint-results.sarif
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 ### 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.
  - v4.3.0 - Add support for PMtiles files.

package/README.md

@@ -13,6 +13,8 @@ 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.
 - v4.3.0  - Add support for PMtiles files.
@@ -105,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/package.json

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

package/worldmap/worldmap.js

@@ -1502,28 +1502,30 @@ var rangerings = function(latlng, options) {
 function setMarker(data) {
     var rightmenu = function(m) {
         m.on('click', function(e) {
-            var fb = allData[data.name];
+            var fb = allData[data["name"]];
             fb.action = "click";
             ws.send(JSON.stringify(fb));
         });
         // customise right click context menu
         var rightcontext = "";
-        //if (polygons[data.name] == undefined) {
-        rightcontext = "<button id='delbutton' onclick='delMarker(\""+data.name+"\",true);'>Delete</button>";
+        //if (polygons[data["name"]] == undefined) {
+        rightcontext = "<button id='delbutton' onclick='delMarker(\""+data["name"]+"\",true);'>Delete</button>";
         //}
         if (data.editable) {
-            rightcontext = "<button onclick='editPoly(\""+data.name+"\");'>Edit</button><button onclick='delMarker(\""+data.name+"\",true);'>Delete</button>";
+            rightcontext = "<button onclick='editPoly(\""+data["name"]+"\");'>Edit</button><button onclick='delMarker(\""+data["name"]+"\",true);'>Delete</button>";
         }
         if ((data.contextmenu !== undefined) && (typeof data.contextmenu === "string")) {
-            rightcontext = data.contextmenu.replace(/\${name}/g,data.name);
+            rightcontext = data.contextmenu.replace(/\${name}/g,data["name"]);
             delete data.contextmenu;
         }
-        for (const item in allData[data.name].value) {
-            rightcontext = rightcontext.replace(new RegExp("\\${"+item+"}","g"),allData[data.name].value[item]);
+        if (allData.hasOwnProperty(data["name"]) && allData[data["name"]].hasOwnProperty("value")) {
+            for (const item in allData[data["name"]].value) {
+                rightcontext = rightcontext.replace(new RegExp("\\${"+item+"}","g"),allData[data["name"]].value[item]);
+            }
         }
         rightcontext = rightcontext.replace(/\${.*?}/g,'')
         if (rightcontext.length > 0) {
-            var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<b>"+data.name+"</b><br/>"+rightcontext);
+            var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<b>"+data["name"]+"</b><br/>"+rightcontext);
             if (hiderightclick !== true) {
                 m.on('contextmenu', function(e) {
                     L.DomEvent.stopPropagation(e);
@@ -1544,7 +1546,7 @@ function setMarker(data) {
 
     // console.log("DATA", typeof data, data);
     if (data.deleted == true) { // remove markers we are told to
-        delMarker(data.name);
+        delMarker(data["name"]);
         return;
     }
 
@@ -1576,8 +1578,8 @@ function setMarker(data) {
     }
 
     var lll = "unknown";
-    if (markers.hasOwnProperty(data.name) && markers[data.name].hasOwnProperty("lay")) {
-        lll = markers[data.name].lay;
+    if (markers.hasOwnProperty(data["name"]) && markers[data["name"]].hasOwnProperty("lay")) {
+        lll = markers[data["name"]].lay;
     }
     var lay = data.layer ?? lll;
     if (!data.hasOwnProperty("action") || data.action.indexOf("layer") === -1) {
@@ -1600,27 +1602,27 @@ function setMarker(data) {
             map.addLayer(overlays[lay]);
             //console.log("ADDED LAYER",lay,layers);
         }
-        if (!allData.hasOwnProperty(data.name)) { allData[data.name] = {}; }
+        if (!allData.hasOwnProperty(data["name"])) { allData[data["name"]] = {}; }
         delete data.action;
         Object.keys(data).forEach(function(key) {
-            if (data[key] == null) { delete allData[data.name][key]; }
-            else { allData[data.name][key] = data[key]; }
+            if (data[key] == null) { delete allData[data["name"]][key]; }
+            else { allData[data["name"]][key] = data[key]; }
         });
-        data = Object.assign({},allData[data.name]);
+        data = Object.assign({},allData[data["name"]]);
     }
     delete data.action;
 
-    if (typeof markers[data.name] != "undefined") {
-        if (markers[data.name].lay !== lay) {
-            delMarker(data.name);
+    if (typeof markers[data["name"]] != "undefined") {
+        if (markers[data["name"]].lay !== lay) {
+            delMarker(data["name"]);
         }
         else {
-            try {layers[lay].removeLayer(markers[data.name]); }
+            try {layers[lay].removeLayer(markers[data["name"]]); }
             catch(e) { console.log("OOPS"); }
         }
     }
 
-    if (typeof polygons[data.name] != "undefined") { layers[lay].removeLayer(polygons[data.name]); }
+    if (typeof polygons[data["name"]] != "undefined") { layers[lay].removeLayer(polygons[data["name"]]); }
 
     if (data.hasOwnProperty("drawCount")) { drawCount = data.drawCount; }
     // Draw lines
@@ -1629,14 +1631,14 @@ function setMarker(data) {
         if (!data.hasOwnProperty("weight")) { opt.weight = 3; }    //Standard settings different for lines
         if (!data.hasOwnProperty("opacity")) { opt.opacity = 0.8; }
         var polyln = L.polyline(data.line, opt);
-        polygons[data.name] = rightmenu(polyln);
+        polygons[data["name"]] = rightmenu(polyln);
     }
     // Draw Areas
     else if (data.hasOwnProperty("area") && Array.isArray(data.area)) {
         var polyarea;
         if (data.area.length === 2) { polyarea = L.rectangle(data.area, opt); }
         else { polyarea = L.polygon(data.area, opt); }
-        polygons[data.name] = rightmenu(polyarea);
+        polygons[data["name"]] = rightmenu(polyarea);
     }
     // Draw Great circles
     if (data.hasOwnProperty("greatcircle") && Array.isArray(data.greatcircle) && data.greatcircle.length === 2) {
@@ -1646,14 +1648,14 @@ function setMarker(data) {
         if (!data.hasOwnProperty("opacity")) { opt.opacity = 0.8; }
         var greatc = L.Polyline.Arc(data.greatcircle[0], data.greatcircle[1], opt);
         var aml = new L.Wrapped.Polyline(greatc._latlngs, opt);
-        polygons[data.name] = rightmenu(aml);
+        polygons[data["name"]] = rightmenu(aml);
     }
     // Draw error ellipses
     else if (data.hasOwnProperty("sdlat") && data.hasOwnProperty("sdlon")) {
         if (!data.hasOwnProperty("iconColor")) { opt.color = "blue"; }     //different standard Color Settings
         if (!data.hasOwnProperty("fillColor")) { opt.fillColor = "blue"; }
         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);
-        polygons[data.name] = rightmenu(ellipse);
+        polygons[data["name"]] = rightmenu(ellipse);
     }
     // Draw circles and ellipses
     else if (data.hasOwnProperty("radius")) {
@@ -1665,7 +1667,7 @@ function setMarker(data) {
             else {
                 polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, opt);
             }
-            polygons[data.name] = rightmenu(polycirc);
+            polygons[data["name"]] = rightmenu(polycirc);
             if (!data.hasOwnProperty("icon")) {
                 delete (data.lat);
                 delete (data.lon);
@@ -1675,34 +1677,34 @@ function setMarker(data) {
     // Draw arcs (and range rings)
     else if (data.hasOwnProperty("arc")) {
         if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) {
-            polygons[data.name] = rangerings(new L.LatLng((data.lat*1), (data.lon*1)), data.arc);
+            polygons[data["name"]] = rangerings(new L.LatLng((data.lat*1), (data.lon*1)), data.arc);
         }
     }
     // Draw a geojson "shape"
     else if (data.hasOwnProperty("geojson")) {
-        doGeojson(data.name,data.geojson,(data.layer || "unknown"),opt);
+        doGeojson(data["name"],data.geojson,(data.layer || "unknown"),opt);
     }
 
     // If we created a shape then apply some generic things to it
-    if (polygons[data.name] !== undefined) {
+    if (polygons[data["name"]] !== undefined) {
         // Set the layer
-        polygons[data.name].lay = lay;
+        polygons[data["name"]].lay = lay;
         // if clickable then add popup
         if (opt.clickable === true) {
-            var words = "<b>"+data.name+"</b>";
+            var words = "<b>"+data["name"]+"</b>";
             if (data.popup) { words = words + "<br/>" + data.popup; }
-            polygons[data.name].bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:true, minWidth:200});
+            polygons[data["name"]].bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:true, minWidth:200});
         }
         // add a tooltip (if supplied)
-        if (data.hasOwnProperty("tooltip")) { polygons[data.name].bindTooltip(data.tooltip); }
+        if (data.hasOwnProperty("tooltip")) { polygons[data["name"]].bindTooltip(data.tooltip); }
         // add to the layers
-        layers[lay].addLayer(polygons[data.name]);
+        layers[lay].addLayer(polygons[data["name"]]);
         // fly or fit to the bounds if required
         if (data.hasOwnProperty("fly") && data.fly === true) {
-            map.flyToBounds(polygons[data.name].getBounds(),{padding:[50,50]})
+            map.flyToBounds(polygons[data["name"]].getBounds(),{padding:[50,50]})
         }
         else if (data.hasOwnProperty("fit") && data.fit === true) {
-            map.fitBounds(polygons[data.name].getBounds(),{padding:[50,50]})
+            map.fitBounds(polygons[data["name"]].getBounds(),{padding:[50,50]})
         }
     }
 
@@ -1733,7 +1735,7 @@ function setMarker(data) {
 
     if (ll.lat === 0 && ll.lng === 0) {
         // Add a little wobble so we can zoom into each if required.
-        console.log(data.name,"is at null island.");
+        console.log(data["name"],"is at null island.");
         ll.lat = Math.round(1000000 * ll.lat + Math.random() * 10000 - 5000) / 1000000;
         ll.lng = Math.round(1000000 * ll.lng + Math.random() * 10000 - 5000) / 1000000;
     }
@@ -1757,11 +1759,11 @@ function setMarker(data) {
         var dir = parseFloat(data.track ?? data.hdg ?? data.heading ?? data.bearing ?? "0") + map.getBearing();
         if (data.icon === "ship") {
             marker = L.boatMarker(ll, {
-                title: data.name,
+                title: data["name"],
                 color: (data.iconColor ?? "#5DADE2")
             });
             marker.setHeading(dir);
-            q = 'https://www.bing.com/images/search?q='+data.icon+'%20%2B"'+encodeURIComponent(data.name)+'"';
+            q = 'https://www.bing.com/images/search?q='+data.icon+'%20%2B"'+encodeURIComponent(data["name"])+'"';
             words += '<a href=\''+q+'\' target="_thingpic">Pictures</a><br>';
         }
         else if (data.icon === "plane") {
@@ -1779,7 +1781,7 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 html:'<img src="'+svgplane+'" 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});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if (data.icon === "smallplane") {
             data.iconColor = data.iconColor ?? "black";
@@ -1791,7 +1793,7 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 html:'<img src="'+svgplane+'" style="width:32px; height:32px; -webkit-transform:rotate('+(dir - 45)+'deg); -moz-transform:rotate('+(dir - 45)+'deg);"/>'
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if (data.icon === "bus") {
             dir = dir - 90;
@@ -1807,7 +1809,7 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 html:'<img src="'+svgbus+'" style="width:32px; height:32px; -webkit-transform:scaleY('+sc+') rotate('+dir*sc+'deg); -moz-transform:scaleY('+sc+') rotate('+dir*sc+'deg);"/>'
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if (data.icon === "helicopter") {
             data.iconColor = data.iconColor ?? "black";
@@ -1824,7 +1826,7 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 html:'<img src="'+svgheli+'" 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});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if (data.icon === "uav") {
             data.iconColor = data.iconColor || "black";
@@ -1841,7 +1843,19 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 html:'<img src="'+svguav+'" 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});
+            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";
@@ -1853,7 +1867,7 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 html:'<img src="'+svgcar+'" 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});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if (data.icon === "sensor") {
             data.iconColor = data.iconColor || "#F39C12";
@@ -1864,7 +1878,7 @@ function setMarker(data) {
                 iconAnchor: [12, 12],
                 html:'<img src="'+svgcam+'" style="width:24px; height:24px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if (data.icon === "arrow") {
             data.iconColor = data.iconColor || "black";
@@ -1876,7 +1890,7 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 html:"'<img src='"+svgarrow+"' style='width:32px; height:32px; -webkit-transform:translate(0px,-16px) rotate("+dir+"deg); -moz-transform:translate(0px,-16px) rotate("+dir+"deg);'/>",
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if (data.icon === "wind") {
             data.iconColor = data.iconColor || "black";
@@ -1888,7 +1902,7 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 html:'<img src="'+svgwind+'" 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});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if (data.icon === "satellite") {
             data.iconColor = data.iconColor || "black";
@@ -1905,7 +1919,7 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 html:'<img src="'+svgsat+'" style="width:32px; height:32px;"/>',
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if ((data.icon === "iss") || (data.icon === "ISS")) {
             data.iconColor = data.iconColor || "black";
@@ -1921,7 +1935,7 @@ function setMarker(data) {
                 iconAnchor: [25, 25],
                 html:'<img src="'+svgiss+'" style="width:50px; height:50px;"/>',
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if (data.icon === "mayflower") {
             data.iconColor = data.iconColor || "#910000";
@@ -1933,7 +1947,7 @@ function setMarker(data) {
                 iconAnchor: [12, 24],
                 html:'<img src="'+svgmay+'" style="width:24px; height:48px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
         else if (data.icon === "locate") {
             data.iconColor = data.iconColor || "#00ffff";
@@ -1950,26 +1964,26 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 html:'<img src="'+svglocate+'" style="width:32px; height:32px;"/>',
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
             labelOffset = [12,-4];
         }
         else if (data.icon === "friend") {
-            marker = L.marker(ll, { icon: L.divIcon({ className: 'circle f', iconSize: [20, 12] }), title: data.name, draggable:drag });
+            marker = L.marker(ll, { icon: L.divIcon({ className: 'circle f', iconSize: [20, 12] }), title: data["name"], draggable:drag });
         }
         else if (data.icon === "hostile") {
-            marker = L.marker(ll, { icon: L.divIcon({ className: 'circle h', iconSize: [16, 16] }), title: data.name, draggable:drag });
+            marker = L.marker(ll, { icon: L.divIcon({ className: 'circle h', iconSize: [16, 16] }), title: data["name"], draggable:drag });
         }
         else if (data.icon === "neutral") {
-            marker = L.marker(ll, { icon: L.divIcon({ className: 'circle n', iconSize: [16, 16] }), title: data.name, draggable:drag });
+            marker = L.marker(ll, { icon: L.divIcon({ className: 'circle n', iconSize: [16, 16] }), title: data["name"], draggable:drag });
         }
         else if (data.icon === "unknown") {
-            marker = L.marker(ll, { icon: L.divIcon({ className: 'circle', iconSize: [16, 16] }), title: data.name, draggable:drag });
+            marker = L.marker(ll, { icon: L.divIcon({ className: 'circle', iconSize: [16, 16] }), title: data["name"], draggable:drag });
         }
         else if (data.icon === "danger") {
-            marker = L.marker(ll, { icon: L.divIcon({ className: 'up-triangle' }), title: data.name, draggable:drag });
+            marker = L.marker(ll, { icon: L.divIcon({ className: 'up-triangle' }), title: data["name"], draggable:drag });
         }
         else if (data.icon === "earthquake") {
-            marker = L.marker(ll, { icon: L.divIcon({ className: 'circle e', iconSize: [data.mag*5, data.mag*5] }), title: data.name, draggable:drag });
+            marker = L.marker(ll, { icon: L.divIcon({ className: 'circle e', iconSize: [data.mag*5, data.mag*5] }), title: data["name"], draggable:drag });
         }
         else if (data.icon.match(/^:.*:$/g)) { // emoji icon :smile:
             var em = emojify(data.icon);
@@ -1979,7 +1993,7 @@ function setMarker(data) {
                 html: '<center><span style="font-size:2em; color:'+col+'">'+em+'</span></center>',
                 iconSize: [32, 32]
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
             labelOffset = [12,-4];
         }
         else if (data.icon.match(/^https?:.*$|^\/|^data:image\//)) { // web url icon https://...
@@ -1990,7 +2004,7 @@ function setMarker(data) {
                 iconAnchor: [sz/2, sz/2],
                 popupAnchor: [0, -sz/2]
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag, rotationAngle:dir, rotationOrigin:"center"});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag, rotationAngle:dir, rotationOrigin:"center"});
             labelOffset = [sz/2-4,-4];
             delete data.iconSize;
         }
@@ -2005,7 +2019,7 @@ function setMarker(data) {
                 iconAnchor: [16, 12],
                 popupAnchor: [0, -16]
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
             labelOffset = [8,-8];
         }
         else if (data.icon.substr(0,3) === "wi-") { // weather icon
@@ -2019,7 +2033,7 @@ function setMarker(data) {
                 iconAnchor: [16, 16],
                 popupAnchor: [0, -16]
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
             labelOffset = [16,-16];
         }
         else {
@@ -2029,13 +2043,13 @@ function setMarker(data) {
                 prefix: 'fa',
                 iconColor: 'white'
             });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
             labelOffset = [6,-6];
         }
     }
     else if (data.hasOwnProperty("SIDC")) {  // NATO mil2525 icons
         // "SIDC":"SFGPU------E***","name":"1.C2 komp","fullname":"1.C2 komp/FTS/INSS"
-        myMarker = new ms.Symbol( data.SIDC.toUpperCase(), { uniqueDesignation:unescape(encodeURIComponent(data.name)) });
+        myMarker = new ms.Symbol( data.SIDC.toUpperCase(), { uniqueDesignation:unescape(encodeURIComponent(data["name"])) });
         // Now that we have a symbol we can ask for the echelon and set the symbol size
         var opts = data.options || {};
         var sz = 25;
@@ -2059,7 +2073,7 @@ function setMarker(data) {
             iconAnchor: [myMarker.getAnchor().x, myMarker.getAnchor().y],
             className: "natoicon",
         });
-        marker =  L.marker(ll, { title:data.name, icon:myicon, draggable:drag });
+        marker =  L.marker(ll, { title:data["name"], icon:myicon, draggable:drag });
         edgeAware();
         delete data.options;
     }
@@ -2070,10 +2084,10 @@ function setMarker(data) {
             prefix: 'fa',
             iconColor: 'white'
         });
-        marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+        marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         labelOffset = [6,-6];
     }
-    marker.name = data.name;
+    marker.name = data["name"];
 
     // var createLabelIcon = function(labelText) {
     //     return L.marker(new L.LatLng(51.05, -1.35), {icon:L.divIcon({ html:labelText })});
@@ -2195,7 +2209,7 @@ function setMarker(data) {
     // If .label then use that rather than name tooltip
     if (data.label) {
         if (typeof data.label === "boolean" && data.label === true) {
-            marker.bindTooltip(data.name, { permanent:true, direction:"right", offset:labelOffset });
+            marker.bindTooltip(data["name"], { permanent:true, direction:"right", offset:labelOffset });
         }
         else if (typeof data.label === "string" && data.label.length > 0) {
             marker.bindTooltip(data.label, { permanent:true, direction:"right", offset:labelOffset });
@@ -2253,13 +2267,22 @@ function setMarker(data) {
         words += '<tr><td>lat, lon</td><td>'+ marker.getLatLng().toString().replace('LatLng(','').replace(')','') + '</td></tr>';
         words += '</table>';
     }
-    words = "<b>"+data.name+"</b><br/>" + words.replace(/\${name}/g,data.name); //"<button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
+    words = "<b>"+data["name"]+"</b><br/>" + words.replace(/\${name}/g,data["name"]); //"<button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
     var wopt = {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200};
     if (words.indexOf('<video ') >=0 || words.indexOf('<img ') >=0 ) { wopt.maxWidth="640"; } // make popup wider if it has an image or video
     if (!data.hasOwnProperty("clickable") && data.clickable != false) {
         marker.bindPopup(words, wopt);
-        marker._popup.dname = data.name;
+        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) {
@@ -2271,7 +2294,7 @@ function setMarker(data) {
     if (heat && ((data.addtoheatmap != false) || (!data.hasOwnProperty("addtoheatmap")))) { // Added to give ability to control if points from active layer contribute to heatmap
         if (heatAll || map.hasLayer(layers[lay])) { heat.addLatLng(lli); }
     }
-    markers[data.name] = marker;
+    markers[data["name"]] = marker;
     layers[lay].addLayer(marker);
 
     // var track;
@@ -2294,11 +2317,11 @@ function setMarker(data) {
             else if ( re3.test(""+data.speed) ) { data.length = data.length * 0.44704; }
         }
         if (data.length !== undefined) {
-            if (polygons[data.name] != null && !polygons[data.name].hasOwnProperty("_layers")) {
-                map.removeLayer(polygons[data.name]);
+            if (polygons[data["name"]] != null && !polygons[data["name"]].hasOwnProperty("_layers")) {
+                map.removeLayer(polygons[data["name"]]);
             }
-            if (polygons[data.name] != null && polygons[data.name].hasOwnProperty("name") ) {
-                delete(layers[lay]._layers[polygons[data.name]._leaflet_id]);
+            if (polygons[data["name"]] != null && polygons[data["name"]].hasOwnProperty("name") ) {
+                delete(layers[lay]._layers[polygons[data["name"]]._leaflet_id]);
             }
             var x = ll.lng * 1; // X coordinate
             var y = ll.lat * 1; // Y coordinate
@@ -2328,14 +2351,14 @@ function setMarker(data) {
                     polygon.setStyle({opacity:0});
                 }
             }
-            polygon.name = data.name;
-            if (polygons[data.name] != null && polygons[data.name].hasOwnProperty("_layers")) {
-                polygons[data.name].addLayer(polygon);
+            polygon.name = data["name"];
+            if (polygons[data["name"]] != null && polygons[data["name"]].hasOwnProperty("_layers")) {
+                polygons[data["name"]].addLayer(polygon);
             }
             else {
-                polygons[data.name] = polygon;
+                polygons[data["name"]] = polygon;
             }
-            polygons[data.name].lay = lay;
+            polygons[data["name"]].lay = lay;
             layers[lay].addLayer(polygon);
         }
     }