diff --git a/application/views/bandmap/list.php b/application/views/bandmap/list.php index 0d9161e13..72cef795e 100644 --- a/application/views/bandmap/list.php +++ b/application/views/bandmap/list.php @@ -74,6 +74,11 @@ var lang_bandmap_comment = ""; var lang_bandmap_age = ""; var lang_bandmap_time = ""; + var lang_bandmap_incoming = ""; + var lang_bandmap_outgoing = ""; + var lang_bandmap_spots = ""; + var lang_bandmap_spot = ""; + var lang_bandmap_spotters = ""; // DataTables messages diff --git a/application/views/interface_assets/footer.php b/application/views/interface_assets/footer.php index aac53b813..472bbf6d5 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/assets/js/sections/bandmap_list.js b/assets/js/sections/bandmap_list.js index a228d81a6..e7c679f90 100644 --- a/assets/js/sections/bandmap_list.js +++ b/assets/js/sections/bandmap_list.js @@ -3548,7 +3548,7 @@ $(function() { function createSpotTable(spots, dxccEntity, dxccFlag) { // Add DXCC name header with flag (bigger flag size) const flagEmoji = dxccFlag ? '' + dxccFlag + ' ' : ''; - let html = '
' + flagEmoji + dxccEntity + '
'; + let html = '
' + flagEmoji + dxccEntity + '
'; // Create scrollable container if more than 5 spots const needsScroll = spots.length > 5; @@ -3559,10 +3559,10 @@ $(function() { html += ''; html += ''; html += ''; - html += ''; - html += ''; - html += ''; - html += ''; + html += ''; + html += ''; + html += ''; + html += ''; html += ''; spots.forEach(spot => { @@ -3578,7 +3578,7 @@ $(function() { html += ''; html += ''; - html += ''; + html += ''; html += ''; html += ''; html += ''; @@ -3822,8 +3822,8 @@ $(function() { }); marker.bindPopup(createSpotTable(dxccInfo.spots, dxccInfo.entity, dxccInfo.flag), { - maxWidth: 500, - minWidth: 350 + maxWidth: 650, + minWidth: 450 }); marker.on('popupopen', function() { // Add click handlers to callsign links after popup opens @@ -3932,13 +3932,14 @@ $(function() { } drawnConnections.add(pairKey); - // Create line with proper pane (orange for permanent spotters) - const line = L.polyline([[lat, lng], [spotLat, spotLng]], { + // Use L.Geodesic instead of L.polyline for great circle paths + const line = L.geodesic([[lat, lng], [spotLat, spotLng]], { color: '#ff9900', weight: 1, opacity: 0.5, dashArray: '5, 5', - pane: 'connectionLines' + pane: 'connectionLines', + wrap: false }); line.addTo(dxMap); @@ -4023,6 +4024,9 @@ $(function() { return; } + // Hide all other spot labels (fade them out) + $('.dx-marker-label').not(this).css('opacity', '0.15'); + // Clear any existing hover elements hoverSpotterMarkers.forEach(marker => { try { dxMap.removeLayer(marker); } catch(e) {} @@ -4099,21 +4103,20 @@ $(function() { 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' }); + const uniqueCallsigns = [...new Set(spotterInfo.callsigns)]; + const spotterCount = uniqueCallsigns.length; + const tooltipText = `${spotterInfo.flag || ''} ${spotterInfo.entity}
${spotterCount} ${spotterCount !== 1 ? lang_bandmap_spotters : lang_bandmap_spotter}
→ ${lang_bandmap_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]], { + marker.addTo(dxMap); + hoverSpotterMarkers.push(marker); // Draw RED line (incoming: spotter → target) using geodesic + const line = L.geodesic([[lat, lng], [hoverData.targetLat, hoverData.targetLng]], { color: '#ff0000', weight: 2, opacity: 0.7, dashArray: '5, 5', - pane: 'connectionLines' + pane: 'connectionLines', + wrap: false }); line.addTo(dxMap); @@ -4162,21 +4165,20 @@ $(function() { 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' }); + const uniqueCallsigns = [...new Set(spottedInfo.callsigns)]; + const spotCount = uniqueCallsigns.length; + const tooltipText = `${spottedInfo.flag || ''} ${spottedInfo.entity}
${spotCount} ${spotCount !== 1 ? lang_bandmap_spots : lang_bandmap_spot}
← ${lang_bandmap_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]], { + marker.addTo(dxMap); + hoverSpotterMarkers.push(marker); // Draw GREEN line (outgoing: target → spotted) using geodesic + const line = L.geodesic([[hoverData.targetLat, hoverData.targetLng], [lat, lng]], { color: '#00ff00', weight: 2, opacity: 0.7, dashArray: '5, 5', - pane: 'connectionLines' + pane: 'connectionLines', + wrap: false }); line.addTo(dxMap); @@ -4214,6 +4216,9 @@ $(function() { $(document).on('mouseleave', '.dx-marker-label', function() { if (!dxMap) return; + // Restore visibility of all spot labels + $('.dx-marker-label').css('opacity', '1'); + // Use requestAnimationFrame for smooth cleanup requestAnimationFrame(() => { // Remove hover spotters and lines
' + lang_bandmap_callsign + '' + lang_bandmap_frequency + '' + lang_bandmap_mode + '' + lang_bandmap_band + 'Spotter' + lang_bandmap_frequency + '' + lang_bandmap_mode + '' + lang_bandmap_band + '' + lang_bandmap_spotter + '
' + spot.spotted + '' + freqMHz + '' + freqMHz + ' MHz' + (spot.mode || '') + '' + (spot.band || '') + '' + (spot.spotter || '') + '