npm - node-red-contrib-web-worldmap - Versions diffs - 5.6.2 → 5.7.0 - Mend

node-red-contrib-web-worldmap 5.6.2 → 5.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/CHANGELOG.md +1 -0
package/README.md +5 -0
package/node_modules/@turf/bezier-spline/package.json +4 -5
package/node_modules/@turf/helpers/package.json +2 -3
package/node_modules/@turf/invariant/package.json +3 -4
package/node_modules/body-parser/HISTORY.md +6 -0
package/node_modules/body-parser/lib/types/json.js +1 -5
package/node_modules/body-parser/lib/types/urlencoded.js +5 -6
package/node_modules/body-parser/package.json +2 -2
package/node_modules/hasown/CHANGELOG.md +11 -0
package/node_modules/hasown/eslint.config.mjs +6 -0
package/node_modules/hasown/index.d.ts +1 -0
package/node_modules/hasown/package.json +14 -14
package/node_modules/side-channel-list/CHANGELOG.md +25 -4
package/node_modules/side-channel-list/index.js +1 -3
package/node_modules/side-channel-list/package.json +8 -8
package/node_modules/side-channel-list/test/index.js +50 -0
package/package.json +2 -2
package/worldmap/css/worldmap.css +4 -0
package/worldmap/index.html +2 -5
package/worldmap/worldmap.js +323 -56
package/worldmap.js +9 -7
package/node_modules/hasown/.eslintrc +0 -5
package/worldmap/leaflet/Leaflet.Dialog.css +0 -106
package/worldmap/leaflet/Leaflet.Dialog.js +0 -372

package/worldmap/worldmap.js CHANGED Viewed

@@ -1,5 +1,13 @@
 /* eslint-disable no-undef */
+/**
+ * @fileoverview Leaflet-based interactive world map client for Node-RED worldmap node.
+ * Connects to a Node-RED backend via SockJS WebSocket and renders markers,
+ * shapes, overlays, and TAK/CoT data on a Leaflet map.
+ * @author DCJ
+ * @version 2026
+ */
 var startpos = [51.05, -1.38];  // Start location - somewhere in UK :-)
 var startzoom = 10;
@@ -59,6 +67,12 @@ var iconSz = {
 var filesAdded = '';
+/**
+ * Dynamically loads a JS or CSS file into the document <head>, skipping
+ * any file that has already been added.
+ * @param {string} fileName - URL or path of the .js or .css file to load.
+ * @returns {void}
+ */
 var loadStatic = function(fileName) {
     if (filesAdded.indexOf(fileName) !== -1) { return; }
     var head = document.getElementsByTagName('head')[0]
@@ -76,7 +90,7 @@ var loadStatic = function(fileName) {
         style.type = 'text/css';
         style.rel = 'stylesheet';
         console.log("Loading: ",fileName);
-        head.append(style);;
+        head.append(style);
         filesAdded += ' ' + fileName;
     }
     else {
@@ -84,6 +98,13 @@ var loadStatic = function(fileName) {
     }
 }
+/**
+ * Opens a SockJS WebSocket connection to the Node-RED backend.
+ * Handles connection, disconnection (with auto-reconnect after 2.5s),
+ * and incoming messages. On connect, sends client timezone and URL
+ * parameters to the server, then triggers map layer selection.
+ * @returns {void}
+ */
 // Create the socket
 var connect = function() {
     // var transports = ["websocket", "xhr-streaming", "xhr-polling"],
@@ -115,6 +136,14 @@ var connect = function() {
 };
 console.log("CONNECT TO",location.pathname + 'socket');
+/**
+ * Routes incoming WebSocket data to the appropriate handler.
+ * Supports arrays of marker/command objects, raw XML strings (NVG, KML, GPX),
+ * GeoJSON Feature/FeatureCollection objects, TAK/CoT JSON events (both
+ * fastxml and Protobuf-decoded formats), and standard worldmap marker objects.
+ * @param {Object|Array|string} data - Parsed JSON data from the WebSocket message.
+ * @returns {void}
+ */
 var handleData = function(data) {
     if (Array.isArray(data)) {
         // console.log("ARRAY:",data.length);
@@ -169,25 +198,30 @@ var handleData = function(data) {
             if (JSON.stringify(data) !== '{}') {
                 console.log("SKIP",data);
             }
-            // if (typeof data === "string") { doDialog(data); }
-            // else { console.log("SKIP",data); }
         }
     }
 }
 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);
-overlays["countries"] = layers["_countries"];
+// 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);
+// overlays["countries"] = layers["_countries"];
+/**
+ * Adds an appropriate fallback base layer when the browser is offline,
+ * or when no base maps are available online. Uses a PMTiles layer if
+ * one is loaded, otherwise falls back to the countries outline overlay
+ * if available.
+ * @returns {void}
+ */
 var onoffline = function() {
     if (!navigator.onLine) {
         if (pmtloaded !== "") { basemaps[pmtloaded].addTo(map); layercontrol._update(); }
-        else { map.addLayer(overlays["countries"]); }
+        else if (overlays["countries"]) { map.addLayer(overlays["countries"]); }
     }
     else if (Object.keys(basemaps).length === 0 ) {
-        map.addLayer(overlays["countries"]);
+        if (overlays["countries"]) { map.addLayer(overlays["countries"]); }
     }
 }
@@ -316,7 +350,7 @@ var readFile = function(file) {
             ws.send(JSON.stringify({action:"file", name:file.name, type:file.type, content:content, lat:droplatlng.lat, lon:droplatlng.lng}));
         }
         else {
-            console.log("NOT SURE WHAT THIS IS?",content)
+            console.log("NOT SURE WHAT TYPE OF FILE THIS IS ?",content)
         }
     });
     reader.readAsDataURL(file);
@@ -331,6 +365,7 @@ var followMode = { accuracy:true };
 var followState = false;
 var trackMeButton;
 var errRing;
+var clrHeat;
 function onLocationFound(e) {
     if (followState === true) { map.panTo(e.latlng); }
@@ -409,9 +444,9 @@ else {
     // }, "Locate me").addTo(map);
      // Create the clear heatmap button
-    var clrHeat = L.easyButton( 'fa-eraser', function() {
+    clrHeat = L.easyButton( 'fa-eraser', function() {
         console.log("Reset heatmap");
-        heat.setLatLngs([]);
+        if (heat) { heat.setLatLngs([]); }
     }, "Clears the current heatmap", {position:"bottomright"});
 }
@@ -451,9 +486,9 @@ var edgeAware = function () {
     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());
+    var pSW = map.options.crs.latLngToPoint(mapBounds.getSouthWest(), map.getZoom());
+    var pNE = map.options.crs.latLngToPoint(mapBounds.getNorthEast(), map.getZoom());
+    var 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) {
@@ -513,7 +548,7 @@ function doPanit(v) {
 var heatAll = false;
 function doHeatAll(v) {
-    if (v !== undefined) { heatall = v; }
+    if (v !== undefined) { heatAll = v; }
     console.log("Heatall set :",heatAll);
 }
@@ -538,10 +573,22 @@ function doLock(v) {
     //console.log("Map bounds lock :",lockit);
 }
+/**
+ * Removes stale markers and optionally clears a named layer from the map.
+ * When called without an argument, sweeps all markers whose timestamp has
+ * expired based on the current maxage setting (marker sweep only — layer
+ * cleanup requires an explicit layer name argument).
+ * When called with a layer name, removes all markers on that layer and
+ * removes the layer itself from the map and layer control.
+ * Special case: passing "heatmap" clears all heatmap points.
+ * @param {string} [l] - Name of a specific layer to remove entirely.
+ *   If omitted, only expired markers are swept.
+ * @returns {void}
+ */
 // Remove old markers
 function doTidyUp(l) {
     if (l === "heatmap") {
-        heat.setLatLngs([]);
+       if (heat) { heat.setLatLngs([]); }
     }
     else {
         var d = parseInt(Date.now()/1000);
@@ -573,16 +620,28 @@ function doTidyUp(l) {
     }
 }
+/**
+ * Reads the maxage value from the UI input and (re)starts the periodic
+ * marker sweep interval, which calls doTidyUp() every 20 seconds.
+ * Note: the interval invokes doTidyUp() without a layer argument, so
+ * only stale markers are swept — layer cleanup must be triggered explicitly.
+ * @returns {void}
+ */
 // Call tidyup every {maxage} seconds - default 10 mins
 var stale = null;
 function setMaxAge() {
     maxage = document.getElementById('maxage').value;
     if (stale) { clearInterval(stale); }
     //if (maxage > 0) {
-    stale = setInterval( function() { doTidyUp() }, 20000); // check every 20 secs
+    stale = setInterval( function() { doTidyUp() }, 20000); // clear markers from all layers every 20 secs
 }
 setMaxAge();
+/**
+ * Updates the day/night terminator line position on the map if the
+ * day/night overlay is currently active. Called on a 60-second interval.
+ * @returns {void}
+ */
 // move the daylight / nighttime boundary (if enabled) every minute
 function moveTerminator() { // if terminator line plotted move it every minute
     if (layers["_daynight"] && layers["_daynight"].getLayers().length > 0) {
@@ -592,6 +651,12 @@ function moveTerminator() { // if terminator line plotted move it every minute
 }
 setInterval( function() { moveTerminator() }, 60000 );
+/**
+ * Refreshes the rainfall radar tile layer URL to the latest 10-minute
+ * radar snapshot from RainViewer, if the layer is active and the browser
+ * is online. Called on a 600-second (10-minute) interval.
+ * @returns {void}
+ */
 // move the rainfall overlay (if enabled) every 10 minutes
 function moveRainfall() {
     if (navigator.onLine && overlays.hasOwnProperty("rainfall") && map.hasLayer(overlays["rainfall"])) {
@@ -601,6 +666,12 @@ function moveRainfall() {
 }
 setInterval( function() { moveRainfall() }, 600000 );
+/**
+ * Sets the zoom level at which markers are clustered and refreshes
+ * the current map zoom display.
+ * @param {number} [v=0] - Zoom level threshold for clustering. 0 disables clustering.
+ * @returns {void}
+ */
 function setCluster(v) {
     clusterAt = v || 0;
     console.log("clusterAt set:",clusterAt);
@@ -631,6 +702,12 @@ async function readPhoton(url) {
     }
 }
+/**
+ * Searches for map markers matching the given search input by name or icon,
+ * constrained to the current map bounds. If no markers are found, falls back
+ * to a Nominatim geocoder lookup and pans the map to the result.
+ * @returns {void}
+ */
 // Search for markers with names of ... or icons of ...
 function doSearch() {
     var value = document.getElementById('search').value;
@@ -758,7 +835,7 @@ function toggleMenu() {
     }
     else {
         document.getElementById("menu").style.display = 'none';
-        dialogue.close();
+        if (dialog) { dialog.close(); }
     }
 }
@@ -774,7 +851,7 @@ function closeMenu() {
         menuOpen = false;
         document.getElementById("menu").style.display = 'none';
     }
-    dialogue.close();
+    if (dialog) { dialog.close(); }
 }
 document.getElementById("menu").style.display = 'none';
@@ -943,7 +1020,20 @@ var addmenu = "<b>Add marker</b><br><input type='text' id='rinput' autofocus onk
 addmenu += '<br/><a href="unitgenerator.html" target="_new">MilSymbol SIDC generator</a>';
 var rightmenuMap = L.popup({keepInView:true, minWidth:260}).setContent(addmenu);
+/**
+ * Converts an RGBA CSS colour string to a hex colour string.
+ * @param {string} rgba - CSS rgba() or rgb() colour string.
+ * @returns {string} Hex colour string (e.g. "#ff0000").
+ */
 const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`;
+/**
+ * Resolves a CSS colour keyword (e.g. "red", "cornflowerblue") to a hex
+ * colour string by temporarily creating a DOM element and reading its
+ * computed colour value.
+ * @param {string} colorKeyword - Any valid CSS colour keyword or value.
+ * @returns {string} Hex colour string.
+ */
 const colorKeywordToRGB = (colorKeyword) => {
     let el = document.createElement('div');
     el.style.color = colorKeyword;
@@ -955,6 +1045,13 @@ const colorKeywordToRGB = (colorKeyword) => {
 var rclk = {};
 var hiderightclick = false;
+/**
+ * Reads the right-click popup input field and creates a new marker at
+ * the last right-clicked map position. Parses a comma-separated string
+ * of name, icon/SIDC, layer, colour, and heading. Sends the new point
+ * to the server via WebSocket.
+ * @returns {void}
+ */
 var addThing = function() {
     var thing = document.getElementById('rinput').value;
     map.closePopup();
@@ -980,7 +1077,7 @@ var addThing = function() {
     ws.send(JSON.stringify(d));
     delete d.action;
     setMarker(d);
-    map.addLayer(layers[lay]);
+    if (layers[lay]) { map.addLayer(layers[lay]); }
 }
 var form = {};
@@ -996,7 +1093,6 @@ var feedback = function(n = "map",v,a = "feedback",c) {
         dataToSend.lon = rclk.lng;
     }
     ws.send(JSON.stringify(dataToSend));
     if (c === true) { map.closePopup(); }
 }
@@ -1004,11 +1100,22 @@ map.on('click', function(e) {
     ws.send(JSON.stringify({action:"click", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5)}));
 });
+map.on('popupopen', function(e) {
+    const mp = e.popup._source;
+    const m = allData[mp["name"]];
+    m.popped = true;
+    m.action = "openPopup";
+    ws.send(JSON.stringify(m));
+    delete m.action;
+    //ws.send(JSON.stringify({action:"openPopup",name:mp.name,layer:mp.lay,icon:mp.icon,iconColor:mp.iconColor,SIDC:mp.SIDC,draggable:true,lat:parseFloat(mp.getLatLng().lat.toFixed(6)),lon:parseFloat(mp.getLatLng().lng.toFixed(6))}));
+});
 // allow double right click to zoom out (if enabled)
 // single right click opens a message window that adds a marker
 var rclicked = false;
 var rtout = null;
 map.on('contextmenu', function(e) {
     if (rclicked) {
         rclicked = false;
@@ -1047,6 +1154,16 @@ map.on('contextmenu', function(e) {
 //var layercontrol = L.control.selectLayers(basemaps, overlays).addTo(map);
 layercontrol = L.control.layers(basemaps, overlays);
+/**
+ * Adds the base tile map layers to the map based on a list of layer codes.
+ * Handles both online tile layers (OSM variants, Esri, etc.) and offline
+ * PMTiles layers. Initialises the layer control and selects the first
+ * available layer.
+ * @param {string} maplist - Space- or comma-separated string of layer codes
+ *   (e.g. "OSMG OSMC EsriS").
+ * @param {string} [first] - Name of the layer to activate first.
+ * @returns {void}
+ */
 // Add all the base layer maps if we are online.
 var addBaseMaps = function(maplist,first) {
     // console.log("MAPS",first,maplist)
@@ -1062,7 +1179,7 @@ var addBaseMaps = function(maplist,first) {
         var osmAttrib='Map data © OpenStreetMap contributors';
         if (maplist.indexOf("MB3d")!==-1) { // handle the case of 3d by redirecting to that page instead.
-            window.location.href("index3d.html");
+            window.location.href = "index3d.html";
         }
         if (maplist.indexOf("OSMG")!==-1) {
             basemaps[layerlookup["OSMG"]] = new L.TileLayer.Grayscale(osmUrl, {
@@ -1215,6 +1332,14 @@ var addBaseMaps = function(maplist,first) {
     }
 }
+/**
+ * Adds optional overlay layers to the map based on a list of overlay codes.
+ * Handles countries outline (CO), day/night terminator (DN), rainfall radar (RA),
+ * OSM Buildings (BU), railways, heatmap, drawing tools, minimap, side-by-side
+ * comparison, and more.
+ * @param {string} overlist - Space- or comma-separated string of overlay codes.
+ * @returns {void}
+ */
 // Now add the overlays
 var addOverlays = function(overlist) {
     //console.log("OVERLAYS",overlist)
@@ -1255,7 +1380,7 @@ var addOverlays = function(overlist) {
         }
         var shape;
-        map.on("pm:create", (e) => {
+        map.on('pm:create', (e) => {
             drawCount = drawCount + 1;
             var name = e.shape + drawCount;
@@ -1301,7 +1426,7 @@ var addOverlays = function(overlist) {
                 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).replace(/\${name}/g,name)},25);
+            setTimeout(function() {map.openPopup(rightmenuMarker)},25);
         });
         sendDrawing = function(n,v,a) {
@@ -1515,16 +1640,6 @@ var coords = L.control.mouseCoordinate({position:"bottomleft"});
 // Add an optional legend
 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);
-// dialogue.freeze();
-var doDialog = function(d) {
-    //console.log("DIALOGUE",d);
-    dialogue.setContent(d);
-    dialogue.open();
-}
 var helpText = '<h3>Node-RED - Map all the things</h3><br/>';
 helpText += '<p><i class="fa fa-search fa-lg fa-fw"></i> <b>Search</b> - You may enter a name, or partial name, or icon name of an object to search for.';
 helpText += 'The map will then jump to centre on each of the results in turn. If nothing is found locally it will try to';
@@ -1542,7 +1657,31 @@ helpText += 'While active it also restricts the "auto pan" and "search" to withi
 helpText += '<p><i class="fa fa-globe fa-lg fa-fw"></i> <b>Heatmap all layers</b> - When selected';
 helpText += 'all layers whether hidden or not will contribute to the heatmap.';
 helpText += 'The default is that only visible layers add to the heatmap.</p>';
+helpText += '<button type="button" id="closeDialog">Close help</button>';
+var dialog;
+/**
+ * Displays the help dialog modal. Populates the dialog element with the
+ * provided dialog content HTML string and wires up the close button.
+ * @param {string} d - dialog content.
+ * @returns {void}
+ */
+var doDialog = function(d) {
+    //console.log("DIALOGUE",d);
+    dialog = document.getElementById("helpDialog");
+    dialog.innerHTML = d;
+    const closeButton = document.getElementById("closeDialog");
+    closeButton.addEventListener("click", () => { dialog.close(); });
+    dialog.showModal();
+}
+/**
+ * Deletes a named marker or shape from the map and all internal data stores.
+ * Optionally notifies the server via WebSocket that the item was deleted.
+ * @param {string} dname - Name of the marker or shape to delete.
+ * @param {boolean} [note=false] - If true, sends a delete action to the server.
+ * @returns {void}
+ */
 // Delete a marker or shape (and notify websocket)
 var delMarker = function(dname,note) {
     if (note) { map.closePopup(); }
@@ -1572,6 +1711,15 @@ var delMarker = function(dname,note) {
     }
 }
+/**
+ * Enables editing (move, rotate, or drag) of a named polygon or shape
+ * via Leaflet-Geoman. On double-click, disables editing and sends the
+ * updated shape geometry to the server.
+ * @param {string} pname - Name of the polygon/shape to edit.
+ * @param {string} [fun] - Edit mode: "rot" for rotate, "drag" for drag,
+ *   or omitted for vertex editing.
+ * @returns {void}
+ */
 var editPoly = function(pname,fun) {
     map.closePopup();
     if (fun === "rot") { polygons[pname].pm.enableRotate(); }
@@ -1597,6 +1745,17 @@ var editPoly = function(pname,fun) {
     })
 }
+/**
+ * Creates a Leaflet FeatureGroup of semi-circular range rings centred on
+ * a given latlng, used to indicate sensor field-of-view or range arcs.
+ * @param {L.LatLng} latlng - Centre point for the rings.
+ * @param {Object} [options] - Options object.
+ * @param {number|number[]} [options.ranges=[250,500,750,1000]] - Ring radius/radii in metres.
+ * @param {number} [options.pan=0] - Bearing direction in degrees.
+ * @param {number} [options.fov=60] - Field of view angle in degrees.
+ * @param {string} [options.color='#aaaa00'] - Ring colour.
+ * @returns {L.FeatureGroup} Feature group containing the range ring semi-circles.
+ */
 var rangerings = function(latlng, options) {
     options = L.extend({
         ranges: [250,500,750,1000],
@@ -1626,6 +1785,28 @@ var rangerings = function(latlng, options) {
 //     else { return str; }
 // };
+/**
+ * The primary function for adding or updating a marker, shape, or overlay
+ * on the map. Handles points, polylines, polygons, circles, images, arcs,
+ * NATO MilSymbol (SIDC) icons, FontAwesome icons, and custom icon URLs.
+ * Also manages TTL-based auto-deletion, heatmap contribution, popup binding,
+ * leader lines, and layer assignment.
+ * @param {Object} data - Marker/shape descriptor object. Key properties:
+ * @param {string} data.name - Unique identifier for the marker.
+ * @param {number} [data.lat] - Latitude.
+ * @param {number} [data.lon] - Longitude.
+ * @param {string} [data.layer] - Layer name to add the marker to.
+ * @param {string} [data.icon] - FontAwesome icon name or special value.
+ * @param {string} [data.SIDC] - NATO MilSymbol SIDC code.
+ * @param {string} [data.iconColor] - Colour for the icon.
+ * @param {boolean} [data.deleted] - If true, removes the marker from the map.
+ * @param {number} [data.ttl] - Time-to-live in seconds (0 = permanent).
+ * @param {Array}  [data.area] - Array of latlng objects for a polygon.
+ * @param {Array}  [data.line] - Array of latlng objects for a polyline.
+ * @param {number} [data.radius] - Radius in metres for a circle.
+ * @param {Object} [data.options] - Leaflet path options override.
+ * @returns {void}
+ */
 // the MAIN add marker or shape to map function
 function setMarker(data) {
     if (!data) { return; }
@@ -1633,8 +1814,8 @@ function setMarker(data) {
         m.on('click', function(e) {
             var fb = allData[data["name"]];
             fb.action = "click";
-            if (fb.sendOnClick ?? true)
-                ws.send(JSON.stringify(fb));
+            if (fb.sendOnClick ?? true) { ws.send(JSON.stringify(fb)); }
+            delete fb.action;
         });
         // customise right click context menu
         var rightcontext = "";
@@ -1685,12 +1866,12 @@ function setMarker(data) {
     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.stroke = opt.stroke ?? (data.hasOwnProperty("stroke") ? data.stroke : true);
     opt.weight = opt.weight ?? data.weight ?? 2;
     opt.opacity = opt.opacity ?? data.opacity ?? 1;
     if (!data.SIDC) { opt.fillOpacity = opt.fillOpacity ?? data.fillOpacity ?? 0.2; }
     opt.clickable = (data.hasOwnProperty("clickable")) ? data.clickable : false;
-    opt.fill = 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; }
     // Replace building
@@ -2285,6 +2466,7 @@ function setMarker(data) {
             fb.lon = parseFloat(marker.getLatLng().lng.toFixed(6));
             fb.from = oldll;
             ws.send(JSON.stringify(fb));
+            delete fb.action;
         });
     }
@@ -2371,15 +2553,8 @@ function setMarker(data) {
         }
         delete data.weblink;
     }
-    var p;
-    if (data.hasOwnProperty("popped") && (data.popped === true)) {
-        p = true;
-        delete data.popped;
-    }
-    if (data.hasOwnProperty("popped") && (data.popped === false)) {
-        marker.closePopup();
-        p = false;
-        delete data.popped;
+    if (data.hasOwnProperty("popped")) {
+        marker.popped = data.popped;
     }
     // If .label then use that rather than name tooltip
     if (data.hasOwnProperty("label")) {
@@ -2423,7 +2598,7 @@ function setMarker(data) {
     if (data.hasOwnProperty("radius")) { delete data.radius; }
     if (data.hasOwnProperty("greatcircle")) { delete data.greatcircle; }
-    if (!data.hasOwnProperty("clickable") && data.clickable != false) {
+    if (!data.hasOwnProperty("clickable") || data.clickable == true) {
         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?.popupOptions) { // allow user to override popup options eg to add className
@@ -2437,7 +2612,7 @@ function setMarker(data) {
         else {
             words += '<table>';
             for (var i in data) {
-                if ((i != "name") && (i != "length") && (i != "clickable")) {
+                if ((i != "name") && (i != "length") && (i != "clickable") && (i != "popped")) {
                     if (typeof data[i] === "object") {
                         words += '<tr><td valign="top">'+ i +'</td><td>' + JSON.stringify(data[i]) + '</td></tr>';
                     }
@@ -2456,6 +2631,13 @@ function setMarker(data) {
         if (longline > 100) { wopt.minWidth="640"; } // make popup wider if it has a long line
         marker.bindPopup(words, wopt);
         marker._popup.dname = data["name"];
+        marker.getPopup().on('remove', function() {
+            const m = allData[marker["name"]];
+            m.popped = false;
+            m.action = "closePopup";
+            ws.send(JSON.stringify(m));
+            delete m.action;
+        });
     }
     if (data.hasOwnProperty("clickURL")) {
@@ -2473,6 +2655,7 @@ function setMarker(data) {
     //     var fb = allData[marker.name];
     //     fb.action = "click";
     //     ws.send(JSON.stringify(fb));
+    //     delete fb.action;
     // });
     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); }
@@ -2546,10 +2729,10 @@ function setMarker(data) {
         }
     }
     if (panit === true) { map.setView(ll,map.getZoom()); }
-    if (p === true) { marker.openPopup(); }
+    if (marker.popped === true) { marker.openPopup(); }
 }
-var custIco = function() {
+var custIco = function(cmd) {
     var col = cmd.map.iconColor ?? "#910000";
     var myMarker = L.VectorMarkers.icon({
         icon: "circle",
@@ -2578,6 +2761,22 @@ var custIco = function() {
     return customLayer;
 }
+/**
+ * Processes incoming command objects from the server to control the map
+ * remotely. Handles a wide range of commands including: map/overlay
+ * initialisation, pan/zoom/rotation, layer visibility, marker age limits,
+ * clustering, UI button injection, heatmap updates, user location tracking,
+ * legend display, custom CSS/JS loading, and arbitrary eval of custom commands.
+ * @param {Object} cmd - Command object received from the server.
+ * @param {boolean} [cmd.init] - If true, triggers map/overlay initialisation.
+ * @param {string}  [cmd.layer] - Base layer to activate.
+ * @param {number}  [cmd.lat] - Latitude to pan to.
+ * @param {number}  [cmd.lon] - Longitude to pan to.
+ * @param {number}  [cmd.zoom] - Zoom level to set.
+ * @param {string|string[]} [cmd.clearlayer] - Layer name(s) to clear.
+ * @param {Object}  [cmd.map] - Overlay/basemap descriptor for adding layers.
+ * @returns {void}
+ */
 // handle any incoming COMMANDS to control the map remotely
 function doCommand(cmd) {
     // console.log("COMMAND",cmd);
@@ -2586,7 +2785,7 @@ function doCommand(cmd) {
         addBaseMaps(cmd.maplist,cmd.layer);
     }
     if (cmd.init && cmd.hasOwnProperty("overlist")) {
-        overlays = [];
+        overlays = {};
         addOverlays(cmd.overlist);
     }
     if (cmd.hasOwnProperty("toptitle")) {
@@ -2606,6 +2805,20 @@ function doCommand(cmd) {
         if (!Array.isArray(clr)) { clr = [ clr ]; }
         clr.forEach((el) => doTidyUp(el));
     }
+    if (cmd.hasOwnProperty("showdialog")) {
+        if (typeof cmd.showdialog === "string") {
+            if (cmd.showdialog === "") {
+                if (dialog) { dialog.close(); }
+            }
+            else if (!/script/i.test(cmd.showdialog)) {
+                let dia = cmd.showdialog;
+                if (!/id=\"closeDialog\"/.test(cmd.showdialog)) {
+                    dia += '<p><button type="button" id="closeDialog">Close</button></p>';
+                }
+                doDialog(dia);
+            }
+        }
+    }
     if (cmd.hasOwnProperty("panit")) {
         if (cmd.panit == true || cmd.panit === "true") { panit = true; }
         else { panit = false; }
@@ -2949,7 +3162,7 @@ function doCommand(cmd) {
                     var sidc = feature.properties.symbol.toUpperCase().replace("APP6A:",'')//.substr(0,13);
                     var country;
                     if (sidc.length > 12) { country = sidc.substr(12).replace(/-/g,''); sidc = sidc.substr(0,12); }
-                    myMarker = new ms.Symbol( sidc, {
+                    var myMarker = new ms.Symbol( sidc, {
                         uniqueDesignation:feature.properties.label,
                         country:country,
                         direction:feature.properties.course,
@@ -3073,7 +3286,7 @@ function doCommand(cmd) {
         // var json = window.toGeoJSON.gpx(gp);
         // console.log("j",json)
         // doGeojson(json.features[0].properties.name,json,json.features[0].properties.type) // name,geojson,layer,options
-        overlays[cmd.map.overlay] = omnivore.gpx.parse(cmd.map.gpx, null, custIco());
+        overlays[cmd.map.overlay] = omnivore.gpx.parse(cmd.map.gpx, null, custIco(cmd));
         if (!existsalready) {
             layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
         }
@@ -3291,6 +3504,18 @@ function doCommand(cmd) {
     }
 }
+/**
+ * Renders a GeoJSON Feature or FeatureCollection on the map as a named
+ * overlay layer. Supports SIDC symbols, FontAwesome icons, and vector
+ * markers for point features, and applies style properties from feature
+ * properties or the options argument for polygon/line features.
+ * @param {string} n - Name for the overlay layer.
+ * @param {Object} g - GeoJSON Feature or FeatureCollection object.
+ * @param {string} [l] - Layer name override (defaults to g.name or "unknown").
+ * @param {Object} [o] - Leaflet path style options to apply to features.
+ * @param {string} [i] - Default icon name for point features without an icon property.
+ * @returns {void}
+ */
 // handle any incoming GEOJSON directly - may style badly
 function doGeojson(n,g,l,o,i) {  // name, geojson, layer, options, icon
     var lay = l ?? g.name ?? "unknown";
@@ -3443,6 +3668,14 @@ function doGeojson(n,g,l,o,i) {  // name, geojson, layer, options, icon
     map.addLayer(layers[lay]);
 }
+/**
+ * Handles a TAK/CoT event object (from the tak-ingest or fastxml Node-RED nodes)
+ * and converts it to a worldmap marker, then calls setMarker().
+ * Processes atom types (a-) for personnel/vehicle tracks and b- types for
+ * spot markers, position indicators, emergency alerts, and geofence events.
+ * @param {Object} p - Parsed CoT event object with point, detail, type, uid fields.
+ * @returns {void}
+ */
 // handle TAK messages from TAK server tcp - XML->JSON
 function doTAKjson(p) {
     //console.log("TAK event",p);
@@ -3472,7 +3705,7 @@ function doTAKjson(p) {
         }
         d.type = p.type;
         d.remarks = p.detail?.remarks
-        if (p.detail?.remarks && p.detail.remarks.hasOwnProperty["#text"]) {
+        if (p.detail?.remarks && p.detail.remarks.hasOwnProperty("#text")) {
             d.remarks = p.detail.remarks["#text"];
         }
         d.uid = p.uid;
@@ -3499,6 +3732,13 @@ function doTAKjson(p) {
     }
 }
+/**
+ * Handles a TAK Multicast event object decoded from Protobuf via the
+ * tak-ingest Node-RED node, converting it to a worldmap marker.
+ * Only processes atom types (a-) for tracks.
+ * @param {Object} p - Parsed TAK multicast CoT object with lat, lon, type, uid fields.
+ * @returns {void}
+ */
 // handle TAK messages from TAK Multicast - Protobuf->JSON
 function doTAKMCjson(p) {
     // console.log("TAK Multicast event",p);
@@ -3542,6 +3782,12 @@ function doTAKMCjson(p) {
     }
 }
+/**
+ * Converts a 32-bit ARGB integer colour value (as used in CoT/TAK messages)
+ * to a CSS hex colour string, discarding the alpha channel.
+ * @param {number} color - 32-bit integer ARGB colour value.
+ * @returns {string} CSS hex colour string (e.g. "#ff0000").
+ */
 function convertCOTtoCIFColour(color) {
     // const c = parseInt(color);
     const arr = new ArrayBuffer(4);
@@ -3551,12 +3797,24 @@ function convertCOTtoCIFColour(color) {
     return "#" + b2h.substr(2);
 }
+/**
+ * Converts an ArrayBuffer to a lowercase hex string.
+ * @param {ArrayBuffer} buffer - The buffer to convert.
+ * @returns {string} Hex-encoded string representation of the buffer bytes.
+ */
 function buf2hex(buffer) { // buffer is an ArrayBuffer
     return [...new Uint8Array(buffer)]
         .map(x => x.toString(16).padStart(2, '0'))
         .join('');
 }
+/**
+ * Generates an array of intermediate range ring values for a given maximum
+ * range, using step sizes of 100, 1000, or 10000 depending on the magnitude.
+ * Returns the value directly if it is 100 or less.
+ * @param {number} r - Maximum range in metres.
+ * @returns {number|number[]} Single value if r <= 100, otherwise an array of ring radii.
+ */
 function createRings(r) {
     if (r <= 100) { return r; }
     var rings = [];
@@ -3570,6 +3828,15 @@ function createRings(r) {
     return rings;
 }
+/**
+ * Maps a CoT type string to an appropriate SIDC code or icon on the marker
+ * data object. Handles atom types (a-) via milsymbol conversion and a
+ * selection of b- types (spot markers, position indicators, emergency alerts,
+ * geofence events, waypoints). Modifies the data object in place.
+ * @param {Object} d - Worldmap marker data object to be mutated.
+ * @param {Object} p - Raw CoT/TAK event object containing type, detail, etc.
+ * @returns {Object} The mutated data object.
+ */
 function handleCoTtypes(d,p) {
     if (d.type.indexOf('a-') === 0) { // handle a- types
         if (p?.detail?.__milsym?.id) {