From 35f476211ef92b106da2d2db222aa5b03b147ca3 Mon Sep 17 00:00:00 2001
From: Ole-Morten Duesund <olemd@glemt.net>
Date: Sat, 23 Aug 2025 22:45:43 +0200
Subject: [PATCH] Improve aircraft marker visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase aircraft marker size from 20px to 24px
- Add aircraft wing elements for better aircraft appearance
- Use bright green color for aircraft with position data
- Add stronger drop shadow for better contrast against map
- Gray out aircraft without position data

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/css/style.css |  5 ++---
 static/js/app.js     | 32 +++++++++++++++++++++-----------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 388fc48..b2c4899 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -229,10 +229,9 @@ body {
 }
 
 .aircraft-marker {
-    width: 20px;
-    height: 20px;
     transform: rotate(0deg);
-    filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
+    filter: drop-shadow(0 0 4px rgba(0,0,0,0.9));
+    z-index: 1000;
 }
 
 .aircraft-popup {
diff --git a/static/js/app.js b/static/js/app.js
index b5412a6..7ba5696 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -210,7 +210,7 @@ class SkyView {
             if (this.aircraftMarkers.has(aircraft.hex)) {
                 const marker = this.aircraftMarkers.get(aircraft.hex);
                 marker.setLatLng(pos);
-                this.updateMarkerRotation(marker, aircraft.track);
+                this.updateMarkerRotation(marker, aircraft.track, aircraft);
                 this.updatePopupContent(marker, aircraft);
             } else {
                 const marker = this.createAircraftMarker(aircraft, pos);
@@ -224,11 +224,14 @@ class SkyView {
     }
 
     createAircraftMarker(aircraft, pos) {
+        const hasPosition = aircraft.lat && aircraft.lon;
+        const size = hasPosition ? 24 : 18;
+        
         const icon = L.divIcon({
             html: this.getAircraftIcon(aircraft),
             className: 'aircraft-marker',
-            iconSize: [20, 20],
-            iconAnchor: [10, 10]
+            iconSize: [size, size],
+            iconAnchor: [size/2, size/2]
         });
 
         const marker = L.marker(pos, { icon }).addTo(this.map);
@@ -242,20 +245,27 @@ class SkyView {
 
     getAircraftIcon(aircraft) {
         const rotation = aircraft.track || 0;
-        return `<svg width="20" height="20" viewBox="0 0 20 20" style="transform: rotate(${rotation}deg);">
-            <polygon points="10,2 8,18 10,16 12,18" fill="#00a8ff" stroke="#ffffff" stroke-width="1"/>
+        const hasPosition = aircraft.lat && aircraft.lon;
+        const color = hasPosition ? "#00ff88" : "#888888";
+        const size = hasPosition ? 24 : 18;
+        
+        return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" style="transform: rotate(${rotation}deg); filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));">
+            <polygon points="12,2 10,20 12,18 14,20" fill="${color}" stroke="#ffffff" stroke-width="2"/>
+            <polygon points="5,10 12,8 12,12" fill="${color}" stroke="#ffffff" stroke-width="1"/>
+            <polygon points="19,10 12,8 12,12" fill="${color}" stroke="#ffffff" stroke-width="1"/>
         </svg>`;
     }
 
-    updateMarkerRotation(marker, track) {
+    updateMarkerRotation(marker, track, aircraft) {
         if (track !== undefined) {
+            const hasPosition = aircraft.lat && aircraft.lon;
+            const size = hasPosition ? 24 : 18;
+            
             const icon = L.divIcon({
-                html: `<svg width="20" height="20" viewBox="0 0 20 20" style="transform: rotate(${track}deg);">
-                    <polygon points="10,2 8,18 10,16 12,18" fill="#00a8ff" stroke="#ffffff" stroke-width="1"/>
-                </svg>`,
+                html: this.getAircraftIcon(aircraft),
                 className: 'aircraft-marker',
-                iconSize: [20, 20],
-                iconAnchor: [10, 10]
+                iconSize: [size, size],
+                iconAnchor: [size/2, size/2]
             });
             marker.setIcon(icon);
         }