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

26
assets/static/icons/heavy.svg Normal file
View file

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(18,18)">
<!-- Heavy aircraft (jumbo jet like A380 or 747) -->
<!-- Fuselage (very wide) -->
<path d="M0,-16 L-2.5,-14 L-2.5,9 L-1.5,12 L0,13 L1.5,12 L2.5,9 L2.5,-14 Z" fill="currentColor"/>
<!-- Main wings (very long and wide) -->
<path d="M-2.5,0.5 L-16,4 L-16,6.5 L-2.5,3.5 Z" fill="currentColor"/>
<path d="M2.5,0.5 L16,4 L16,6.5 L2.5,3.5 Z" fill="currentColor"/>
<!-- Wing tips (large winglets) -->
<path d="M-16,4 L-17.5,2.5 L-17.5,5 L-16,6.5 Z" fill="currentColor"/>
<path d="M16,4 L17.5,2.5 L17.5,5 L16,6.5 Z" fill="currentColor"/>
<!-- Tail wings (large) -->
<path d="M-1.2,10 L-7,11.8 L-7,13 L-1.2,11.5 Z" fill="currentColor"/>
<path d="M1.2,10 L7,11.8 L7,13 L1.2,11.5 Z" fill="currentColor"/>
<!-- Vertical stabilizer (very tall) -->
<path d="M0,8 L-0.8,8 L-3,13.5 L0,13.5 L3,13.5 L0.8,8 Z" fill="currentColor"/>
<!-- Nose (large) -->
<ellipse cx="0" cy="-15" rx="2.5" ry="3" fill="currentColor"/>
<!-- Engine nacelles (very large, 4 engines) -->
<ellipse cx="-6" cy="3" rx="1.5" ry="3" fill="currentColor"/>
<ellipse cx="6" cy="3" rx="1.5" ry="3" fill="currentColor"/>
<ellipse cx="-4" cy="4" rx="1" ry="2" fill="currentColor"/>
<ellipse cx="4" cy="4" rx="1" ry="2" fill="currentColor"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB