feat: Replace SSTV map with Leaflet for accurate ISS tracking

- Use real Leaflet map with proper tile layers (same as satellite section)
- ISS marker with pulsing glow animation
- Ground track orbit line showing ISS path
- Map auto-pans to follow ISS position
- Simplified overlay showing position and next pass info
- Responsive layout that adapts to screen size
- Removed custom canvas rendering and continent data

The Leaflet map uses the same tile provider as other sections,
ensuring the ISS position is accurately displayed on a real map.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-29 17:15:32 +00:00
parent 7bef63aede
commit 468812bc09
3 changed files with 216 additions and 485 deletions

View File

@@ -1772,31 +1772,19 @@
</div>
</div>
<!-- ISS Info Row (Globe + Pass Info) -->
<div class="sstv-iss-row">
<!-- World Map -->
<div class="sstv-globe-container">
<canvas id="sstvGlobe" width="300" height="150"></canvas>
<div class="sstv-globe-info">
<div class="sstv-globe-label">ISS POSITION</div>
<div class="sstv-globe-coords">
<span id="sstvIssLat">--.-°</span>, <span id="sstvIssLon">--.-°</span>
<!-- ISS Tracking Map -->
<div class="sstv-map-row">
<div class="sstv-map-container">
<div id="sstvIssMap" class="sstv-iss-map"></div>
<div class="sstv-map-overlay">
<div class="sstv-map-info">
<span class="sstv-map-label">ISS</span>
<span class="sstv-map-coords"><span id="sstvIssLat">--.-</span>°, <span id="sstvIssLon">--.-</span>°</span>
<span class="sstv-map-alt">Alt: <span id="sstvIssAlt">---</span> km</span>
</div>
<div class="sstv-globe-alt">Alt: <span id="sstvIssAlt">---</span> km</div>
</div>
</div>
<!-- Pass Info -->
<div id="sstvIssInfo" class="sstv-pass-info-container">
<div class="sstv-iss-info">
<svg class="sstv-iss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 7L9 3 5 7l4 4"/>
<path d="m17 11 4 4-4 4-4-4"/>
<path d="m8 12 4 4 6-6-4-4-6 6"/>
</svg>
<div class="sstv-iss-details">
<div class="sstv-iss-label">Next ISS Pass</div>
<div class="sstv-iss-value">Loading...</div>
<div class="sstv-iss-note">Check ARISS.org for SSTV event schedules</div>
<div class="sstv-pass-info">
<span class="sstv-pass-label">Next Pass:</span>
<span class="sstv-pass-value" id="sstvNextPass">Loading...</span>
</div>
</div>
</div>