feat: Improve aircraft legend clarity and icon differentiation
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:
parent
93b74e3d5c
commit
7461d881cf
7 changed files with 276 additions and 64 deletions
26
assets/static/icons/heavy.svg
Normal file
26
assets/static/icons/heavy.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
24
assets/static/icons/large.svg
Normal file
24
assets/static/icons/large.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="34" height="34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(17,17)">
|
||||
<!-- Large aircraft (wide-body airliner) -->
|
||||
<!-- Fuselage (wider than commercial) -->
|
||||
<path d="M0,-15 L-2,-13 L-2,8 L-1.2,11 L0,12 L1.2,11 L2,8 L2,-13 Z" fill="currentColor"/>
|
||||
<!-- Main wings (longer, wider) -->
|
||||
<path d="M-2,0 L-14,3.5 L-14,5.5 L-2,3 Z" fill="currentColor"/>
|
||||
<path d="M2,0 L14,3.5 L14,5.5 L2,3 Z" fill="currentColor"/>
|
||||
<!-- Wing tips (winglets) -->
|
||||
<path d="M-14,3.5 L-15,2.5 L-15,4 L-14,5 Z" fill="currentColor"/>
|
||||
<path d="M14,3.5 L15,2.5 L15,4 L14,5 Z" fill="currentColor"/>
|
||||
<!-- Tail wings -->
|
||||
<path d="M-1,9 L-6,10.5 L-6,11.5 L-1,10.5 Z" fill="currentColor"/>
|
||||
<path d="M1,9 L6,10.5 L6,11.5 L1,10.5 Z" fill="currentColor"/>
|
||||
<!-- Vertical stabilizer (taller) -->
|
||||
<path d="M0,7 L-0.6,7 L-2.5,12 L0,12 L2.5,12 L0.6,7 Z" fill="currentColor"/>
|
||||
<!-- Nose -->
|
||||
<ellipse cx="0" cy="-14" rx="2" ry="2.5" fill="currentColor"/>
|
||||
<!-- Engine nacelles (larger) -->
|
||||
<ellipse cx="-5" cy="2.5" rx="1.2" ry="2.5" fill="currentColor"/>
|
||||
<ellipse cx="5" cy="2.5" rx="1.2" ry="2.5" fill="currentColor"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
18
assets/static/icons/light.svg
Normal file
18
assets/static/icons/light.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(14,14)">
|
||||
<!-- Light aircraft (smaller, simpler design) -->
|
||||
<!-- Fuselage -->
|
||||
<path d="M0,-10 L-1,-9 L-1,5 L-0.5,7 L0,8 L0.5,7 L1,5 L1,-9 Z" fill="currentColor"/>
|
||||
<!-- Main wings -->
|
||||
<path d="M-1,-1 L-8,1 L-8,2.5 L-1,1 Z" fill="currentColor"/>
|
||||
<path d="M1,-1 L8,1 L8,2.5 L1,1 Z" fill="currentColor"/>
|
||||
<!-- Tail wings -->
|
||||
<path d="M-0.5,5 L-3,6 L-3,6.5 L-0.5,6 Z" fill="currentColor"/>
|
||||
<path d="M0.5,5 L3,6 L3,6.5 L0.5,6 Z" fill="currentColor"/>
|
||||
<!-- Vertical stabilizer -->
|
||||
<path d="M0,4 L-0.3,4 L-1,7 L0,7 L1,7 L0.3,4 Z" fill="currentColor"/>
|
||||
<!-- Nose -->
|
||||
<ellipse cx="0" cy="-9.5" rx="1" ry="1.5" fill="currentColor"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 835 B |
21
assets/static/icons/medium.svg
Normal file
21
assets/static/icons/medium.svg
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(15,15)">
|
||||
<!-- Medium aircraft (medium size, more detailed) -->
|
||||
<!-- Fuselage -->
|
||||
<path d="M0,-12 L-1.2,-11 L-1.2,6 L-0.8,8 L0,9 L0.8,8 L1.2,6 L1.2,-11 Z" fill="currentColor"/>
|
||||
<!-- Main wings -->
|
||||
<path d="M-1.2,-0.5 L-10,2 L-10,3.5 L-1.2,2 Z" fill="currentColor"/>
|
||||
<path d="M1.2,-0.5 L10,2 L10,3.5 L1.2,2 Z" fill="currentColor"/>
|
||||
<!-- Tail wings -->
|
||||
<path d="M-0.7,6.5 L-4,7.5 L-4,8.2 L-0.7,7.5 Z" fill="currentColor"/>
|
||||
<path d="M0.7,6.5 L4,7.5 L4,8.2 L0.7,7.5 Z" fill="currentColor"/>
|
||||
<!-- Vertical stabilizer -->
|
||||
<path d="M0,5 L-0.4,5 L-1.5,9 L0,9 L1.5,9 L0.4,5 Z" fill="currentColor"/>
|
||||
<!-- Nose -->
|
||||
<ellipse cx="0" cy="-11.5" rx="1.2" ry="1.8" fill="currentColor"/>
|
||||
<!-- Engine nacelles -->
|
||||
<ellipse cx="-3" cy="1.5" rx="0.8" ry="1.5" fill="currentColor"/>
|
||||
<ellipse cx="3" cy="1.5" rx="0.8" ry="1.5" fill="currentColor"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
Loading…
Add table
Add a link
Reference in a new issue