Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-30 01:29:59 -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 52cb47e5c9
commit f396ff7b66
1 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
templates/adsb_dashboard.html
View File

@@ -2896,15 +2896,16 @@ sudo make install</code>
const callsign = ac.callsign || icao;
const alt = ac.altitude ? ac.altitude + ' ft' : 'N/A';
const iconType = getAircraftIconType(ac.type_code, militaryInfo.military);
const isSelected = icao === selectedIcao;
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;
if (markers[icao]) {
markers[icao].setLatLng([ac.lat, ac.lon]);
if (iconChanged) {
markers[icao].setIcon(createMarkerIcon(rotation, color, iconType));
markers[icao].setIcon(createMarkerIcon(rotation, color, iconType, isSelected));
}
if (tooltipChanged) {
markers[icao].unbindTooltip();
@@ -2913,7 +2914,7 @@ sudo make install</code>
});
}
} 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)
.on('click', () => selectAircraft(icao));
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
@@ -2964,12 +2965,14 @@ sudo make install</code>
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 size = iconType === 'helicopter' ? 22 : 24;
const glowColor = isSelected ? 'rgba(255,255,255,0.9)' : color;
const glowSize = isSelected ? '10px' : '5px';
return L.divIcon({
className: `aircraft-marker aircraft-${iconType}`,
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});">
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 ${glowSize} ${glowColor});">
<path fill="currentColor" d="${path}"/>
</svg>`,
iconSize: [size, size],
@@ -3086,7 +3089,26 @@ sudo make install</code>
}
function selectAircraft(icao) {
const prevSelected = selectedIcao;
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();
showAircraftDetails(icao);
updateFlightLookupBtn();