olemd/skyview
1
0
Fork 0
Code Issues 12 Pull requests Projects Releases 11 Packages Wiki Activity Actions

feat: Improve aircraft legend clarity and icon differentiation

Browse source 
Resolves issue #13 by implementing comprehensive aircraft legend improvements:

## New Features
- **Size-based aircraft icons**: Created distinct SVG icons for light, medium, large, and heavy aircraft with progressively larger visual representations
- **Visual aircraft icons in legend**: Replaced colored squares with actual aircraft silhouettes showing relative sizes and types
- **Enhanced categorization**: Added military category to legend and improved icon selection logic

## Improvements
- **Better differentiation**: Each weight class now has a unique icon shape, not just color
- **Accurate ADS-B mapping**: Icons correctly map to decoded ADS-B emitter categories
- **Clearer legend display**: Users can now see actual aircraft shapes instead of generic colored rectangles

## Technical Changes
- Created 4 new SVG icons: light.svg, medium.svg, large.svg, heavy.svg
- Updated legend HTML to embed aircraft SVG icons inline
- Enhanced JavaScript logic to better match categories to appropriate icon types
- Simplified color mapping function for cleaner code

This addresses the original concerns about confusing legend entries and lack of visual differentiation between aircraft types.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2025-09-01 09:57:39 +02:00
commit 7461d881cf
7 changed files with 276 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

33
assets/static/css/style.css
View file

@ -262,21 +262,28 @@ body {
}
.legend-icon {
width: 16px;
height: 16px;
border-radius: 2px;
border: 1px solid #ffffff;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 8px;
}
.legend-icon.light { background: #00bfff; } /* Sky blue for light aircraft */
.legend-icon.medium { background: #00ff88; } /* Green for medium aircraft */
.legend-icon.large { background: #ff8c00; } /* Orange for large aircraft */
.legend-icon.high-vortex { background: #ff4500; } /* Red-orange for high vortex large */
.legend-icon.heavy { background: #ff0000; } /* Red for heavy aircraft */
.legend-icon.helicopter { background: #ff00ff; } /* Magenta for helicopters */
.legend-icon.military { background: #ff4444; } /* Red-orange for military */
.legend-icon.ga { background: #ffff00; } /* Yellow for general aviation */
.legend-icon.ground { background: #888888; } /* Gray for ground vehicles */
.legend-icon svg {
width: 100%;
height: 100%;
}
.legend-icon.light svg { color: #00bfff; } /* Sky blue for light aircraft */
.legend-icon.medium svg { color: #00ff88; } /* Green for medium aircraft */
.legend-icon.large svg { color: #ff8c00; } /* Orange for large aircraft */
.legend-icon.high-vortex svg { color: #ff4500; } /* Red-orange for high vortex large */
.legend-icon.heavy svg { color: #ff0000; } /* Red for heavy aircraft */
.legend-icon.helicopter svg { color: #ff00ff; } /* Magenta for helicopters */
.legend-icon.military svg { color: #ff4444; } /* Red-orange for military */
.legend-icon.ga svg { color: #ffff00; } /* Yellow for general aviation */
.legend-icon.ground svg { color: #888888; } /* Gray for ground vehicles */
.table-controls {
display: flex;