node-red-contrib-web-worldmap 3.0.0 → 4.0.0

package/worldmap/worldmap.js

@@ -16,9 +16,9 @@ var buttons = {};
 var marksIndex = 0;
 var menuOpen = false;
 var clusterAt = 0;
-var maxage = 900;   // default max age of icons on map in seconds - cleared after 10 mins
+var maxage = 900;   // default max age of icons on map in seconds - cleared after 15 mins
 var baselayername = "OSM grey";     // Default base layer OSM but uniform grey
-var pagefoot = " © DCJ 2023"
+var pagefoot = " © DCJ 2023";
 var inIframe = false;
 var showUserMenu = true;
 var showLayerMenu = true;
@@ -28,10 +28,12 @@ var heat;
 var minimap;
 var sidebyside;
 var layercontrol;
-// var drawControl;
+var colorControl;
+var drawCount = 0;
 var drawingColour = "#910000";
+var drawcontextmenu = "";
 var sendDrawing;
-var colorControl;
+var rmenudata = {};
 var sendRoute;
 var oldBounds = {ne:{lat:0, lng:0}, sw:{lat:0, lng:0}};
 var edgeLayer = new L.layerGroup();
@@ -54,7 +56,32 @@ var iconSz = {
     "Command": 44
 };
 
-// L.PM.setOptIn(true);
+var filesAdded = '';
+
+var loadStatic = function(fileName) {
+    if (filesAdded.indexOf(fileName) !== -1) { return; }
+    var head = document.getElementsByTagName('head')[0]
+    if (fileName.indexOf('js') !== -1) {
+        var script = document.createElement('script');
+        script.src = fileName;
+        script.type = 'text/javascript';
+        console.log("Loading: ",fileName);
+        head.append(script);
+        filesAdded += ' ' + fileName;
+    }
+    else if (fileName.indexOf('css') !== -1) {
+        var style = document.createElement('link');
+        style.href = fileName;
+        style.type = 'text/css';
+        style.rel = 'stylesheet';
+        console.log("Loading: ",fileName);
+        head.append(style);;
+        filesAdded += ' ' + fileName;
+    }
+    else {
+        console.log("Unsupported file type: ",fileName);
+    }
+}
 
 // Create the socket
 var connect = function() {
@@ -81,17 +108,15 @@ var connect = function() {
             if (data.hasOwnProperty("type") && data.hasOwnProperty("data") && data.type === "Buffer") { data = data.data.toString(); }
             handleData(data);
         }
-        catch (e) { if (data) { console.log("BAD DATA",data); console.log(e) } }
+        catch (e) { if (data) { console.log("BAD DATA",data); console.log(e); } }
         // console.log("DATA",typeof data,data);
     };
-}
+};
 console.log("CONNECT TO",location.pathname + 'socket');
 
 var handleData = function(data) {
     if (Array.isArray(data)) {
         //console.log("ARRAY");
-        // map.closePopup();
-        // var bnds= L.latLngBounds([0,0]);
         for (var prop in data) {
             if (data[prop].command) { doCommand(data[prop].command); delete data[prop].command; }
             if (data[prop].hasOwnProperty("name")) {
@@ -102,11 +127,11 @@ var handleData = function(data) {
                 data = {command:{map:{overlay:"KML", kml:data[prop].payload}}};
                 doCommand(data.command); return;
             }
-            else { console.log("SKIP A",data[prop]); }
+            else { console.log("SKIP array item",data[prop]); }
         }
-        // map.fitBounds(bnds.pad(0.25));
     }
     else {
+        // Handle some raw string data overlays
         if (typeof data === "string" && data.indexOf("<?xml") == 0) {
             if (data.indexOf("<nvg") != -1) {
                 data = {command:{map:{overlay:"NVG", nvg:data}}};
@@ -118,6 +143,8 @@ var handleData = function(data) {
                 data = {command:{map:{overlay:"GPX", gpx:data}}};
             }
         }
+
+        // handle any commands in the data
         if (data.command) { doCommand(data.command); delete data.command; }
 
         // handle raw geojson type msg
@@ -131,7 +158,7 @@ var handleData = function(data) {
         else if (data.hasOwnProperty("event") && data.event.hasOwnProperty("point")) {
             doTAKjson(data.event);
         }
-        // handle TAK json (from multicast Protobuf)
+        // handle TAK json (from multicast Protobuf via tak-ingest node)
         else if (data.hasOwnProperty("cotEvent") && data.cotEvent.hasOwnProperty("lat") && data.cotEvent.hasOwnProperty("lon")) {
             doTAKMCjson(data.cotEvent);
         }
@@ -147,7 +174,7 @@ var handleData = function(data) {
     }
 }
 
-window.onunload = function() { if (ws) ws.close(); }
+window.onunload = function() { if (ws) { ws.close(); } }
 
 var customTopoLayer = L.geoJson(null, {clickable:false, style: {color:"blue", weight:2, fillColor:"#cf6", fillOpacity:0.04}});
 layers["_countries"] = omnivore.topojson('images/world-50m-flat.json',null,customTopoLayer);
@@ -181,23 +208,16 @@ if (inIframe === true) {
         startzoom = window.localStorage.getItem("lastzoom");
     }
 }
-// if ( window.localStorage.hasOwnProperty("clusterat") ) {
-//     clusterAt = window.localStorage.getItem("clusterat");
-//     document.getElementById("setclus").value = clusterAt;
-// }
-// if ( window.localStorage.hasOwnProperty("maxage") ) {
-//     maxage = window.localStorage.getItem("maxage");
-//     document.getElementById("maxage").value = maxage;
-// }
 
 // Create the Initial Map object.
 map = new L.map('map',{
     zoomSnap: 0.1,
     rotate: true,
-    rotateControl: {
-        closeOnZeroBearing: true,
-        position: 'topleft'
-    },
+    rotateControl: false,
+    // rotateControl: {
+    //     closeOnZeroBearing: true,
+    //     position: 'topleft'
+    // },
     bearing: 0}).setView(startpos, startzoom);
 map.whenReady(function() {
     connect();
@@ -343,7 +363,7 @@ if (inIframe) {
     document.getElementById("menu").style.borderRadius="6px";
 }
 else {
-    console.log("NOT in an iframe");
+    //console.log("NOT in an iframe");
     if (!showUserMenu) { document.getElementById("bars").style.display="none"; }
 
     // Add the fullscreen button
@@ -418,17 +438,17 @@ var Lgrid = L.latlngGraticule({
 // Copyright (c) 2013 Måns Beckman, All rights reserved.
 var edgeAware = function() {
     if (!edgeEnabled) { return; }
-	map.removeLayer(edgeLayer)
-	edgeLayer = new L.layerGroup();
-	var mapBounds = map.getBounds();
-	var mapBoundsCenter = mapBounds.getCenter();
+    map.removeLayer(edgeLayer)
+    edgeLayer = new L.layerGroup();
+    var mapBounds = map.getBounds();
+    var mapBoundsCenter = mapBounds.getCenter();
 
-	pSW = map.options.crs.latLngToPoint(mapBounds.getSouthWest(), map.getZoom());
-	pNE = map.options.crs.latLngToPoint(mapBounds.getNorthEast(), map.getZoom());
-	pCenter = map.options.crs.latLngToPoint(mapBoundsCenter, map.getZoom());
+    pSW = map.options.crs.latLngToPoint(mapBounds.getSouthWest(), map.getZoom());
+    pNE = map.options.crs.latLngToPoint(mapBounds.getNorthEast(), map.getZoom());
+    pCenter = map.options.crs.latLngToPoint(mapBoundsCenter, map.getZoom());
 
-	var viewBounds = L.latLngBounds(map.options.crs.pointToLatLng(L.point(pSW.x - (pCenter.x - pSW.x ), pSW.y - (pCenter.y - pSW.y )), map.getZoom()) , map.options.crs.pointToLatLng(L.point(pNE.x + (pNE.x - pCenter.x) , pNE.y + (pNE.y - pCenter.y) ), map.getZoom()) );
-	for (var id in markers) {
+    var viewBounds = L.latLngBounds(map.options.crs.pointToLatLng(L.point(pSW.x - (pCenter.x - pSW.x ), pSW.y - (pCenter.y - pSW.y )), map.getZoom()) , map.options.crs.pointToLatLng(L.point(pNE.x + (pNE.x - pCenter.x) , pNE.y + (pNE.y - pCenter.y) ), map.getZoom()) );
+    for (var id in markers) {
         if (allData[id] && allData[id].hasOwnProperty("SIDC")) {
             markerLatLng = markers[id].getLatLng();
             if ( viewBounds.contains(markerLatLng) && !mapBounds.contains(markerLatLng) ) {
@@ -471,15 +491,15 @@ var edgeAware = function() {
                 edgeLayer.addLayer(L.marker([lat,lng],{icon:myicon}))
             }
         }
-	}
-	edgeLayer.addTo(map)
+    }
+    edgeLayer.addTo(map)
 }
-// end of edge function
+// end of edgeAware function
 
 var panit = false;
 function doPanit(v) {
     if (v !== undefined) { panit = v; }
-    console.log("Panit set :",panit);
+    // console.log("Panit set :",panit);
 }
 
 var heatAll = false;
@@ -489,24 +509,23 @@ function doHeatAll(v) {
 }
 
 var lockit = false;
-var mb = new L.LatLngBounds([[-120,-360],[120,360]]);
+var mbnds = new L.LatLngBounds([[-120,-360],[120,360]]);
 function doLock(v) {
     if (v !== undefined) { lockit = v; }
     if (lockit === false) {
-        mb = new L.LatLngBounds([[-120,-360],[120,360]]);
+        mbnds = new L.LatLngBounds([[-120,-360],[120,360]]);
         map.dragging.enable();
     }
     else {
-        mb = map.getBounds();
+        mbnds = map.getBounds();
         map.dragging.disable();
         window.localStorage.setItem("lastpos",JSON.stringify(map.getCenter()));
         window.localStorage.setItem("lastzoom", map.getZoom());
         window.localStorage.setItem("lastlayer", baselayername);
-        //window.localStorage.setItem("clusterat", clusterAt);
         window.localStorage.setItem("maxage", maxage);
         console.log("Saved :",JSON.stringify(map.getCenter()),map.getZoom(),baselayername);
     }
-    map.setMaxBounds(mb);
+    map.setMaxBounds(mbnds);
     //console.log("Map bounds lock :",lockit);
 }
 
@@ -581,7 +600,7 @@ function doSearch() {
     marks = [];
     marksIndex = 0;
     for (var key in markers) {
-        if ( (~(key.toLowerCase()).indexOf(value.toLowerCase())) && (mb.contains(markers[key].getLatLng()))) {
+        if ( (~(key.toLowerCase()).indexOf(value.toLowerCase())) && (mbnds.contains(markers[key].getLatLng()))) {
             marks.push(markers[key]);
         }
         if (markers[key].icon === value) {
@@ -616,7 +635,8 @@ function doSearch() {
     else {
         if (lockit) {
             document.getElementById('searchResult').innerHTML = "&nbsp;<font color='#ff0'>Found "+marks.length+" results within bounds.</font>";
-        } else {
+        }
+        else {
             document.getElementById('searchResult').innerHTML = "&nbsp;<font color='#ff0'>Found "+marks.length+" results.</font>";
         }
     }
@@ -639,7 +659,7 @@ function clearSearch() {
     marks = [];
     marksIndex = 0;
     for (var key in markers) {
-        if ( (~(key.toLowerCase()).indexOf(value.toLowerCase())) && (mb.contains(markers[key].getLatLng()))) {
+        if ( (~(key.toLowerCase()).indexOf(value.toLowerCase())) && (mbnds.contains(markers[key].getLatLng()))) {
             marks.push(markers[key]);
         }
     }
@@ -665,7 +685,8 @@ function toggleMenu() {
     menuOpen = !menuOpen;
     if (menuOpen) {
         document.getElementById("menu").style.display = 'block';
-    } else {
+    }
+    else {
         document.getElementById("menu").style.display = 'none';
         dialogue.close();
     }
@@ -814,7 +835,7 @@ var addThing = function() {
     //popped = false;
     var bits = thing.split(",");
     var icon = (bits[1] || "circle").trim();
-    var lay = (bits[2] || "_drawing").trim();
+    var lay = (bits[2] || "unknown").trim(); // TODO: Do we want _drawing here or unknown ?
     var colo = (bits[3] ?? "#910000").trim();
     colo = colorKeywordToRGB(colo);
     var hdg = parseFloat(bits[4] || 0);
@@ -836,28 +857,30 @@ var addThing = function() {
     map.addLayer(layers[lay]);
 }
 
+var form = {};
+var addToForm = function(n,v) { form[n] = v; }
 var feedback = function(n,v,a,c) {
-    if (v === "$form") { v = form; }
+    if (v === "_form") { v = form; }
     if (markers[n]) {
-        //var fp = markers[n]._latlng;
-        // ws.send(JSON.stringify({action:a||"feedback", name:n, value:v, layer:markers[n].lay, lat:fp.lat, lon:fp.lng}));
-        var fb = allData[n];
-        fb.action = a || "feedback";
-        if (v !== undefined) { fb.value = v; }
-        ws.send(JSON.stringify(fb));
+        console.log("FB1",n,v,a,c)
+        allData[n].action = a || "feedback";
+        if (v !== undefined) { allData[n][a||"value"] = v; }
+        ws.send(JSON.stringify(allData[n]));
+        setMarker(allData[n]);
+    }
+    else if (polygons[n]) {
+        console.log("FB2",n,v,a)
+        sendDrawing(n,v,a)
     }
     else {
         if (n === undefined) { n = "map"; }
+        console.log("FB3",n,v,a,c)
+        rmenudata = v;
         ws.send(JSON.stringify({action:a||"feedback", name:n, value:v, lat:rclk.lat, lon:rclk.lng}));
     }
     if (c === true) { map.closePopup(); }
 }
 
-var form = {};
-var addToForm = function(n,v) {
-    form[n] = v;
-}
-
 // map.on('click', function(e) {
 //    ws.send(JSON.stringify({action:"click", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5)}));
 // });
@@ -882,6 +905,12 @@ map.on('contextmenu', function(e) {
             if ((hiderightclick !== true) && (addmenu.length > 0)) {
                 rclk = e.latlng;
                 form = {};
+                var ramen = ""+addmenu;
+                for (const item in rmenudata) {
+                    ramen = ramen.replace(new RegExp("\\${"+item+"}","g"),rmenudata[item]);
+                }
+                ramen = ramen.replace(/\${.*?}/g,'')
+                rightmenuMap.setContent(ramen);
                 rightmenuMap.setLatLng(e.latlng);
                 map.openPopup(rightmenuMap);
                 setTimeout( function() {
@@ -893,7 +922,6 @@ map.on('contextmenu', function(e) {
     }
 });
 
-
 // Layer control based on select box rather than radio buttons.
 //var layercontrol = L.control.selectLayers(basemaps, overlays).addTo(map);
 layercontrol = L.control.layers(basemaps, overlays);
@@ -1086,7 +1114,6 @@ var addOverlays = function(overlist) {
 
         layers["_drawing"] = new L.FeatureGroup();
         overlays["drawing"] = layers["_drawing"];
-        var drawCount = 0;
         map.pm.addControls({
             position: 'topleft',
             drawMarker: false,
@@ -1102,19 +1129,27 @@ var addOverlays = function(overlist) {
                 color: drawingColour,
                 fillColor: drawingColour,
                 fillOpacity: 0.4
-              });
+            });
         }
 
         var shape;
         map.on("pm:create", (e) => {
-            var name = e.shape + drawCount;
             drawCount = drawCount + 1;
+            var name = e.shape + drawCount;
 
             e.layer.on('contextmenu', function(e) {
                 L.DomEvent.stopPropagation(e);
+                var name = e.target.name;
                 var rmen = L.popup({offset:[0,-12]}).setLatLng(e.latlng);
-                rmen.setContent("<input type='text' value='"+e.target.name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+e.target.name+"\");'>Edit points</button><button onclick='editPoly(\""+e.target.name+"\",\"drag\");'>Drag</button><button onclick='editPoly(\""+e.target.name+"\",\"rot\");'>Rotate</button><button onclick='delMarker(\""+e.target.name+"\",true);'>Delete</button><button onclick='sendDrawing();'>OK</button>");
-                map.openPopup(rmen);
+                var d = drawcontextmenu || "<input type='text' value='${name}' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\"${name}\");'>Edit points</button><button onclick='editPoly(\"${name}\",\"drag\");'>Drag</button><button onclick='editPoly(\"${name}\",\"rot\");'>Rotate</button><button onclick='delMarker(\"${name}\",true);'>Delete</button><button onclick='sendDrawing();'>OK</button>";
+                d = d.replace(/\${name}/g,name);
+                if (e.target.value) {
+                    for (const item in e.target.value) {
+                        d = d.replace(new RegExp("\\${"+item+"}","g"),e.target.value[item]);
+                    }
+                }
+                rmen.setContent(d);
+                setImmediate(function() { map.openPopup(rmen) });
             });
             e.layer.bindPopup(name);
 
@@ -1127,7 +1162,7 @@ var addOverlays = function(overlist) {
             else {
                 cent = e.layer.getBounds().getCenter();
             }
-            var m = {action:"draw", name:name, type:e.shape, layer:"_drawing", options:e.layer.options, radius:e.layer._mRadius, lat:la, lon:lo};
+            var m = {action:"draw", name:name, type:e.shape, layer:"_drawing", options:e.layer.options, radius:e.layer._mRadius, lat:la, lon:lo, drawCount:drawCount};
             if (e.layer.hasOwnProperty("_latlngs")) {
                 if (e.layer.options.fill === false) { m.line = e.layer._latlngs; }
                 else { m.area = e.layer._latlngs[0]; }
@@ -1139,21 +1174,24 @@ var addOverlays = function(overlist) {
             polygons[name].name = name;
             layers["_drawing"].addLayer(shape.layer);
 
-            var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<input type='text' autofocus value='"+name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+name+"\");'>Edit points</button><button onclick='editPoly(\""+name+"\",\"drag\");'>Drag</button><button onclick='editPoly(\""+name+"\",\"rot\");'>Rotate</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button><button onclick='sendDrawing(\""+name+"\");'>OK</button>");
+            var rightmenuMarker = L.popup({offset:[0,-12]}).setContent(drawcontextmenu.replace(/\${name}/g,name).replace(/\${.*?}/g,'') || "<input type='text' autofocus value='"+name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+name+"\");'>Edit points</button><button onclick='editPoly(\""+name+"\",\"drag\");'>Drag</button><button onclick='editPoly(\""+name+"\",\"rot\");'>Rotate</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button><button onclick='sendDrawing(\""+name+"\");'>OK</button>");
             if (e.layer.options.fill === false && navigator.onLine) {
-                rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<input type='text' autofocus value='"+name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+name+"\");'>Edit points</button><button onclick='editPoly(\""+name+"\",\"drag\");'>Drag</button><button onclick='editPoly(\""+name+"\",\"rot\");'>Rotate</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button><button onclick='sendRoute(\""+name+"\");'>Route</button><button onclick='sendDrawing(\""+name+"\");'>OK</button>");
+                rightmenuMarker = L.popup({offset:[0,-12]}).setContent(drawcontextmenu.replace(/\${name}/g,name).replace(/\${.*?}/g,'') || "<input type='text' autofocus value='"+name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+name+"\");'>Edit points</button><button onclick='editPoly(\""+name+"\",\"drag\");'>Drag</button><button onclick='editPoly(\""+name+"\",\"rot\");'>Rotate</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button><button onclick='sendRoute(\""+name+"\");'>Route</button><button onclick='sendDrawing(\""+name+"\");'>OK</button>");
             }
             rightmenuMarker.setLatLng(cent);
             setTimeout(function() {map.openPopup(rightmenuMarker)},25);
         });
 
-        sendDrawing = function(n) {
-            var thing = document.getElementById('dinput').value;
+        sendDrawing = function(n,v,a) {
+            var thing = document.getElementById('dinput')?.value || n;
             map.closePopup();
             shape.m.name = thing;
             shape.layer.bindPopup(thing);
             delMarker(n,true);
-
+            if (v) {
+                shape.layer.value = v;
+                shape.m.value = v;
+            }
             polygons[thing] = shape.layer;
             polygons[thing].lay = "_drawing";
             polygons[thing].name = thing;
@@ -1224,7 +1262,8 @@ var addOverlays = function(overlist) {
                     numbers.push(current);
                     current = 0;
                     shift = 0;
-                } else {
+                }
+                else {
                     shift += 5;
                 }
             }
@@ -1250,6 +1289,8 @@ var addOverlays = function(overlist) {
                     sendDrawing(n);
                 });
         }
+
+        changeDrawColour("#4040F0");  // Set default drawing color to blue on start
     }
 
     // Add the countries (world-110m) for offline use
@@ -1346,10 +1387,11 @@ var addOverlays = function(overlist) {
 if (!inIframe) { layercontrol.addTo(map); }
 else { showLayerMenu = false;}
 
+// Add optional mouse co-ordinates display
 var coords = L.control.mouseCoordinate({position:"bottomleft"});
 
 // Add an optional legend
-var legend = L.control({ position: "bottomleft" });
+var legend = L.control({position:"bottomleft"});
 
 // Add the dialog box for messages
 // var dialogue = L.control.dialog({initOpen:false, size:[600,400], anchor:[50,150]}).addTo(map);
@@ -1382,9 +1424,11 @@ helpText += 'The default is that only visible layers add to the heatmap.</p>';
 // Delete a marker or shape (and notify websocket)
 var delMarker = function(dname,note) {
     if (note) { map.closePopup(); }
+    var pol = false;
     if (typeof polygons[dname] != "undefined") {
         layers[polygons[dname].lay].removeLayer(polygons[dname]);
         delete polygons[dname];
+        pol = true;
     }
     if (typeof polygons[dname+"_"] != "undefined") {
         layers[polygons[dname+"_"].lay].removeLayer(polygons[dname+"_"]);
@@ -1400,7 +1444,10 @@ var delMarker = function(dname,note) {
         delete markers[dname];
     }
     delete allData[dname];
-    if (note) { ws.send(JSON.stringify({action:"delete", name:dname, deleted:true})); }
+    if (note) {
+        if (pol === true) { ws.send(JSON.stringify({action:"drawdelete", name:dname, deleted:true})); }
+        else { ws.send(JSON.stringify({action:"delete", name:dname, deleted:true})); }
+    }
 }
 
 var editPoly = function(pname,fun) {
@@ -1419,6 +1466,7 @@ var editPoly = function(pname,fun) {
             lo = e.target._latlng.lng;
         }
         var m = {action:"draw", name:pname, layer:polygons[pname].lay, options:e.target.options, radius:e.target._mRadius, lat:la, lon:lo};
+        if (e.target.value) { m.value = e.target.value; }
         if (e.target.hasOwnProperty("_latlngs")) {
             if (e.target.options.fill === false) { m.line = e.target._latlngs; }
             else { m.area = e.target._latlngs[0]; }
@@ -1427,7 +1475,6 @@ var editPoly = function(pname,fun) {
     })
 }
 
-
 var rangerings = function(latlng, options) {
     options = L.extend({
         ranges: [250,500,750,1000],
@@ -1448,7 +1495,7 @@ var rangerings = function(latlng, options) {
     return rings;
 }
 
-// the MAIN add something to map function
+// the MAIN add marker or shape to map function
 function setMarker(data) {
     var rightmenu = function(m) {
         m.on('click', function(e) {
@@ -1465,9 +1512,13 @@ function setMarker(data) {
             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]);
+        }
+        rightcontext = rightcontext.replace(/\${.*?}/g,'')
         if (rightcontext.length > 0) {
             var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<b>"+data.name+"</b><br/>"+rightcontext);
             if (hiderightclick !== true) {
@@ -1496,15 +1547,15 @@ function setMarker(data) {
 
     var ll;
     var lli = null;
-    var opt = {};
-    opt.color = data.color ?? data.lineColor ?? "#910000";
-    opt.fillColor = data.fillColor ?? "#910000";
-    opt.stroke = (data.hasOwnProperty("stroke")) ? data.stroke : true;
-    opt.weight = data.weight;
-    opt.opacity = data.opacity;
-    opt.fillOpacity = data.fillOpacity;
+    var opt = data.options || {};
+    opt.color = opt.color ?? data.color ?? data.lineColor ?? "#910000";
+    opt.fillColor = opt.fillColor ?? data.fillColor ?? "#910000";
+    opt.stroke = opt.stroke ?? (data.hasOwnProperty("stroke")) ? data.stroke : true;
+    opt.weight = opt.weight ?? data.weight;
+    opt.opacity = opt.opacity ?? data.opacity;
+    opt.fillOpacity = opt.fillOpacity ?? data.fillOpacity;
     opt.clickable = (data.hasOwnProperty("clickable")) ? data.clickable : false;
-    opt.fill = (data.hasOwnProperty("fill")) ? data.fill : true;
+    opt.fill = opt.fill ?? (data.hasOwnProperty("fill")) ? data.fill : true;
     if (data.hasOwnProperty("dashArray")) { opt.dashArray = data.dashArray; }
     if (opt.fillOpacity === undefined) { opt.fillOpacity = 0.2; }
     if (opt.opacity === undefined) { opt.opacity = 1; }
@@ -1571,29 +1622,23 @@ function setMarker(data) {
 
     if (typeof polygons[data.name] != "undefined") { layers[lay].removeLayer(polygons[data.name]); }
 
+    if (data.hasOwnProperty("drawCount")) { drawCount = data.drawCount; }
+    // Draw lines
     if (data.hasOwnProperty("line") && Array.isArray(data.line)) {
         delete opt.fill;
         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);
-        if (data.hasOwnProperty("fly") && data.fly === true) {
-            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]})
-        }
     }
+    // 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);
-        if (data.hasOwnProperty("fly") && data.fly === true) {
-            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]})
-        }
     }
+    // Draw Great circles
     if (data.hasOwnProperty("greatcircle") && Array.isArray(data.greatcircle) && data.greatcircle.length === 2) {
         delete opt.fill;
         opt.vertices = opt.vertices || 20;
@@ -1601,25 +1646,20 @@ 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);
-        if (data.hasOwnProperty("fly") && data.fly === true) {
-            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]})
-        }
     }
+    // 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);
     }
+    // Draw circles and ellipses
     else if (data.hasOwnProperty("radius")) {
         if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) {
             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);
                 polycirc = L.ellipse(new L.LatLng((data.lat*1), (data.lon*1)), [data.radius[0], data.radius[1]], data.tilt || 0, opt);
             }
             else {
@@ -1632,26 +1672,41 @@ 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);
         }
     }
+    // Draw a geojson "shape"
     else if (data.hasOwnProperty("geojson")) {
         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) {
+        // Set the layer
         polygons[data.name].lay = lay;
+        // if clickable then add popup
         if (opt.clickable === true) {
             var words = "<b>"+data.name+"</b>";
             if (data.popup) { words = words + "<br/>" + data.popup; }
-            polygons[data.name].bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200});
+            polygons[data.name].bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:true, minWidth:200});
         }
-        //polygons[data.name] = rightmenu(polygons[data.name]); // DCJ Investigate
+        // add a tooltip (if supplied)
+        if (data.hasOwnProperty("tooltip")) { polygons[data.name].bindTooltip(data.tooltip); }
+        // add to the layers
         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]})
+        }
+        else if (data.hasOwnProperty("fit") && data.fit === true) {
+            map.fitBounds(polygons[data.name].getBounds(),{padding:[50,50]})
+        }
     }
 
+    // Now handle the markers
     if (typeof data.coordinates == "object") { ll = new L.LatLng(data.coordinates[1],data.coordinates[0]); }
     else if (data.hasOwnProperty("position") && data.position.hasOwnProperty("lat") && data.position.hasOwnProperty("lon")) {
         data.lat = data.position.lat*1;
@@ -1691,7 +1746,7 @@ function setMarker(data) {
     if (data.draggable === true) { drag = true; }
 
     if (data.hasOwnProperty("icon")) {
-        var dir = parseFloat(data.hdg ?? data.heading ?? data.bearing ?? "0");
+        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,
@@ -1792,6 +1847,17 @@ function setMarker(data) {
             });
             marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
         }
+        else if (data.icon === "sensor") {
+            data.iconColor = data.iconColor || "#F39C12";
+            icon = '<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><path fill="'+data.iconColor+'" d="M 478.281 5.437 L 367.741 118.227 L 367.741 84.075 C 367.741 38.352 344.315 1.298 315.417 1.298 L 53.768 1.298 C 24.87 1.298 1.434 38.352 1.434 84.075 L 1.434 415.183 C 1.434 460.893 24.87 497.959 53.768 497.959 L 315.417 497.959 C 344.315 497.959 367.741 460.893 367.741 415.183 L 367.741 381.031 L 478.281 493.808 C 490.714 504.155 498.566 486.571 498.566 476.224 L 498.566 21.993 C 498.566 11.646 491.37 -6.979 478.281 5.437 Z M 341.573 415.183 C 341.573 438.044 329.86 456.571 315.417 456.571 L 53.768 456.571 C 39.314 456.571 27.612 438.044 27.612 415.183 L 27.612 84.075 C 27.612 61.226 39.314 42.687 53.768 42.687 L 315.417 42.687 C 329.86 42.687 341.573 61.226 341.573 84.075 L 341.573 415.183 Z M 472.398 438.975 L 367.741 332.406 L 367.741 166.853 L 472.398 60.27 L 472.398 438.975 Z" style="transform-origin: 250.000025px 249.628505px;" transform="matrix(0, -1, 1, 0, -0.000013709068, 0.000009864569)"/></svg>';
+            var svgcam = "data:image/svg+xml;base64," + btoa(icon);
+            myMarker = L.divIcon({
+                className:"camicon",
+                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});
+        }
         else if (data.icon === "arrow") {
             data.iconColor = data.iconColor || "black";
             icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 32 32">';
@@ -1897,7 +1963,7 @@ function setMarker(data) {
         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 });
         }
-        else if (data.icon.match(/^:.*:$/g)) {
+        else if (data.icon.match(/^:.*:$/g)) { // emoji icon :smile:
             var em = emojify(data.icon);
             var col = data.iconColor ?? "#910000";
             myMarker = L.divIcon({
@@ -1908,7 +1974,7 @@ function setMarker(data) {
             marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
             labelOffset = [12,-4];
         }
-        else if (data.icon.match(/^https?:.*$|^\//)) {
+        else if (data.icon.match(/^https?:.*$|^\//)) { // web url icon https://...
             var sz = data.iconSize ?? 32;
             myMarker = L.icon({
                 iconUrl: data.icon,
@@ -1920,7 +1986,7 @@ function setMarker(data) {
             labelOffset = [sz/2-4,-4];
             delete data.iconSize;
         }
-        else if (data.icon.substr(0,3) === "fa-") {
+        else if (data.icon.substr(0,3) === "fa-") { // fa icon
             var col = data.iconColor ?? "#910000";
             var imod = "";
             if (data.icon.indexOf(" ") === -1) { imod = "fa-2x "; }
@@ -1934,7 +2000,7 @@ function setMarker(data) {
             marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
             labelOffset = [8,-8];
         }
-        else if (data.icon.substr(0,3) === "wi-") {
+        else if (data.icon.substr(0,3) === "wi-") { // weather icon
             var col = data.iconColor ?? "#910000";
             var imod = "";
             if (data.icon.indexOf(" ") === -1) { imod = "wi-2x "; }
@@ -1949,7 +2015,7 @@ function setMarker(data) {
             labelOffset = [16,-16];
         }
         else {
-            myMarker = L.VectorMarkers.icon({
+            myMarker = L.VectorMarkers.icon({ // default - fa-icon in a marker shape
                 icon: data.icon ?? "circle",
                 markerColor: (data.iconColor ?? "#910000"),
                 prefix: 'fa',
@@ -1959,7 +2025,7 @@ function setMarker(data) {
             labelOffset = [6,-6];
         }
     }
-    else if (data.hasOwnProperty("SIDC")) {
+    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)) });
         // Now that we have a symbol we can ask for the echelon and set the symbol size
@@ -1988,7 +2054,7 @@ function setMarker(data) {
         marker =  L.marker(ll, { title:data.name, icon:myicon, draggable:drag });
         edgeAware();
     }
-    else {
+    else { // Otherwise just a generic map marker pin
         myMarker = L.VectorMarkers.icon({
             icon: "circle",
             markerColor: (data.iconColor ?? "#910000"),
@@ -2033,7 +2099,8 @@ function setMarker(data) {
     }
 
     // tidy up altitude
-    if (data.hasOwnProperty("alt")) {
+    if (data.hasOwnProperty("alt")||data.hasOwnProperty("altitude")) {
+        data.alt = data.alt ?? data.altitude;
         var reft = new RegExp('feet|ft','i');
         var refm = new RegExp('metres|m','i');
         if ( reft.test(""+data.alt) ) {
@@ -2047,8 +2114,8 @@ function setMarker(data) {
         }
     }
 
-    // remove icon from list of properties, then add all others to popup
-    if (data.hasOwnProperty("SIDC") && data.hasOwnProperty("options")) { delete data.options; }
+    // remove items from list of properties, then add all others to popup
+    if (data.hasOwnProperty("options")) { delete data.options; }
     if (data.hasOwnProperty("icon")) { delete data.icon; }
     if (data.hasOwnProperty("iconColor")) { delete data.iconColor; }
     if (data.hasOwnProperty("photourl")) {
@@ -2076,13 +2143,14 @@ function setMarker(data) {
         if (!Array.isArray(data.weblink) || !data.weblink.length) {
             if (typeof data.weblink === "string") {
                 words += "<b><a href='"+ data.weblink + "' target='_new'>more information...</a></b><br/>";
-            } else {
+            }
+            else {
                 var tgt = data.weblink.target || "_new";
                 words += "<b><a href='"+ data.weblink.url + "' target='"+ tgt + "'>" + data.weblink.name + "</a></b><br/>";
             }
         }
         else {
-            data.weblink.forEach(function(weblink){
+            data.weblink.forEach(function(weblink) {
                 if (typeof weblink === "string") {
                     words += "<b><a href='"+ weblink + "' target='_new'>more information...</a></b><br/>";
                 }
@@ -2124,10 +2192,11 @@ function setMarker(data) {
         }
     }
 
+    // Add right click contextmenu
     marker = rightmenu(marker);
 
-    // Add any remaining properties to the info box
-    var llc = data.lineColor || data.color;
+    // Delete more already handled properties
+    var llc = data.lineColor ?? data.color;
     delete data.lat;
     delete data.lon;
     if (data.arc) { delete data.arc; }
@@ -2143,15 +2212,17 @@ function setMarker(data) {
     if (data.hasOwnProperty("fillColor")) { delete data.fillColor; }
     if (data.hasOwnProperty("radius")) { delete data.radius; }
     if (data.hasOwnProperty("greatcircle")) { delete data.greatcircle; }
+
+    // then any remaining properties to the info box
     if (data.popup) { words = data.popup; }
     else {
         words += '<table>';
         for (var i in data) {
             if ((i != "name") && (i != "length") && (i != "clickable")) {
                 if (typeof data[i] === "object") {
-                    //
                     words += '<tr><td>'+ i +'</td><td>' + JSON.stringify(data[i]) + '</td></tr>';
-                } else {
+                }
+                else {
                     // words += i +" : "+data[i]+"<br/>";
                     words += '<tr><td>'+ i +'</td><td>' + data[i] + '</td></tr>';
                 }
@@ -2160,9 +2231,9 @@ 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; //"<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"; }
+    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;
@@ -2180,11 +2251,15 @@ function setMarker(data) {
     }
     markers[data.name] = marker;
     layers[lay].addLayer(marker);
-    var track;
-    if (data.track !== undefined) { track = data.track; }
-    else if (data.hdg !== undefined) { track = data.hdg; }
-    else if (data.heading !== undefined) { track = data.heading; }
-    else if (data.bearing !== undefined) { track = data.bearing; }
+
+    // var track;
+    // if (data.track !== undefined) { track = data.track; }
+    // else if (data.hdg !== undefined) { track = data.hdg; }
+    // else if (data.heading !== undefined) { track = data.heading; }
+    // else if (data.bearing !== undefined) { track = data.bearing; }
+
+    // Now add any leader lines
+    var track = data.track ?? data.hdg ?? data.heading ?? data.bearing;
     if (track != undefined) {  // if there is a heading
         if (data.speed != null && data.length === undefined) {  // and a speed - lets convert to a leader length
             data.length = parseFloat(data.speed || "0") * 60;
@@ -2217,7 +2292,8 @@ function setMarker(data) {
                 var x3 = x + Math.cos((90-angle-data.accuracy)/180*Math.PI)*lengthAsDegrees/Math.cos(y/180*Math.PI);
                 var ll3 = new L.LatLng(y3,x3);
                 polygon = L.polygon([ ll1, ll2, ll3 ], {weight:2, color:llc||'#900', fillOpacity:0.06, clickable:false});
-            } else {
+            }
+            else {
                 var ya = y + Math.sin((90-angle)/180*Math.PI)*lengthAsDegrees;
                 var xa = x + Math.cos((90-angle)/180*Math.PI)*lengthAsDegrees/Math.cos(y/180*Math.PI);
                 var lla = new L.LatLng(ya,xa);
@@ -2246,7 +2322,7 @@ function setMarker(data) {
 
 // handle any incoming COMMANDS to control the map remotely
 function doCommand(cmd) {
-    // console.log("COMMAND",cmd);
+    //console.log("COMMAND",cmd);
     if (cmd.init && cmd.hasOwnProperty("maplist")) {
         //basemaps = {};
         addBaseMaps(cmd.maplist,cmd.layer);
@@ -2275,10 +2351,6 @@ function doCommand(cmd) {
         else { panit = false; }
         document.getElementById("panit").checked = panit;
     }
-    if (cmd.hasOwnProperty("hiderightclick")) {
-        if (cmd.hiderightclick == "true" || cmd.hiderightclick == true) { hiderightclick = true; }
-        else { hiderightclick = false; }
-    }
     if (cmd.hasOwnProperty("showmenu")) {
         if ((cmd.showmenu === "hide") && (showUserMenu === true)) {
             showUserMenu = false;
@@ -2371,10 +2443,18 @@ function doCommand(cmd) {
             if (trackMeButton !== undefined) { trackMeButton.state('track-on'); }
         }
     }
+    if (cmd.hasOwnProperty("hiderightclick")) {
+        if (cmd.hiderightclick == "true" || cmd.hiderightclick == true) { hiderightclick = true; }
+        else { hiderightclick = false; }
+    }
     if (cmd.hasOwnProperty("contextmenu")) {
         if (typeof cmd.contextmenu === "string") {
             addmenu = cmd.contextmenu;
-            rightmenuMap.setContent(addmenu);
+        }
+    }
+    if (cmd.hasOwnProperty("drawcontextmenu")) {
+        if (typeof cmd.drawcontextmenu === "string") {
+            drawcontextmenu = cmd.drawcontextmenu;
         }
     }
     if (cmd.hasOwnProperty("allowFileDrop")) {
@@ -2467,57 +2547,69 @@ function doCommand(cmd) {
         }
     }
     // Add a new geojson overlay layer
-    if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("geojson") ) {
+    if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("geojson")) {
         if (overlays.hasOwnProperty(cmd.map.overlay)) {
             map.removeLayer(overlays[cmd.map.overlay]);
             existsalready = true;
         }
-        var opt = cmd.map.opt || { style:function(feature) {
-            var st = { stroke:true, weight:2, fill:true };
-            if (feature.hasOwnProperty("properties")) {
-                st.color = feature.properties.color||feature.properties.roofColor||"black";
-                if (feature.properties.hasOwnProperty("color")) { delete feature.properties.color; }
-                if (feature.properties.hasOwnProperty("roofColor")) { delete feature.properties.roofColor; }
+        try {
+            var opt = cmd.map.opt || {};
+            if (opt.hasOwnProperty("style")) { opt.style = new Function('return ' + opt.style)(); }
+            else {
+                opt.style = function(feature) {
+                    var st = { stroke:true, weight:2, fill:true };
+                    if (feature.hasOwnProperty("properties")) {
+                        st.color = feature.properties.color||feature.properties.roofColor||"black";
+                        if (feature.properties.hasOwnProperty("color")) { delete feature.properties.color; }
+                        if (feature.properties.hasOwnProperty("roofColor")) { delete feature.properties.roofColor; }
+                    }
+                    if (feature.hasOwnProperty("properties") && feature.properties.hasOwnProperty('style')) {
+                        if (feature.properties.style.hasOwnProperty('stroke')) {
+                            st.color = feature.properties.style.stroke;
+                        }
+                        if (feature.properties.style.hasOwnProperty('stroke-width')) {
+                            st.weight = feature.properties.style["stroke-width"];
+                        }
+                        if (feature.properties.style.hasOwnProperty('stroke-opacity')) {
+                            st.opacity = feature.properties.style["stroke-opacity"];
+                        }
+                        if (feature.properties.style.hasOwnProperty('fill')) {
+                            if (feature.properties.style.fill == "none") { st.fill = false; }
+                            else { st.fillColor = feature.properties.style.fill; }
+                        }
+                        if (feature.properties.style.hasOwnProperty('fill-opacity')) {
+                            st.fillOpacity = feature.properties.style["fill-opacity"];
+                        }
+                    }
+                    delete feature.properties.style;
+                    return st;
+                };
             }
-            if (feature.hasOwnProperty("properties") && feature.properties.hasOwnProperty('style')) {
-                if (feature.properties.style.hasOwnProperty('stroke')) {
-                    st.color = feature.properties.style.stroke;
-                }
-                if (feature.properties.style.hasOwnProperty('stroke-width')) {
-                    st.weight = feature.properties.style["stroke-width"];
-                }
-                if (feature.properties.style.hasOwnProperty('stroke-opacity')) {
-                    st.opacity = feature.properties.style["stroke-opacity"];
-                }
-                if (feature.properties.style.hasOwnProperty('fill')) {
-                    if (feature.properties.style.fill == "none") { st.fill = false; }
-                    else { st.fillColor = feature.properties.style.fill; }
-                }
-                if (feature.properties.style.hasOwnProperty('fill-opacity')) {
-                    st.fillOpacity = feature.properties.style["fill-opacity"];
+            if (opt.hasOwnProperty("pointToLayer")) { opt.pointToLayer = new Function('return ' + opt.pointToLayer)(); }
+            if (opt.hasOwnProperty("filter")) { opt.filter = new Function('return ' + opt.filter)(); }
+            if (opt.hasOwnProperty("onEachFeature")) { opt.onEachFeature = new Function('return ' + opt.onEachFeature)(); }
+            else {
+                opt.onEachFeature = function (f,l) {
+                    var pw = '<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>';
+                    if (pw.length > 11) { l.bindPopup(pw); }
+                    if (cmd.map.hasOwnProperty("clickable") && cmd.map.clickable === true) {
+                        l.on('click', function (e) {
+                            ws.send(JSON.stringify({action:"clickgeo",name:cmd.map.overlay,type:f.type,properties:f.properties,geometry:f.geometry}));
+                        });
+                    }
                 }
             }
-            delete feature.properties.style;
-            return st;
-        }};
-        opt.onEachFeature = function (f,l) {
-            var pw = '<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>';
-            if (pw.length > 11) { l.bindPopup(pw); }
-            if (cmd.map.hasOwnProperty("clickable") && cmd.map.clickable === true) {
-                l.on('click', function (e) {
-                    ws.send(JSON.stringify({action:"clickgeo",name:cmd.map.overlay,type:f.type,properties:f.properties,geometry:f.geometry}));
-                });
+            overlays[cmd.map.overlay] = L.geoJson(cmd.map.geojson,opt);
+            if (!existsalready) {
+                layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
             }
+            if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
+                map.addLayer(overlays[cmd.map.overlay]);
+            }
+            if (cmd.map.hasOwnProperty("fly") && (cmd.map.fly === true)) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
+            else if (cmd.map.hasOwnProperty("fit") && (cmd.map.fit === true)) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
         }
-        overlays[cmd.map.overlay] = L.geoJson(cmd.map.geojson,opt);
-        if (!existsalready) {
-            layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
-        }
-        if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
-            map.addLayer(overlays[cmd.map.overlay]);
-        }
-        if (cmd.map.hasOwnProperty("fly") && (cmd.map.fly === true)) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
-        else if (cmd.map.hasOwnProperty("fit") && (cmd.map.fit === true)) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
+        catch(e) { console.log(e); }
     }
     // Add a new NVG XML overlay layer
     if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("nvg") ) {
@@ -2660,6 +2752,29 @@ function doCommand(cmd) {
         if (cmd.map.hasOwnProperty("fly") && cmd.map.fly === true) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
         else if (cmd.map.hasOwnProperty("fit") && cmd.map.fit === true) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
     }
+    // Add a new ESRI feature layer
+    if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("esri") ) {
+        try {
+            if (overlays.hasOwnProperty(cmd.map.overlay)) {
+                overlays[cmd.map.overlay].removeFrom(map);
+                existsalready = true;
+            }
+            var opt = {};
+            if (cmd.map.hasOwnProperty("opt")) { opt = cmd.map.opt; }
+            if (opt.hasOwnProperty("style")) { opt.style = new Function('return ' + opt.style)(); }
+            if (opt.hasOwnProperty("pointToLayer")) { opt.pointToLayer = new Function('return ' + opt.pointToLayer)(); }
+            if (opt.hasOwnProperty("onEachFeature")) { opt.onEachFeature = new Function('return ' + opt.onEachFeature)(); }
+            opt.url = cmd.map.esri;
+            overlays[cmd.map.overlay] = L.esri.featureLayer(opt);
+            if (!existsalready) {
+                layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
+            }
+            if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
+                overlays[cmd.map.overlay].addTo(map);
+            }
+            // NOTE can't fit or fly to bounds as they keep reloading
+        } catch(e) { console.log(e); }
+    }
     // Add a new TOPOJSON overlay layer
     if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("topojson") ) {
         if (overlays.hasOwnProperty(cmd.map.overlay)) {
@@ -2805,7 +2920,7 @@ function doCommand(cmd) {
             }
         }
     }
-    // Lock the pan so map can be moved
+    // Lock the pan so map can't be moved
     if (cmd.hasOwnProperty("panlock")) {
         if (cmd.panlock == "true" || cmd.panlock == true) { lockit = true; }
         else { lockit = false; doLock(false); }
@@ -2821,8 +2936,14 @@ function doCommand(cmd) {
     map.setView([clat,clon],czoom);
 
     // Set rotation of map
-    if (cmd.hasOwnProperty("rotation") && !isNaN(cmd.rotation)) { map.setBearing(-cmd.rotation); }
-
+    if (cmd.hasOwnProperty("rotation") && !isNaN(cmd.rotation)) {
+        map.setBearing(-cmd.rotation);
+        for (const item in allData) {
+            if (allData[item].hasOwnProperty("hdg") || allData[item].hasOwnProperty("heading") || allData[item].hasOwnProperty("bearing") || allData[item].hasOwnProperty("track")) {
+                setMarker(allData[item]);
+            }
+        }
+    }
     if (cmd.hasOwnProperty("cluster")) {
         clusterAt = cmd.cluster;
         document.getElementById("setclus").value = cmd.cluster;
@@ -2859,15 +2980,29 @@ function doCommand(cmd) {
         if (cmd.bounds.length === 2 && cmd.bounds[0].length === 2 && cmd.bounds[1].length === 2) {
             if (cmd.hasOwnProperty("fly") && cmd.fly === true) {
                 map.flyToBounds(cmd.bounds);
-            } else {
+            }
+            else {
                 map.fitBounds(cmd.bounds);
             }
         }
     }
+    if (cmd.hasOwnProperty("loadStatic")) {
+      console.log("load Static files",JSON.stringify(cmd.loadStatic.fileNames));
+      cmd.loadStatic.fileNames.forEach(fileName => loadStatic(fileName));
+    }
+    if (cmd.hasOwnProperty("customCmd")) {
+        console.log("custom Command",JSON.stringify(cmd.customCmd));
+        try {
+            eval(cmd.customCmd);
+        }
+        catch (e) {
+          console.log("ERR - custom command: ", JSON.stringify(cmd.customCmd));
+        }
+    }
 }
 
 // handle any incoming GEOJSON directly - may style badly
-function doGeojson(n,g,l,o) {
+function doGeojson(n,g,l,o) {  // name, geojson, layer, options
     var lay = l ?? g.name ?? "unknown";
     // if (!basemaps[lay]) {
     var opt = { style: function(feature) {