AegisSight Globe: Initiales Release

Eigenstaendige GEOINT-Anwendung mit CesiumJS 3D-Globus.
Echtzeit-Datenlayer: Flugverkehr (airplanes.live, 64 Stuetzpunkte),
Schiffsverkehr (AISStream.io WebSocket), Erdbeben (USGS),
Nachrichten (GDELT GEO). FastAPI Backend, taktisches Dark-UI.

static/css/globe.css

@@ -0,0 +1,94 @@
+/* AegisSight Globe — Taktisches Dark Theme */
+:root {
+    --bg-primary: #0b1121;
+    --bg-panel: rgba(11, 17, 33, 0.92);
+    --border: rgba(0, 255, 136, 0.15);
+    --accent: #00ff88;
+    --accent-dim: rgba(0, 255, 136, 0.4);
+    --text: #e8eaf0;
+    --text-dim: rgba(255,255,255,0.5);
+    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { height: 100%; overflow: hidden; background: var(--bg-primary); color: var(--text); font-family: var(--font-mono); }
+
+/* === Cesium Container === */
+#cesiumContainer { position: absolute; inset: 0; z-index: 1; }
+/* Cesium UI ausblenden */
+.cesium-viewer-toolbar,
+.cesium-viewer-animationContainer,
+.cesium-viewer-timelineContainer,
+.cesium-viewer-fullscreenContainer,
+.cesium-viewer-infoBoxContainer,
+.cesium-viewer-geocoderContainer,
+.cesium-viewer-bottom { display: none !important; }
+.cesium-credit-logoContainer { opacity: 0.3; }
+
+/* === Header === */
+#header {
+    position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 100;
+    display: flex; align-items: center; padding: 0 16px; gap: 16px;
+    background: var(--bg-panel); border-bottom: 1px solid var(--border);
+    backdrop-filter: blur(12px);
+}
+.header-brand { display: flex; align-items: center; gap: 8px; }
+.header-title { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
+.header-stats { flex: 1; text-align: center; font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }
+.header-actions { display: flex; gap: 8px; }
+.header-btn {
+    background: none; border: 1px solid var(--border); border-radius: 4px;
+    color: var(--text); padding: 4px 8px; cursor: pointer; transition: all 0.2s;
+}
+.header-btn:hover { border-color: var(--accent); color: var(--accent); }
+
+/* === Layer Panel === */
+.layer-panel {
+    position: fixed; top: 52px; left: 12px; z-index: 100;
+    width: 200px; background: var(--bg-panel); border: 1px solid var(--border);
+    border-radius: 8px; padding: 12px; backdrop-filter: blur(12px);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+}
+.panel-title {
+    font-size: 9px; font-weight: 700; letter-spacing: 3px; color: var(--accent);
+    margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
+}
+.panel-section { display: flex; flex-direction: column; gap: 4px; }
+.panel-divider { height: 1px; background: var(--border); margin: 8px 0; }
+
+.layer-toggle {
+    display: flex; align-items: center; gap: 6px; padding: 4px 6px;
+    border-radius: 4px; cursor: pointer; transition: background 0.15s;
+}
+.layer-toggle:hover { background: rgba(255,255,255,0.04); }
+.layer-toggle input[type="checkbox"] {
+    accent-color: var(--accent); width: 12px; height: 12px; cursor: pointer; flex-shrink: 0;
+}
+.layer-dot {
+    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+}
+.dot-flights { background: var(--accent); }
+.dot-ships { background: #4499ff; }
+.dot-quakes { background: #ff4444; }
+.dot-gdelt { background: #ff8800; }
+.dot-daynight { background: #8866cc; }
+.dot-labels { background: #aaaaaa; }
+.layer-name { font-size: 11px; color: var(--text); flex: 1; }
+.layer-count { font-size: 10px; color: var(--text-dim); }
+
+.panel-coords {
+    font-size: 10px; color: var(--accent); letter-spacing: 0.5px;
+    padding: 6px 0 0; text-align: center;
+}
+
+/* === Bottom Bar === */
+#bottom-bar {
+    position: fixed; bottom: 0; left: 0; right: 0; height: 28px; z-index: 100;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--bg-panel); border-top: 1px solid var(--border);
+    backdrop-filter: blur(8px);
+}
+.bottom-stats { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
+
+/* === Cesium InfoBox Override === */
+.cesium-infoBox { background: var(--bg-panel) !important; border: 1px solid var(--border) !important; }
+.cesium-infoBox-title { color: var(--accent) !important; font-family: var(--font-mono) !important; }

static/index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AegisSight Globe</title>
+    <script src="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Cesium.js"></script>
+    <link href="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/globe.css">
+</head>
+<body>
+    <!-- Header -->
+    <header id="header">
+        <div class="header-brand">
+            <svg class="header-logo" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#00ff88" stroke-width="2">
+                <circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z"/>
+            </svg>
+            <span class="header-title">AegisSight Globe</span>
+        </div>
+        <div class="header-stats" id="header-stats"></div>
+        <div class="header-actions">
+            <button class="header-btn" id="btn-fullscreen" title="Vollbild">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+            </button>
+        </div>
+    </header>
+
+    <!-- Layer Panel -->
+    <aside id="layer-panel" class="layer-panel">
+        <h3 class="panel-title">LAYER</h3>
+        <div class="panel-section">
+            <label class="layer-toggle">
+                <input type="checkbox" id="layer-flights" checked>
+                <span class="layer-dot dot-flights"></span>
+                <span class="layer-name">Flugverkehr</span>
+                <span class="layer-count" id="count-flights">-</span>
+            </label>
+            <label class="layer-toggle">
+                <input type="checkbox" id="layer-ships" checked>
+                <span class="layer-dot dot-ships"></span>
+                <span class="layer-name">Schiffsverkehr</span>
+                <span class="layer-count" id="count-ships">-</span>
+            </label>
+            <label class="layer-toggle">
+                <input type="checkbox" id="layer-quakes">
+                <span class="layer-dot dot-quakes"></span>
+                <span class="layer-name">Erdbeben</span>
+                <span class="layer-count" id="count-quakes">-</span>
+            </label>
+            <label class="layer-toggle">
+                <input type="checkbox" id="layer-gdelt">
+                <span class="layer-dot dot-gdelt"></span>
+                <span class="layer-name">Nachrichten</span>
+                <span class="layer-count" id="count-gdelt">-</span>
+            </label>
+        </div>
+        <div class="panel-divider"></div>
+        <div class="panel-section">
+            <label class="layer-toggle">
+                <input type="checkbox" id="layer-daynight" checked>
+                <span class="layer-dot dot-daynight"></span>
+                <span class="layer-name">Tag/Nacht</span>
+            </label>
+            <label class="layer-toggle">
+                <input type="checkbox" id="layer-labels">
+                <span class="layer-dot dot-labels"></span>
+                <span class="layer-name">Ortsnamen</span>
+            </label>
+        </div>
+        <div class="panel-divider"></div>
+        <div class="panel-coords" id="coords-display">
+            LAT: --&nbsp;&nbsp;LON: --
+        </div>
+    </aside>
+
+    <!-- CesiumJS Container -->
+    <div id="cesiumContainer"></div>
+
+    <!-- Bottom Bar -->
+    <footer id="bottom-bar">
+        <div class="bottom-stats" id="bottom-stats">
+            Initialisiere...
+        </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script src="/static/js/app.js"></script>
+    <script src="/static/js/layers/flights.js"></script>
+    <script src="/static/js/layers/ships.js"></script>
+    <script src="/static/js/layers/quakes.js"></script>
+    <script src="/static/js/layers/gdelt.js"></script>
+</body>
+</html>

static/js/app.js

@@ -0,0 +1,124 @@
+/**
+ * AegisSight Globe — Haupt-App: CesiumJS Viewer, Layer-Management, UI.
+ */
+const Globe = {
+    viewer: null,
+    layers: {},
+    _statsInterval: null,
+
+    init() {
+        // Cesium Ion Token
+        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZTRlZTk4ZC01YjBjLTQ0Y2EtYjdlYi1kNDAwYTIwZjA3YjkiLCJpZCI6NDA4MzI4LCJpYXQiOjE3NzQzNDcyMzR9.eXzrtBDzNsBCbvUHu_Hc-A5gTcBDkspS7IrPDbc5y8M';
+
+        // Viewer erstellen
+        this.viewer = new Cesium.Viewer('cesiumContainer', {
+            terrain: Cesium.Terrain.fromWorldTerrain(),
+            animation: false,
+            timeline: false,
+            fullscreenButton: false,
+            geocoder: false,
+            homeButton: false,
+            infoBox: true,
+            selectionIndicator: true,
+            navigationHelpButton: false,
+            sceneModePicker: false,
+            baseLayerPicker: false,
+            skyBox: new Cesium.SkyBox({
+                sources: {
+                    positiveX: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_px.jpg'),
+                    negativeX: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_mx.jpg'),
+                    positiveY: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_py.jpg'),
+                    negativeY: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_my.jpg'),
+                    positiveZ: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_pz.jpg'),
+                    negativeZ: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_mz.jpg'),
+                }
+            }),
+        });
+
+        // Atmosphere und Beleuchtung
+        this.viewer.scene.globe.enableLighting = true;
+        this.viewer.scene.fog.enabled = true;
+        this.viewer.scene.globe.showGroundAtmosphere = true;
+        this.viewer.clock.shouldAnimate = true;
+
+        // Kamera auf Europa
+        this.viewer.camera.flyTo({
+            destination: Cesium.Cartesian3.fromDegrees(10.0, 48.0, 8000000),
+            duration: 0,
+        });
+
+        // Koordinaten-Anzeige bei Mausbewegung
+        var coordsEl = document.getElementById('coords-display');
+        var scene = this.viewer.scene;
+        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+        handler.setInputAction(function(movement) {
+            var cartesian = scene.pickPosition(movement.endPosition);
+            if (!cartesian) {
+                var ray = scene.camera.getPickRay(movement.endPosition);
+                cartesian = scene.globe.pick(ray, scene);
+            }
+            if (cartesian) {
+                var carto = Cesium.Cartographic.fromCartesian(cartesian);
+                var lat = Cesium.Math.toDegrees(carto.latitude).toFixed(4);
+                var lon = Cesium.Math.toDegrees(carto.longitude).toFixed(4);
+                coordsEl.textContent = 'LAT: ' + lat + '  LON: ' + lon;
+            }
+        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+        // Layer Checkboxen
+        this._setupLayerToggles();
+
+        // Fullscreen
+        document.getElementById('btn-fullscreen').addEventListener('click', function() {
+            if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); }
+            else { document.exitFullscreen(); }
+        });
+
+        // Stats Update
+        this._statsInterval = setInterval(function() { Globe._updateStats(); }, 5000);
+
+        // Layer starten (die mit checked)
+        if (typeof FlightsLayer !== 'undefined') FlightsLayer.start(this.viewer);
+        if (typeof ShipsLayer !== 'undefined') ShipsLayer.start(this.viewer);
+
+        document.getElementById('bottom-stats').textContent = 'Globe initialisiert — Lade Daten...';
+    },
+
+    _setupLayerToggles() {
+        var toggles = {
+            'layer-flights': function(on) { on ? FlightsLayer.start(Globe.viewer) : FlightsLayer.stop(); },
+            'layer-ships': function(on) { on ? ShipsLayer.start(Globe.viewer) : ShipsLayer.stop(); },
+            'layer-quakes': function(on) { on ? QuakesLayer.start(Globe.viewer) : QuakesLayer.stop(); },
+            'layer-gdelt': function(on) { on ? GdeltLayer.start(Globe.viewer) : GdeltLayer.stop(); },
+            'layer-daynight': function(on) { Globe.viewer.scene.globe.enableLighting = on; },
+            'layer-labels': function(on) { /* Phase 2 */ },
+        };
+        Object.keys(toggles).forEach(function(id) {
+            var cb = document.getElementById(id);
+            if (cb) cb.addEventListener('change', function() { toggles[id](this.checked); });
+        });
+    },
+
+    _updateStats() {
+        var parts = [];
+        if (typeof FlightsLayer !== 'undefined' && FlightsLayer._count > 0) {
+            parts.push(FlightsLayer._count.toLocaleString('de-DE') + ' Flugzeuge');
+            document.getElementById('count-flights').textContent = FlightsLayer._count.toLocaleString('de-DE');
+        }
+        if (typeof ShipsLayer !== 'undefined' && ShipsLayer._count > 0) {
+            parts.push(ShipsLayer._count.toLocaleString('de-DE') + ' Schiffe');
+            document.getElementById('count-ships').textContent = ShipsLayer._count.toLocaleString('de-DE');
+        }
+        if (typeof QuakesLayer !== 'undefined' && QuakesLayer._count > 0) {
+            document.getElementById('count-quakes').textContent = QuakesLayer._count.toLocaleString('de-DE');
+        }
+        if (typeof GdeltLayer !== 'undefined' && GdeltLayer._count > 0) {
+            document.getElementById('count-gdelt').textContent = GdeltLayer._count.toLocaleString('de-DE');
+        }
+        if (parts.length) {
+            document.getElementById('bottom-stats').textContent = parts.join('  |  ');
+        }
+    },
+};
+
+document.addEventListener('DOMContentLoaded', function() { Globe.init(); });

static/js/layers/flights.js

@@ -0,0 +1,79 @@
+/**
+ * Flugverkehr-Layer: Grüne Punkte mit Höhenprofil auf dem 3D-Globus.
+ */
+const FlightsLayer = {
+    _viewer: null,
+    _dataSource: null,
+    _interval: null,
+    _count: 0,
+
+    start(viewer) {
+        if (this._dataSource) return;
+        this._viewer = viewer;
+        this._dataSource = new Cesium.CustomDataSource('flights');
+        viewer.dataSources.add(this._dataSource);
+        this._fetch();
+        var self = this;
+        this._interval = setInterval(function() { self._fetch(); }, 30000);
+    },
+
+    stop() {
+        if (this._interval) { clearInterval(this._interval); this._interval = null; }
+        if (this._dataSource && this._viewer) {
+            this._viewer.dataSources.remove(this._dataSource);
+            this._dataSource = null;
+        }
+        this._count = 0;
+    },
+
+    _fetch() {
+        var self = this;
+        fetch('/api/flights')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            if (!self._dataSource) return;
+            self._dataSource.entities.removeAll();
+            var ac = data.ac || [];
+            self._count = ac.length;
+            ac.forEach(function(a) {
+                if (!a.lat || !a.lon) return;
+                var alt = (a.alt_baro || a.alt_geom || 10000) * 0.3048; // ft -> m
+                if (alt < 100) alt = 10000; // ground = default
+                var cs = (a.flight || a.callsign || a.hex || '???').trim();
+                var spd = a.gs || 0;
+                self._dataSource.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, alt),
+                    point: {
+                        pixelSize: 4,
+                        color: Cesium.Color.fromCssColorString('#00ff88'),
+                        outlineColor: Cesium.Color.fromCssColorString('#004422'),
+                        outlineWidth: 1,
+                        heightReference: Cesium.HeightReference.NONE,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                    },
+                    label: {
+                        text: cs,
+                        font: '10px monospace',
+                        fillColor: Cesium.Color.fromCssColorString('#00ff88').withAlpha(0.8),
+                        outlineColor: Cesium.Color.BLACK,
+                        outlineWidth: 2,
+                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                        pixelOffset: new Cesium.Cartesian2(8, -4),
+                        scale: 0.8,
+                        showBackground: false,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
+                    },
+                    description: '<div style="font-family:monospace;font-size:12px;color:#00ff88">' +
+                        '<strong>' + cs + '</strong><br>' +
+                        'ALT: ' + (a.alt_baro || '?') + ' ft<br>' +
+                        'SPD: ' + Math.round(spd) + ' kts<br>' +
+                        'HDG: ' + Math.round(a.track || 0) + '°' +
+                        (a.t ? '<br>TYP: ' + a.t : '') +
+                        '</div>',
+                });
+            });
+        })
+        .catch(function(e) { console.warn('Flights fetch error:', e); });
+    },
+};

static/js/layers/gdelt.js

@@ -0,0 +1,62 @@
+/**
+ * GDELT Nachrichten-Layer: Geokodierte Echtzeit-News.
+ */
+const GdeltLayer = {
+    _viewer: null,
+    _dataSource: null,
+    _interval: null,
+    _count: 0,
+
+    start(viewer) {
+        if (this._dataSource) return;
+        this._viewer = viewer;
+        this._dataSource = new Cesium.CustomDataSource('gdelt');
+        viewer.dataSources.add(this._dataSource);
+        this._fetch();
+        var self = this;
+        this._interval = setInterval(function() { self._fetch(); }, 600000);
+    },
+
+    stop() {
+        if (this._interval) { clearInterval(this._interval); this._interval = null; }
+        if (this._dataSource && this._viewer) {
+            this._viewer.dataSources.remove(this._dataSource);
+            this._dataSource = null;
+        }
+        this._count = 0;
+    },
+
+    _fetch() {
+        var self = this;
+        fetch('/api/gdelt')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            if (!self._dataSource) return;
+            self._dataSource.entities.removeAll();
+            var features = data.features || [];
+            self._count = features.length;
+            features.forEach(function(f) {
+                var c = f.geometry.coordinates;
+                var p = f.properties || {};
+                var title = (p.name || p.title || 'Nachricht').substring(0, 80);
+                var url = p.url || '';
+                self._dataSource.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(c[0], c[1]),
+                    point: {
+                        pixelSize: 5,
+                        color: Cesium.Color.fromCssColorString('#ff8800'),
+                        outlineColor: Cesium.Color.fromCssColorString('#663300'),
+                        outlineWidth: 1,
+                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                    },
+                    description: '<div style="font-family:monospace;font-size:12px;color:#ff8800">' +
+                        '<strong>' + title + '</strong>' +
+                        (url ? '<br><a href="' + url + '" target="_blank" style="color:#44aaff">Quelle</a>' : '') +
+                        '</div>',
+                });
+            });
+        })
+        .catch(function(e) { console.warn('GDELT fetch error:', e); });
+    },
+};

static/js/layers/quakes.js

@@ -0,0 +1,71 @@
+/**
+ * Erdbeben-Layer: Farbige Kreise auf der Erdoberfläche.
+ */
+const QuakesLayer = {
+    _viewer: null,
+    _dataSource: null,
+    _interval: null,
+    _count: 0,
+
+    start(viewer) {
+        if (this._dataSource) return;
+        this._viewer = viewer;
+        this._dataSource = new Cesium.CustomDataSource('quakes');
+        viewer.dataSources.add(this._dataSource);
+        this._fetch();
+        var self = this;
+        this._interval = setInterval(function() { self._fetch(); }, 300000);
+    },
+
+    stop() {
+        if (this._interval) { clearInterval(this._interval); this._interval = null; }
+        if (this._dataSource && this._viewer) {
+            this._viewer.dataSources.remove(this._dataSource);
+            this._dataSource = null;
+        }
+        this._count = 0;
+    },
+
+    _fetch() {
+        var self = this;
+        fetch('/api/quakes')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            if (!self._dataSource) return;
+            self._dataSource.entities.removeAll();
+            var features = data.features || [];
+            self._count = features.length;
+            var now = Date.now();
+            features.forEach(function(f) {
+                var c = f.geometry.coordinates;
+                var p = f.properties;
+                var mag = p.mag || 1;
+                var ageH = (now - p.time) / 3600000;
+                var color = ageH < 1
+                    ? Cesium.Color.RED.withAlpha(0.8)
+                    : ageH < 6 ? Cesium.Color.ORANGE.withAlpha(0.7)
+                    : ageH < 12 ? Cesium.Color.YELLOW.withAlpha(0.6)
+                    : Cesium.Color.YELLOW.withAlpha(0.4);
+                var radius = Math.max(mag * 15000, 20000); // Meter
+                self._dataSource.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(c[0], c[1]),
+                    ellipse: {
+                        semiMinorAxis: radius,
+                        semiMajorAxis: radius,
+                        material: color,
+                        outline: true,
+                        outlineColor: color.withAlpha(1.0),
+                        outlineWidth: 1,
+                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                    },
+                    description: '<div style="font-family:monospace;font-size:12px;color:#ff6644">' +
+                        '<strong>M' + mag.toFixed(1) + '</strong> ' + (p.place || '') + '<br>' +
+                        'Tiefe: ' + (c[2] || '?') + ' km<br>' +
+                        'Zeit: ' + new Date(p.time).toLocaleString('de-DE') +
+                        '</div>',
+                });
+            });
+        })
+        .catch(function(e) { console.warn('Quakes fetch error:', e); });
+    },
+};

static/js/layers/ships.js

@@ -0,0 +1,79 @@
+/**
+ * Schiffsverkehr-Layer: Blaue Punkte auf Meereshöhe.
+ */
+const ShipsLayer = {
+    _viewer: null,
+    _dataSource: null,
+    _interval: null,
+    _count: 0,
+
+    start(viewer) {
+        if (this._dataSource) return;
+        this._viewer = viewer;
+        this._dataSource = new Cesium.CustomDataSource('ships');
+        viewer.dataSources.add(this._dataSource);
+        this._fetch();
+        var self = this;
+        this._interval = setInterval(function() { self._fetch(); }, 60000);
+    },
+
+    stop() {
+        if (this._interval) { clearInterval(this._interval); this._interval = null; }
+        if (this._dataSource && this._viewer) {
+            this._viewer.dataSources.remove(this._dataSource);
+            this._dataSource = null;
+        }
+        this._count = 0;
+    },
+
+    _fetch() {
+        var self = this;
+        fetch('/api/ships')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            if (!self._dataSource) return;
+            self._dataSource.entities.removeAll();
+            var ships = data.ships || [];
+            self._count = ships.length;
+            ships.forEach(function(s) {
+                if (!s.lat || !s.lon) return;
+                var sog = s.sog || 0;
+                var color = sog > 0.5
+                    ? Cesium.Color.fromCssColorString('#4499ff')
+                    : Cesium.Color.fromCssColorString('#556688');
+                var name = s.name || ('MMSI ' + (s.mmsi || '?'));
+                self._dataSource.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),
+                    point: {
+                        pixelSize: 3,
+                        color: color,
+                        outlineColor: Cesium.Color.fromCssColorString('#112244'),
+                        outlineWidth: 0.5,
+                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                    },
+                    label: {
+                        text: name,
+                        font: '9px monospace',
+                        fillColor: Cesium.Color.fromCssColorString('#4499ff').withAlpha(0.7),
+                        outlineColor: Cesium.Color.BLACK,
+                        outlineWidth: 2,
+                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                        pixelOffset: new Cesium.Cartesian2(6, -3),
+                        scale: 0.7,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500000),
+                    },
+                    description: '<div style="font-family:monospace;font-size:12px;color:#4499ff">' +
+                        '<strong>' + name + '</strong><br>' +
+                        'MMSI: ' + (s.mmsi || '?') + '<br>' +
+                        'SOG: ' + sog.toFixed(1) + ' kn<br>' +
+                        'COG: ' + Math.round(s.cog || 0) + '°<br>' +
+                        'HDG: ' + (s.heading || '?') + '°' +
+                        '</div>',
+                });
+            });
+        })
+        .catch(function(e) { console.warn('Ships fetch error:', e); });
+    },
+};