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

Improve aircraft marker visibility

Browse source 
- 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>
This commit is contained in:
Ole-Morten Duesund 2025-08-23 22:45:43 +02:00
commit 35f476211e
2 changed files with 23 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

5
static/css/style.css
View file

@ -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 {

32
static/js/app.js
View file

@ -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);
}