From 41fdb5f3ef301917e66045cfc2d439c1a7043c0b Mon Sep 17 00:00:00 2001 From: Szymon Porwolik Date: Thu, 6 Nov 2025 02:40:56 +0100 Subject: [PATCH] DX Map --- application/views/bandmap/list.php | 45 +- application/views/interface_assets/footer.php | 1 + application/views/interface_assets/header.php | 4 +- assets/js/leaflet.polylineDecorator.js | 478 ++++++++++ assets/js/sections/bandmap_list.js | 883 ++++++++++++++++++ 5 files changed, 1406 insertions(+), 5 deletions(-) create mode 100644 assets/js/leaflet.polylineDecorator.js diff --git a/application/views/bandmap/list.php b/application/views/bandmap/list.php index 9c1c8c62d..1566dc42c 100644 --- a/application/views/bandmap/list.php +++ b/application/views/bandmap/list.php @@ -83,8 +83,32 @@ var lang_bandmap_no_spots_filters = ""; var lang_bandmap_error_loading = ""; + // DX Map translation strings + var lang_bandmap_draw_spotters = ""; + var lang_bandmap_your_qth = ""; + var lang_bandmap_callsign = ""; + var lang_bandmap_frequency = ""; + var lang_bandmap_mode = ""; + var lang_bandmap_band = ""; + // Enable compact radio status display for bandmap page window.CAT_COMPACT_MODE = true; + + // Map configuration (matches QSO map settings) + var map_tile_server = 'optionslib->get_option('option_map_tile_server');?>'; + var map_tile_server_copyright = 'optionslib->get_option('option_map_tile_server_copyright');?>'; + var icon_dot_url = "assets/images/dot.png"; + + // User gridsquare for home position marker + var user_gridsquare = 'optionslib->get_option("station_gridsquare") ?? "") != "") { + echo $this->optionslib->get_option("station_gridsquare"); + } else if (null !== $this->config->item("locator")) { + echo $this->config->item("locator"); + } else { + echo "IO91WM"; + } + ?>'; @@ -100,7 +124,7 @@ "> -
+
@@ -391,12 +415,19 @@
+ + +
+ +
-
+
@@ -411,13 +442,21 @@
-
+
" aria-label="">
+ + +
diff --git a/application/views/interface_assets/footer.php b/application/views/interface_assets/footer.php index e54bdcc30..a794c3636 100644 --- a/application/views/interface_assets/footer.php +++ b/application/views/interface_assets/footer.php @@ -1466,6 +1466,7 @@ mymap.on('mousemove', onQsoMapMove); uri->segment(1) == "bandmap" && $this->uri->segment(2) == "list") { ?> + diff --git a/application/views/interface_assets/header.php b/application/views/interface_assets/header.php index 9635cbc82..f8e29a4d8 100644 --- a/application/views/interface_assets/header.php +++ b/application/views/interface_assets/header.php @@ -282,14 +282,14 @@
    • +
      • +
    • Hams.at
      • -
      • -
      • diff --git a/assets/js/leaflet.polylineDecorator.js b/assets/js/leaflet.polylineDecorator.js new file mode 100644 index 000000000..cb2fdeee6 --- /dev/null +++ b/assets/js/leaflet.polylineDecorator.js @@ -0,0 +1,478 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('leaflet')) : + typeof define === 'function' && define.amd ? define(['leaflet'], factory) : + (factory(global.L)); +}(this, (function (L$1) { 'use strict'; + +L$1 = L$1 && L$1.hasOwnProperty('default') ? L$1['default'] : L$1; + +// functional re-impl of L.Point.distanceTo, +// with no dependency on Leaflet for easier testing +function pointDistance(ptA, ptB) { + var x = ptB.x - ptA.x; + var y = ptB.y - ptA.y; + return Math.sqrt(x * x + y * y); +} + +var computeSegmentHeading = function computeSegmentHeading(a, b) { + return (Math.atan2(b.y - a.y, b.x - a.x) * 180 / Math.PI + 90 + 360) % 360; +}; + +var asRatioToPathLength = function asRatioToPathLength(_ref, totalPathLength) { + var value = _ref.value, + isInPixels = _ref.isInPixels; + return isInPixels ? value / totalPathLength : value; +}; + +function parseRelativeOrAbsoluteValue(value) { + if (typeof value === 'string' && value.indexOf('%') !== -1) { + return { + value: parseFloat(value) / 100, + isInPixels: false + }; + } + var parsedValue = value ? parseFloat(value) : 0; + return { + value: parsedValue, + isInPixels: parsedValue > 0 + }; +} + +var pointsEqual = function pointsEqual(a, b) { + return a.x === b.x && a.y === b.y; +}; + +function pointsToSegments(pts) { + return pts.reduce(function (segments, b, idx, points) { + // this test skips same adjacent points + if (idx > 0 && !pointsEqual(b, points[idx - 1])) { + var a = points[idx - 1]; + var distA = segments.length > 0 ? segments[segments.length - 1].distB : 0; + var distAB = pointDistance(a, b); + segments.push({ + a: a, + b: b, + distA: distA, + distB: distA + distAB, + heading: computeSegmentHeading(a, b) + }); + } + return segments; + }, []); +} + +function projectPatternOnPointPath(pts, pattern) { + // 1. split the path into segment infos + var segments = pointsToSegments(pts); + var nbSegments = segments.length; + if (nbSegments === 0) { + return []; + } + + var totalPathLength = segments[nbSegments - 1].distB; + + var offset = asRatioToPathLength(pattern.offset, totalPathLength); + var endOffset = asRatioToPathLength(pattern.endOffset, totalPathLength); + var repeat = asRatioToPathLength(pattern.repeat, totalPathLength); + + var repeatIntervalPixels = totalPathLength * repeat; + var startOffsetPixels = offset > 0 ? totalPathLength * offset : 0; + var endOffsetPixels = endOffset > 0 ? totalPathLength * endOffset : 0; + + // 2. generate the positions of the pattern as offsets from the path start + var positionOffsets = []; + var positionOffset = startOffsetPixels; + do { + positionOffsets.push(positionOffset); + positionOffset += repeatIntervalPixels; + } while (repeatIntervalPixels > 0 && positionOffset < totalPathLength - endOffsetPixels); + + // 3. projects offsets to segments + var segmentIndex = 0; + var segment = segments[0]; + return positionOffsets.map(function (positionOffset) { + // find the segment matching the offset, + // starting from the previous one as offsets are ordered + while (positionOffset > segment.distB && segmentIndex < nbSegments - 1) { + segmentIndex++; + segment = segments[segmentIndex]; + } + + var segmentRatio = (positionOffset - segment.distA) / (segment.distB - segment.distA); + return { + pt: interpolateBetweenPoints(segment.a, segment.b, segmentRatio), + heading: segment.heading + }; + }); +} + +/** +* Finds the point which lies on the segment defined by points A and B, +* at the given ratio of the distance from A to B, by linear interpolation. +*/ +function interpolateBetweenPoints(ptA, ptB, ratio) { + if (ptB.x !== ptA.x) { + return { + x: ptA.x + ratio * (ptB.x - ptA.x), + y: ptA.y + ratio * (ptB.y - ptA.y) + }; + } + // special case where points lie on the same vertical axis + return { + x: ptA.x, + y: ptA.y + (ptB.y - ptA.y) * ratio + }; +} + +(function() { + // save these original methods before they are overwritten + var proto_initIcon = L.Marker.prototype._initIcon; + var proto_setPos = L.Marker.prototype._setPos; + + var oldIE = (L.DomUtil.TRANSFORM === 'msTransform'); + + L.Marker.addInitHook(function () { + var iconOptions = this.options.icon && this.options.icon.options; + var iconAnchor = iconOptions && this.options.icon.options.iconAnchor; + if (iconAnchor) { + iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px'); + } + this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center bottom' ; + this.options.rotationAngle = this.options.rotationAngle || 0; + + // Ensure marker keeps rotated during dragging + this.on('drag', function(e) { e.target._applyRotation(); }); + }); + + L.Marker.include({ + _initIcon: function() { + proto_initIcon.call(this); + }, + + _setPos: function (pos) { + proto_setPos.call(this, pos); + this._applyRotation(); + }, + + _applyRotation: function () { + if(this.options.rotationAngle) { + this._icon.style[L.DomUtil.TRANSFORM+'Origin'] = this.options.rotationOrigin; + + if(oldIE) { + // for IE 9, use the 2D rotation + this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)'; + } else { + // for modern browsers, prefer the 3D accelerated version + this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)'; + } + } + }, + + setRotationAngle: function(angle) { + this.options.rotationAngle = angle; + this.update(); + return this; + }, + + setRotationOrigin: function(origin) { + this.options.rotationOrigin = origin; + this.update(); + return this; + } + }); +})(); + +L$1.Symbol = L$1.Symbol || {}; + +/** +* A simple dash symbol, drawn as a Polyline. +* Can also be used for dots, if 'pixelSize' option is given the 0 value. +*/ +L$1.Symbol.Dash = L$1.Class.extend({ + options: { + pixelSize: 10, + pathOptions: {} + }, + + initialize: function initialize(options) { + L$1.Util.setOptions(this, options); + this.options.pathOptions.clickable = false; + }, + + buildSymbol: function buildSymbol(dirPoint, latLngs, map, index, total) { + var opts = this.options; + var d2r = Math.PI / 180; + + // for a dot, nothing more to compute + if (opts.pixelSize <= 1) { + return L$1.polyline([dirPoint.latLng, dirPoint.latLng], opts.pathOptions); + } + + var midPoint = map.project(dirPoint.latLng); + var angle = -(dirPoint.heading - 90) * d2r; + var a = L$1.point(midPoint.x + opts.pixelSize * Math.cos(angle + Math.PI) / 2, midPoint.y + opts.pixelSize * Math.sin(angle) / 2); + // compute second point by central symmetry to avoid unecessary cos/sin + var b = midPoint.add(midPoint.subtract(a)); + return L$1.polyline([map.unproject(a), map.unproject(b)], opts.pathOptions); + } +}); + +L$1.Symbol.dash = function (options) { + return new L$1.Symbol.Dash(options); +}; + +L$1.Symbol.ArrowHead = L$1.Class.extend({ + options: { + polygon: true, + pixelSize: 10, + headAngle: 60, + pathOptions: { + stroke: false, + weight: 2 + } + }, + + initialize: function initialize(options) { + L$1.Util.setOptions(this, options); + this.options.pathOptions.clickable = false; + }, + + buildSymbol: function buildSymbol(dirPoint, latLngs, map, index, total) { + return this.options.polygon ? L$1.polygon(this._buildArrowPath(dirPoint, map), this.options.pathOptions) : L$1.polyline(this._buildArrowPath(dirPoint, map), this.options.pathOptions); + }, + + _buildArrowPath: function _buildArrowPath(dirPoint, map) { + var d2r = Math.PI / 180; + var tipPoint = map.project(dirPoint.latLng); + var direction = -(dirPoint.heading - 90) * d2r; + var radianArrowAngle = this.options.headAngle / 2 * d2r; + + var headAngle1 = direction + radianArrowAngle; + var headAngle2 = direction - radianArrowAngle; + var arrowHead1 = L$1.point(tipPoint.x - this.options.pixelSize * Math.cos(headAngle1), tipPoint.y + this.options.pixelSize * Math.sin(headAngle1)); + var arrowHead2 = L$1.point(tipPoint.x - this.options.pixelSize * Math.cos(headAngle2), tipPoint.y + this.options.pixelSize * Math.sin(headAngle2)); + + return [map.unproject(arrowHead1), dirPoint.latLng, map.unproject(arrowHead2)]; + } +}); + +L$1.Symbol.arrowHead = function (options) { + return new L$1.Symbol.ArrowHead(options); +}; + +L$1.Symbol.Marker = L$1.Class.extend({ + options: { + markerOptions: {}, + rotate: false + }, + + initialize: function initialize(options) { + L$1.Util.setOptions(this, options); + this.options.markerOptions.clickable = false; + this.options.markerOptions.draggable = false; + }, + + buildSymbol: function buildSymbol(directionPoint, latLngs, map, index, total) { + if (this.options.rotate) { + this.options.markerOptions.rotationAngle = directionPoint.heading + (this.options.angleCorrection || 0); + } + return L$1.marker(directionPoint.latLng, this.options.markerOptions); + } +}); + +L$1.Symbol.marker = function (options) { + return new L$1.Symbol.Marker(options); +}; + +var isCoord = function isCoord(c) { + return c instanceof L$1.LatLng || Array.isArray(c) && c.length === 2 && typeof c[0] === 'number'; +}; + +var isCoordArray = function isCoordArray(ll) { + return Array.isArray(ll) && isCoord(ll[0]); +}; + +L$1.PolylineDecorator = L$1.FeatureGroup.extend({ + options: { + patterns: [] + }, + + initialize: function initialize(paths, options) { + L$1.FeatureGroup.prototype.initialize.call(this); + L$1.Util.setOptions(this, options); + this._map = null; + this._paths = this._initPaths(paths); + this._bounds = this._initBounds(); + this._patterns = this._initPatterns(this.options.patterns); + }, + + /** + * Deals with all the different cases. input can be one of these types: + * array of LatLng, array of 2-number arrays, Polyline, Polygon, + * array of one of the previous. + */ + _initPaths: function _initPaths(input, isPolygon) { + var _this = this; + + if (isCoordArray(input)) { + // Leaflet Polygons don't need the first point to be repeated, but we do + var coords = isPolygon ? input.concat([input[0]]) : input; + return [coords]; + } + if (input instanceof L$1.Polyline) { + // we need some recursivity to support multi-poly* + return this._initPaths(input.getLatLngs(), input instanceof L$1.Polygon); + } + if (Array.isArray(input)) { + // flatten everything, we just need coordinate lists to apply patterns + return input.reduce(function (flatArray, p) { + return flatArray.concat(_this._initPaths(p, isPolygon)); + }, []); + } + return []; + }, + + // parse pattern definitions and precompute some values + _initPatterns: function _initPatterns(patternDefs) { + return patternDefs.map(this._parsePatternDef); + }, + + /** + * Changes the patterns used by this decorator + * and redraws the new one. + */ + setPatterns: function setPatterns(patterns) { + this.options.patterns = patterns; + this._patterns = this._initPatterns(this.options.patterns); + this.redraw(); + }, + + /** + * Changes the patterns used by this decorator + * and redraws the new one. + */ + setPaths: function setPaths(paths) { + this._paths = this._initPaths(paths); + this._bounds = this._initBounds(); + this.redraw(); + }, + + /** + * Parse the pattern definition + */ + _parsePatternDef: function _parsePatternDef(patternDef, latLngs) { + return { + symbolFactory: patternDef.symbol, + // Parse offset and repeat values, managing the two cases: + // absolute (in pixels) or relative (in percentage of the polyline length) + offset: parseRelativeOrAbsoluteValue(patternDef.offset), + endOffset: parseRelativeOrAbsoluteValue(patternDef.endOffset), + repeat: parseRelativeOrAbsoluteValue(patternDef.repeat) + }; + }, + + onAdd: function onAdd(map) { + this._map = map; + this._draw(); + this._map.on('moveend', this.redraw, this); + }, + + onRemove: function onRemove(map) { + this._map.off('moveend', this.redraw, this); + this._map = null; + L$1.FeatureGroup.prototype.onRemove.call(this, map); + }, + + /** + * As real pattern bounds depends on map zoom and bounds, + * we just compute the total bounds of all paths decorated by this instance. + */ + _initBounds: function _initBounds() { + var allPathCoords = this._paths.reduce(function (acc, path) { + return acc.concat(path); + }, []); + return L$1.latLngBounds(allPathCoords); + }, + + getBounds: function getBounds() { + return this._bounds; + }, + + /** + * Returns an array of ILayers object + */ + _buildSymbols: function _buildSymbols(latLngs, symbolFactory, directionPoints) { + var _this2 = this; + + return directionPoints.map(function (directionPoint, i) { + return symbolFactory.buildSymbol(directionPoint, latLngs, _this2._map, i, directionPoints.length); + }); + }, + + /** + * Compute pairs of LatLng and heading angle, + * that define positions and directions of the symbols on the path + */ + _getDirectionPoints: function _getDirectionPoints(latLngs, pattern) { + var _this3 = this; + + if (latLngs.length < 2) { + return []; + } + var pathAsPoints = latLngs.map(function (latLng) { + return _this3._map.project(latLng); + }); + return projectPatternOnPointPath(pathAsPoints, pattern).map(function (point) { + return { + latLng: _this3._map.unproject(L$1.point(point.pt)), + heading: point.heading + }; + }); + }, + + redraw: function redraw() { + if (!this._map) { + return; + } + this.clearLayers(); + this._draw(); + }, + + /** + * Returns all symbols for a given pattern as an array of FeatureGroup + */ + _getPatternLayers: function _getPatternLayers(pattern) { + var _this4 = this; + + var mapBounds = this._map.getBounds().pad(0.1); + return this._paths.map(function (path) { + var directionPoints = _this4._getDirectionPoints(path, pattern) + // filter out invisible points + .filter(function (point) { + return mapBounds.contains(point.latLng); + }); + return L$1.featureGroup(_this4._buildSymbols(path, pattern.symbolFactory, directionPoints)); + }); + }, + + /** + * Draw all patterns + */ + _draw: function _draw() { + var _this5 = this; + + this._patterns.map(function (pattern) { + return _this5._getPatternLayers(pattern); + }).forEach(function (layers) { + _this5.addLayer(L$1.featureGroup(layers)); + }); + } +}); +/* + * Allows compact syntax to be used + */ +L$1.polylineDecorator = function (paths, options) { + return new L$1.PolylineDecorator(paths, options); +}; + +}))); diff --git a/assets/js/sections/bandmap_list.js b/assets/js/sections/bandmap_list.js index 2e698ca57..b45f9a189 100644 --- a/assets/js/sections/bandmap_list.js +++ b/assets/js/sections/bandmap_list.js @@ -1227,6 +1227,11 @@ $(function() { $('#refreshIcon').removeClass('fa-spinner fa-spin').addClass('fa-hourglass-half'); $('#refreshTimer').text('Next update in ' + refreshCountdown + 's'); } + + // Update DX Map only if visible (don't waste resources) + if (dxMapVisible && dxMap) { + updateDxMap(); + } }, 100); } @@ -3328,6 +3333,884 @@ $(function() { // Update ages every 60 seconds setInterval(updateSpotAges, 60000); + // ======================================== + // DX MAP + // ======================================== + + let dxMap = null; + let dxMapVisible = false; + let dxccMarkers = []; + let spotterMarkers = []; + let connectionLines = []; + let userHomeMarker = null; + let showSpotters = false; + let hoverSpottersData = new Map(); // Store spotter data for hover + let hoverSpotterMarkers = []; // Temporary markers shown on hover + let hoverConnectionLines = []; // Temporary lines shown on hover + let hoverEventsInitialized = false; // Flag to prevent duplicate event handlers + + /** + * Initialize the DX Map with Leaflet + */ + function initDxMap() { + if (dxMap) return; + + dxMap = L.map('dxMap', { + center: [50.0647, 19.9450], // Krakow, Poland + zoom: 6, + zoomControl: true, + scrollWheelZoom: true, + fullscreenControl: true, + fullscreenControlOptions: { + position: 'topleft' + } + }); + + // Create custom panes for proper layering + dxMap.createPane('connectionLines'); + dxMap.getPane('connectionLines').style.zIndex = 400; + dxMap.createPane('arrowsPane'); + dxMap.getPane('arrowsPane').style.zIndex = 450; + + L.tileLayer(map_tile_server || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: map_tile_server_copyright || '© OpenStreetMap contributors', + maxZoom: 18, + minZoom: 1, + id: 'mapbox.streets' + }).addTo(dxMap); + + addUserHomeMarker(); + addSpottersControl(); + } + + /** + * Add user's home position marker + */ + function addUserHomeMarker() { + $.ajax({ + url: base_url + 'index.php/logbook/qralatlngjson', + type: 'post', + data: { qra: user_gridsquare }, + success: function(data) { + try { + const result = JSON.parse(data); + if (result && result[0] !== undefined && result[1] !== undefined) { + const homeIcon = L.icon({ + iconUrl: icon_dot_url, + iconSize: [18, 18] + }); + userHomeMarker = L.marker([result[0], result[1]], { icon: homeIcon }) + .addTo(dxMap) + .bindPopup('' + lang_bandmap_your_qth + ''); + } + } catch (e) { + console.warn('Could not parse user location:', e); + } + } + }); + } + + /** + * Add spotters control legend + */ + function addSpottersControl() { + const legend = L.control({ position: "topright" }); + legend.onAdd = function(map) { + const div = L.DomUtil.create("div", "legend"); + div.innerHTML = ' ' + lang_bandmap_draw_spotters + '
      '; + return div; + }; + legend.addTo(dxMap); + + setTimeout(() => { + $('#toggleSpotters').on('change', function() { + showSpotters = this.checked; + updateDxMap(); + }); + }, 100); + } + + /** + * Group spots by DXCC entity + */ + function groupSpotsByDXCC(spots) { + const dxccGroups = new Map(); + + spots.forEach(spot => { + const dxccId = spot.dxcc_spotted?.dxcc_id; + if (!dxccId) { + return; + } + + if (!dxccGroups.has(dxccId)) { + dxccGroups.set(dxccId, { + dxccId: dxccId, + lat: spot.dxcc_spotted.lat, + lng: spot.dxcc_spotted.lng, + entity: spot.dxcc_spotted.entity, + flag: spot.dxcc_spotted.flag, + continent: spot.dxcc_spotted.cont, + spots: [] + }); + } + + dxccGroups.get(dxccId).spots.push(spot); + }); + + return dxccGroups; + } + + /** + * Create HTML table for popup + */ + function createSpotTable(spots, dxccEntity, dxccFlag) { + // Add DXCC name header with flag (bigger flag size) + const flagEmoji = dxccFlag ? '' + dxccFlag + ' ' : ''; + let html = '
      ' + flagEmoji + dxccEntity + '
      '; + + // Create scrollable container if more than 5 spots + const needsScroll = spots.length > 5; + if (needsScroll) { + html += '
      '; + } + + html += '
    • '; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + + spots.forEach(spot => { + const freqMHz = (spot.frequency / 1000).toFixed(3); + + // Color code callsign based on worked/confirmed status (matching bandmap table) + let callClass = ''; + if (spot.cnfmd_call) { + callClass = 'text-success'; // Green = confirmed + } else if (spot.worked_call) { + callClass = 'text-warning'; // Yellow = worked + } + + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + }); + + html += '
    ' + lang_bandmap_callsign + '' + lang_bandmap_frequency + '' + lang_bandmap_mode + '' + lang_bandmap_band + 'Spotter
    ' + spot.spotted + '' + freqMHz + '' + (spot.mode || '') + '' + (spot.band || '') + '' + (spot.spotter || '') + '
    '; + + if (needsScroll) { + html += '
    '; + } + + return html; + } + + /** + * Get color based on mode (using DX waterfall colors) + */ + function getSpotModeColor(mode) { + const modeUpper = (mode || '').toUpperCase(); + if (modeUpper === 'CW') return '#FFA500'; // Orange + if (['SSB', 'LSB', 'USB', 'AM', 'FM', 'PHONE'].includes(modeUpper)) return '#00FF00'; // Green + if (['FT8', 'FT4', 'RTTY', 'PSK', 'DIGITAL', 'DIGI'].some(m => modeUpper.includes(m))) return '#0096FF'; // Blue + return '#A020F0'; // Purple for other + } + + /** + * Get border color based on continent status (matching bandmap table colors) + */ + function getContinentStatusColor(cnfmdContinent, workedContinent) { + // Green = confirmed, Yellow = worked (not confirmed), Red = new (not worked) + if (cnfmdContinent) { + return '#28a745'; // Bootstrap success green (confirmed) + } else if (workedContinent) { + return '#ffc107'; // Bootstrap warning yellow (worked but not confirmed) + } + return '#dc3545'; // Bootstrap danger red (new/not worked) + } + + /** + * Get fill color based on DXCC status (matching bandmap table colors) + */ + function getDxccStatusColor(cnfmdDxcc, workedDxcc) { + // Green = confirmed, Yellow = worked (not confirmed), Red = new (not worked) + if (cnfmdDxcc) { + return '#28a745'; // Bootstrap success green (confirmed) + } else if (workedDxcc) { + return '#ffc107'; // Bootstrap warning yellow (worked but not confirmed) + } + return '#dc3545'; // Bootstrap danger red (new/not worked) + } + + /** + * Scroll to spot in the main DataTable + */ + function scrollToSpotInTable(callsign) { + const table = get_dtable(); + if (!table) return; + + // Find row with matching callsign + const row = table.rows().nodes().toArray().find(node => { + const callsignCell = $(node).find('td:eq(4)').text(); + return callsignCell.includes(callsign); + }); + + if (row) { + // Scroll to row + $('html, body').animate({ + scrollTop: $(row).offset().top - 100 + }, 500); + + // Briefly highlight the row + $(row).addClass('table-active'); + setTimeout(() => { + $(row).removeClass('table-active'); + }, 2000); + } + } + + /** + * Update DX Map with DXCC grouping + */ + function updateDxMap() { + if (!dxMap) { + console.log('DX Map: map not initialized'); + return; + } + + // Clear existing markers + dxccMarkers.forEach(marker => dxMap.removeLayer(marker)); + spotterMarkers.forEach(marker => dxMap.removeLayer(marker)); + connectionLines.forEach(line => dxMap.removeLayer(line)); + dxccMarkers = []; + spotterMarkers = []; + connectionLines = []; + + // Get filtered spots from DataTable + const table = get_dtable(); + if (!table) { + return; + } + + const filteredData = table.rows({ search: 'applied' }).data(); + if (filteredData.length === 0) { + return; + } + + // Build list of spots from filtered data + const spots = []; + filteredData.each(function(row) { + const freqMHzStr = row[2]; + const freqKHz = parseFloat(freqMHzStr) * 1000; + const callsignHtml = row[4]; + + let callsign = null; + let match = callsignHtml.match(/db\/([^"]+)"/); + if (match) { + callsign = match[1]; + } else { + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = callsignHtml; + callsign = tempDiv.textContent.trim(); + } + + if (!callsign) return; + + const spot = cachedSpotData.find(s => + s.spotted === callsign && + Math.abs(s.frequency - freqKHz) < 5 + ); + + if (spot && spot.dxcc_spotted?.lat && spot.dxcc_spotted?.lng) { + spots.push(spot); + } + }); + + // Group by DXCC + const dxccGroups = groupSpotsByDXCC(spots); + + // Clear hover data for new update + hoverSpottersData.clear(); + + // Create one marker per DXCC + const bounds = []; + let markersCreated = 0; + + dxccGroups.forEach(dxccInfo => { + const lat = parseFloat(dxccInfo.lat); + const lng = parseFloat(dxccInfo.lng); + if (isNaN(lat) || isNaN(lng)) { + return; + } + + const count = dxccInfo.spots.length; + const countText = count > 1 ? ` x${count}` : ''; + + // Derive a short prefix from the first callsign + const firstCall = dxccInfo.spots[0]?.spotted || ''; + const prefix = firstCall.match(/^[A-Z0-9]{1,3}/)?.[0] || dxccInfo.entity.substring(0, 3).toUpperCase(); + + // Find the best (most optimistic) status in the group + // Priority: confirmed > worked > new + let bestContinentConfirmed = false; + let bestContinentWorked = false; + let bestDxccConfirmed = false; + let bestDxccWorked = false; + + dxccInfo.spots.forEach(spot => { + // Check continent status + if (spot.cnfmd_continent) { + bestContinentConfirmed = true; + } + if (spot.worked_continent) { + bestContinentWorked = true; + } + + // Check DXCC status + if (spot.cnfmd_dxcc) { + bestDxccConfirmed = true; + } + if (spot.worked_dxcc) { + bestDxccWorked = true; + } + }); + + const borderColor = getContinentStatusColor(bestContinentConfirmed, bestContinentWorked); + const fillColor = getDxccStatusColor(bestDxccConfirmed, bestDxccWorked); + + const marker = L.marker([lat, lng], { + icon: L.divIcon({ + className: 'dx-dxcc-marker', + html: `
    + ${prefix}${countText} +
    `, + iconSize: [45, 18], + iconAnchor: [22, 9] + }) + }); + + // Store spotter data for this DXCC for hover functionality (incoming spots) + const spottersForThisDxcc = []; + dxccInfo.spots.forEach(spot => { + if (spot.dxcc_spotter?.dxcc_id && spot.dxcc_spotter.lat && spot.dxcc_spotter.lng) { + spottersForThisDxcc.push({ + dxccId: spot.dxcc_spotter.dxcc_id, + lat: spot.dxcc_spotter.lat, + lng: spot.dxcc_spotter.lng, + entity: spot.dxcc_spotter.entity, + flag: spot.dxcc_spotter.flag, + continent: spot.dxcc_spotter.cont, + spotter: spot.spotter + }); + } + }); + + // Store outgoing spots data (where this DXCC is the spotter) + const outgoingSpots = []; + spots.forEach(spot => { + if (spot.dxcc_spotter?.dxcc_id === dxccInfo.dxccId && + spot.dxcc_spotted?.dxcc_id && + spot.dxcc_spotted.lat && + spot.dxcc_spotted.lng) { + outgoingSpots.push({ + dxccId: spot.dxcc_spotted.dxcc_id, + lat: spot.dxcc_spotted.lat, + lng: spot.dxcc_spotted.lng, + entity: spot.dxcc_spotted.entity, + flag: spot.dxcc_spotted.flag, + continent: spot.dxcc_spotted.cont, + callsign: spot.callsign + }); + } + }); + + hoverSpottersData.set(String(dxccInfo.dxccId), { + spotters: spottersForThisDxcc, // incoming (red) + outgoing: outgoingSpots, // outgoing (green) + targetLat: lat, + targetLng: lng, + targetContinent: dxccInfo.continent + }); + + marker.bindPopup(createSpotTable(dxccInfo.spots, dxccInfo.entity, dxccInfo.flag), { + maxWidth: 500, + minWidth: 350 + }); + marker.on('popupopen', function() { + // Add click handlers to callsign links after popup opens + setTimeout(() => { + document.querySelectorAll('.spot-link').forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); + const callsign = this.getAttribute('data-callsign'); + scrollToSpotInTable(callsign); + }); + }); + }, 10); + }); + marker.addTo(dxMap); + dxccMarkers.push(marker); + bounds.push([lat, lng]); + markersCreated++; + }); + + // Draw spotters if enabled + if (showSpotters) { + const spotterGroups = new Map(); + const drawnConnections = new Set(); // Track drawn connections + + spots.forEach(spot => { + const spotterId = spot.dxcc_spotter?.dxcc_id; + if (!spotterId) return; + + if (!spotterGroups.has(spotterId)) { + spotterGroups.set(spotterId, { + lat: spot.dxcc_spotter.lat, + lng: spot.dxcc_spotter.lng, + entity: spot.dxcc_spotter.entity, + flag: spot.dxcc_spotter.flag, + continent: spot.dxcc_spotter.cont, + spotIds: new Set(), + callsigns: [] + }); + } + + spotterGroups.get(spotterId).spotIds.add(spot.dxcc_spotted?.dxcc_id); + spotterGroups.get(spotterId).callsigns.push(spot.spotter); + }); + + // Detect bi-directional connections + const biDirectionalPairs = new Set(); + spotterGroups.forEach((spotterInfo, spotterId) => { + spotterInfo.spotIds.forEach(spotId => { + const spottedGroup = spotterGroups.get(spotId); + if (spottedGroup && spottedGroup.spotIds.has(spotterId)) { + // Create consistent pair key (sorted to avoid duplicates) + const pairKey = [spotterId, spotId].sort().join('-'); + biDirectionalPairs.add(pairKey); + } + }); + }); + + if (biDirectionalPairs.size > 0) { + console.log(`Found ${biDirectionalPairs.size} bi-directional connections:`, Array.from(biDirectionalPairs)); + } + + // Draw blue dots for spotters (permanent connections shown in orange) + spotterGroups.forEach((spotterInfo, spotterId) => { + const lat = parseFloat(spotterInfo.lat); + const lng = parseFloat(spotterInfo.lng); + if (isNaN(lat) || isNaN(lng)) return; + + const marker = L.circleMarker([lat, lng], { + radius: 5, + fillColor: '#ff9900', + color: '#fff', + weight: 2, + opacity: 1, + fillOpacity: 0.8 + }); + + // Add tooltip showing spotter entity and count + const uniqueCallsigns = [...new Set(spotterInfo.callsigns)]; + const spotterCount = uniqueCallsigns.length; + const tooltipText = `${spotterInfo.flag || ''} ${spotterInfo.entity}
    ${spotterCount} spotter${spotterCount !== 1 ? 's' : ''}`; + marker.bindTooltip(tooltipText, { permanent: false, direction: 'top' }); + + marker.addTo(dxMap); + spotterMarkers.push(marker); + + // Draw lines to spotted DXCC entities (skip if same continent) + spotterInfo.spotIds.forEach(spotId => { + const dxccInfo = dxccGroups.get(spotId); + if (dxccInfo) { + // Skip line if both are in same continent + if (spotterInfo.continent && dxccInfo.continent && + spotterInfo.continent === dxccInfo.continent) { + return; + } + + const spotLat = parseFloat(dxccInfo.lat); + const spotLng = parseFloat(dxccInfo.lng); + if (!isNaN(spotLat) && !isNaN(spotLng)) { + // Check if this is a bi-directional connection + const pairKey = [spotterId, spotId].sort().join('-'); + const isBiDirectional = biDirectionalPairs.has(pairKey); + + // Only draw once for bi-directional pairs (using sorted key) + if (isBiDirectional && drawnConnections.has(pairKey)) { + return; + } + drawnConnections.add(pairKey); + + // Create line with proper pane (orange for permanent spotters) + const line = L.polyline([[lat, lng], [spotLat, spotLng]], { + color: '#ff9900', + weight: 1, + opacity: 0.5, + dashArray: '5, 5', + pane: 'connectionLines' + }); + + line.addTo(dxMap); + connectionLines.push(line); + + // Add arrow decorator(s) to show direction (spotter → spotted) + if (typeof L.polylineDecorator !== 'undefined') { + if (isBiDirectional) { + // Bi-directional: add two filled arrows pointing in opposite directions + const decorator = L.polylineDecorator(line, { + patterns: [ + { + offset: '30%', + repeat: 0, + symbol: L.Symbol.arrowHead({ + pixelSize: 10, + polygon: true, + pathOptions: { + fillColor: '#ff9900', + fillOpacity: 0.9, + color: '#cc6600', + weight: 1, + opacity: 1 + } + }) + }, + { + offset: '70%', + repeat: 0, + symbol: L.Symbol.arrowHead({ + pixelSize: 10, + polygon: true, + pathOptions: { + fillColor: '#ff9900', + fillOpacity: 0.9, + color: '#cc6600', + weight: 1, + opacity: 1 + } + }) + } + ] + }); + decorator.addTo(dxMap); + connectionLines.push(decorator); + } else { + // Uni-directional: single filled arrow + const decorator = L.polylineDecorator(line, { + patterns: [{ + offset: '50%', + repeat: 0, + symbol: L.Symbol.arrowHead({ + pixelSize: 10, + polygon: true, + pathOptions: { + fillColor: '#ff9900', + fillOpacity: 0.9, + color: '#cc6600', + weight: 1, + opacity: 1 + } + }) + }] + }); + decorator.addTo(dxMap); + connectionLines.push(decorator); + } + } + } + } + }); + }); + } + + // Set up hover event handlers only once + if (!hoverEventsInitialized) { + hoverEventsInitialized = true; + + $(document).on('mouseenter', '.dx-marker-label', function() { + if (!dxMap) { + console.log('Hover: Map not initialized'); + return; + } + + // Clear any existing hover elements + hoverSpotterMarkers.forEach(marker => { + try { dxMap.removeLayer(marker); } catch(e) {} + }); + hoverConnectionLines.forEach(line => { + try { dxMap.removeLayer(line); } catch(e) {} + }); + hoverSpotterMarkers = []; + hoverConnectionLines = []; + + const dxccId = String($(this).data('dxcc-id')); + if (!dxccId || dxccId === 'undefined') { + console.log('Hover: No dxccId found'); + return; + } + + const hoverData = hoverSpottersData.get(dxccId); + if (!hoverData) { + console.log('Hover: No hover data for', dxccId); + return; + } + + // Group incoming spotters by their DXCC to avoid duplicate lines + const spotterMap = new Map(); + if (hoverData.spotters && hoverData.spotters.length > 0) { + hoverData.spotters.forEach(spotter => { + if (!spotterMap.has(spotter.dxccId)) { + spotterMap.set(spotter.dxccId, { + lat: spotter.lat, + lng: spotter.lng, + entity: spotter.entity, + flag: spotter.flag, + continent: spotter.continent, + callsigns: [] + }); + } + spotterMap.get(spotter.dxccId).callsigns.push(spotter.spotter); + }); + } + + // Group outgoing spots by their DXCC + const outgoingMap = new Map(); + if (hoverData.outgoing && hoverData.outgoing.length > 0) { + hoverData.outgoing.forEach(spotted => { + if (!outgoingMap.has(spotted.dxccId)) { + outgoingMap.set(spotted.dxccId, { + lat: spotted.lat, + lng: spotted.lng, + entity: spotted.entity, + flag: spotted.flag, + continent: spotted.continent, + callsigns: [] + }); + } + outgoingMap.get(spotted.dxccId).callsigns.push(spotted.callsign); + }); + } + + // Use requestAnimationFrame for smooth rendering + requestAnimationFrame(() => { + // Draw incoming spotter markers and lines (RED) + spotterMap.forEach((spotterInfo) => { + const lat = parseFloat(spotterInfo.lat); + const lng = parseFloat(spotterInfo.lng); + if (isNaN(lat) || isNaN(lng)) return; + + try { + const marker = L.circleMarker([lat, lng], { + radius: 5, + fillColor: '#ff0000', + color: '#fff', + weight: 2, + opacity: 1, + fillOpacity: 0.8 + }); + + const uniqueCallsigns = [...new Set(spotterInfo.callsigns)]; + const spotterCount = uniqueCallsigns.length; + const tooltipText = `${spotterInfo.flag || ''} ${spotterInfo.entity}
    ${spotterCount} spotter${spotterCount !== 1 ? 's' : ''}
    → Incoming`; + marker.bindTooltip(tooltipText, { permanent: false, direction: 'top' }); + + marker.addTo(dxMap); + hoverSpotterMarkers.push(marker); + + // Draw RED line (incoming: spotter → target) + const line = L.polyline([[lat, lng], [hoverData.targetLat, hoverData.targetLng]], { + color: '#ff0000', + weight: 2, + opacity: 0.7, + dashArray: '5, 5', + pane: 'connectionLines' + }); + + line.addTo(dxMap); + hoverConnectionLines.push(line); + + // Add arrow decorator to show direction (spotter → spotted) + if (L.polylineDecorator) { + const decorator = L.polylineDecorator(line, { + patterns: [{ + offset: '50%', + repeat: 0, + symbol: L.Symbol.arrowHead({ + pixelSize: 10, + polygon: true, + pathOptions: { + fillColor: '#ff0000', + fillOpacity: 0.9, + color: '#990000', + weight: 1, + opacity: 1 + } + }) + }] + }); + decorator.addTo(dxMap); + hoverConnectionLines.push(decorator); + } + } catch(e) { + console.error('Error drawing incoming hover spotter:', e); + } + }); + + // Draw outgoing spot markers and lines (GREEN) + outgoingMap.forEach((spottedInfo) => { + const lat = parseFloat(spottedInfo.lat); + const lng = parseFloat(spottedInfo.lng); + if (isNaN(lat) || isNaN(lng)) return; + + try { + const marker = L.circleMarker([lat, lng], { + radius: 5, + fillColor: '#00ff00', + color: '#fff', + weight: 2, + opacity: 1, + fillOpacity: 0.8 + }); + + const uniqueCallsigns = [...new Set(spottedInfo.callsigns)]; + const spotCount = uniqueCallsigns.length; + const tooltipText = `${spottedInfo.flag || ''} ${spottedInfo.entity}
    ${spotCount} spot${spotCount !== 1 ? 's' : ''}
    ← Outgoing`; + marker.bindTooltip(tooltipText, { permanent: false, direction: 'top' }); + + marker.addTo(dxMap); + hoverSpotterMarkers.push(marker); + + // Draw GREEN line (outgoing: target → spotted) + const line = L.polyline([[hoverData.targetLat, hoverData.targetLng], [lat, lng]], { + color: '#00ff00', + weight: 2, + opacity: 0.7, + dashArray: '5, 5', + pane: 'connectionLines' + }); + + line.addTo(dxMap); + hoverConnectionLines.push(line); + + // Add arrow decorator to show direction (target → spotted) + if (L.polylineDecorator) { + const decorator = L.polylineDecorator(line, { + patterns: [{ + offset: '50%', + repeat: 0, + symbol: L.Symbol.arrowHead({ + pixelSize: 10, + polygon: true, + pathOptions: { + fillColor: '#00ff00', + fillOpacity: 0.9, + color: '#009900', + weight: 1, + opacity: 1 + } + }) + }] + }); + decorator.addTo(dxMap); + hoverConnectionLines.push(decorator); + } + } catch(e) { + console.error('Error drawing outgoing hover spot:', e); + } + }); + }); + }); + + $(document).on('mouseleave', '.dx-marker-label', function() { + if (!dxMap) return; + + // Use requestAnimationFrame for smooth cleanup + requestAnimationFrame(() => { + // Remove hover spotters and lines + hoverSpotterMarkers.forEach(marker => { + try { dxMap.removeLayer(marker); } catch(e) {} + }); + hoverConnectionLines.forEach(line => { + try { dxMap.removeLayer(line); } catch(e) {} + }); + hoverSpotterMarkers = []; + hoverConnectionLines = []; + }); + }); + } + + // Fit bounds + if (bounds.length > 0) { + dxMap.fitBounds(bounds, { padding: [50, 50], maxZoom: 8 }); + } + + setTimeout(() => { + if (dxMap) dxMap.invalidateSize(); + }, 100); + } + + /** + * Toggle DX Map visibility + */ + $('#dxMapButton').on('click', function() { + const container = $('#dxMapContainer'); + + if (dxMapVisible) { + // Hide map + container.slideUp(300); + dxMapVisible = false; + $(this).removeClass('btn-success').addClass('btn-primary'); + } else { + // Show map + if (!dxMap) { + initDxMap(); + } + container.slideDown(300, function() { + updateDxMap(); + // After first show, wait 1 second and reset zoom/viewport + setTimeout(() => { + if (dxMap) { + const table = get_dtable(); + if (table) { + const filteredData = table.rows({ search: 'applied' }).data(); + if (filteredData.length > 0) { + // Collect bounds from all visible markers + const mapBounds = []; + dxccMarkers.forEach(marker => { + const latLng = marker.getLatLng(); + if (latLng) mapBounds.push([latLng.lat, latLng.lng]); + }); + if (mapBounds.length > 0) { + dxMap.fitBounds(mapBounds, { padding: [50, 50], maxZoom: 8 }); + } + } + } + } + }, 1000); + }); + dxMapVisible = true; + $(this).removeClass('btn-primary').addClass('btn-success'); + } + }); + + // Update map when filters change (if map is visible) + const originalApplyFilters = applyFilters; + applyFilters = function(forceReload = false) { + originalApplyFilters(forceReload); + // Only update map if it's visible - don't waste resources + if (dxMapVisible && dxMap) { + setTimeout(updateDxMap, 500); + } + }; + });