Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-07-08 09:38:12 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add map marker highlighting for selected aircraft in ADSB

Browse Source 
When clicking an aircraft in the sidebar, its map marker now shows
an enhanced white glow (10px) to distinguish it from other markers.
This matches the existing behavior in AIS mode.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-28 20:34:53 +00:00
parent 2716338b2b
commit 0f5fc5ebc0
1 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/adsb_dashboard.html
+29 -7
View File
@@ -2896,15 +2896,16 @@ sudo make install</code>
const callsign = ac.callsign || icao; const callsign = ac.callsign || icao;
const alt = ac.altitude ? ac.altitude + ' ft' : 'N/A'; const alt = ac.altitude ? ac.altitude + ' ft' : 'N/A';
const iconType = getAircraftIconType(ac.type_code, militaryInfo.military); const iconType = getAircraftIconType(ac.type_code, militaryInfo.military);
const isSelected = icao === selectedIcao;
const prevState = markerState[icao] || {}; const prevState = markerState[icao] || {};
const iconChanged = prevState.rotation !== rotation || prevState.color !== color || prevState.iconType !== iconType; const iconChanged = prevState.rotation !== rotation || prevState.color !== color || prevState.iconType !== iconType || prevState.isSelected !== isSelected;
const tooltipChanged = prevState.callsign !== callsign || prevState.alt !== alt; const tooltipChanged = prevState.callsign !== callsign || prevState.alt !== alt;
if (markers[icao]) { if (markers[icao]) {
markers[icao].setLatLng([ac.lat, ac.lon]); markers[icao].setLatLng([ac.lat, ac.lon]);
if (iconChanged) { if (iconChanged) {
markers[icao].setIcon(createMarkerIcon(rotation, color, iconType)); markers[icao].setIcon(createMarkerIcon(rotation, color, iconType, isSelected));
} }
if (tooltipChanged) { if (tooltipChanged) {
markers[icao].unbindTooltip(); markers[icao].unbindTooltip();
@@ -2913,7 +2914,7 @@ sudo make install</code>
}); });
} }
} else { } else {
markers[icao] = L.marker([ac.lat, ac.lon], { icon: createMarkerIcon(rotation, color, iconType) }) markers[icao] = L.marker([ac.lat, ac.lon], { icon: createMarkerIcon(rotation, color, iconType, isSelected) })
.addTo(radarMap) .addTo(radarMap)
.on('click', () => selectAircraft(icao)); .on('click', () => selectAircraft(icao));
markers[icao].bindTooltip(`${callsign}<br>${alt}`, { markers[icao].bindTooltip(`${callsign}<br>${alt}`, {
@@ -2921,7 +2922,7 @@ sudo make install</code>
}); });
} }
markerState[icao] = { rotation, color, callsign, alt, iconType }; markerState[icao] = { rotation, color, callsign, alt, iconType, isSelected };
} }
// Aircraft type icon SVG paths // Aircraft type icon SVG paths
@@ -2964,12 +2965,14 @@ sudo make install</code>
return 'jet'; return 'jet';
} }
function createMarkerIcon(rotation, color, iconType = 'jet') { function createMarkerIcon(rotation, color, iconType = 'jet', isSelected = false) {
const path = AIRCRAFT_ICONS[iconType] || AIRCRAFT_ICONS.jet; const path = AIRCRAFT_ICONS[iconType] || AIRCRAFT_ICONS.jet;
const size = iconType === 'helicopter' ? 22 : 24; const size = iconType === 'helicopter' ? 22 : 24;
const glowColor = isSelected ? 'rgba(255,255,255,0.9)' : color;
const glowSize = isSelected ? '10px' : '5px';
return L.divIcon({ return L.divIcon({
className: `aircraft-marker aircraft-${iconType}`, className: `aircraft-marker aircraft-${iconType}${isSelected ? ' selected' : ''}`,
html: `<svg width="${size}" height="${size}" viewBox="0 0 24 24" style="transform: rotate(${rotation}deg); color: ${color}; filter: drop-shadow(0 0 5px ${color});"> html: `<svg width="${size}" height="${size}" viewBox="0 0 24 24" style="transform: rotate(${rotation}deg); color: ${color}; filter: drop-shadow(0 0 ${glowSize} ${glowColor});">
<path fill="currentColor" d="${path}"/> <path fill="currentColor" d="${path}"/>
</svg>`, </svg>`,
iconSize: [size, size], iconSize: [size, size],
@@ -3086,7 +3089,26 @@ sudo make install</code>
} }
function selectAircraft(icao) { function selectAircraft(icao) {
const prevSelected = selectedIcao;
selectedIcao = icao; selectedIcao = icao;
// Update marker icons for both previous and new selection
[prevSelected, icao].forEach(targetIcao => {
if (targetIcao && markers[targetIcao] && aircraft[targetIcao]) {
const ac = aircraft[targetIcao];
const militaryInfo = isMilitaryAircraft(targetIcao, ac.callsign);
const rotation = Math.round((ac.heading || 0) / 5) * 5;
const color = militaryInfo.military ? '#556b2f' : getAltitudeColor(ac.altitude);
const iconType = getAircraftIconType(ac.type_code, militaryInfo.military);
const isSelected = targetIcao === icao;
markers[targetIcao].setIcon(createMarkerIcon(rotation, color, iconType, isSelected));
// Update marker state to reflect selection
if (markerState[targetIcao]) {
markerState[targetIcao].isSelected = isSelected;
}
}
});
renderAircraftList(); renderAircraftList();
showAircraftDetails(icao); showAircraftDetails(icao);
updateFlightLookupBtn(); updateFlightLookupBtn();