GEOINT: Zoom-adaptives Rendering

Rausgezoomt (Zoom 3-4): Nur 50-80 Marker, kleine Punkte,
  Schiffe nur wenn fahrend (SOG > 1kn)
Mittel (Zoom 5-6): 150-200 Marker, Schiffe ab SOG > 0.3kn
Detail (Zoom 7-9): 400 Marker, alle Schiffe, groessere Punkte
Nah (Zoom 10+): 600-800 Marker, volle Details, grosse Punkte

Marker-Groesse skaliert mit Zoom (2-4px).
Verhindert Browser-Ueberlastung bei Weltansicht.

src/static/js/geoint.js

@@ -257,8 +257,12 @@ const GEOINT = {
         if (!map || !this._flightLayer || !this._flightsData) return;
         var newLayer = L.layerGroup();
         var bounds = map.getBounds();
+        var zoom = map.getZoom();
+        // Zoom-adaptiv: weniger bei Uebersicht, mehr bei Detail
+        var maxMarkers = zoom >= 10 ? 600 : zoom >= 7 ? 400 : zoom >= 5 ? 200 : 80;
+        var markerSize = zoom >= 10 ? 4 : zoom >= 7 ? 3 : 2;
         var count = 0;
-        for (var i = 0; i < this._flightsData.length && count < 400; i++) {
+        for (var i = 0; i < this._flightsData.length && count < maxMarkers; i++) {
             var a = this._flightsData[i];
             if (!a.lat || !a.lon || !bounds.contains([a.lat, a.lon])) continue;
             count++;
@@ -273,7 +277,7 @@ const GEOINT = {
                 '<br><span class="geoint-popup-key">SPD</span> ' + (typeof spd === 'number' ? Math.round(spd) + ' kts' : spd) +
                 '</div>';
             L.circleMarker([a.lat, a.lon], {
-                radius: 3, fillColor: '#00ff88', color: '#004422',
+                radius: markerSize, fillColor: '#00ff88', color: '#004422',
                 fillOpacity: 0.9, weight: 1, renderer: this._canvasRenderer
             }).bindPopup(popup, { className: 'geoint-leaflet-popup' }).addTo(newLayer);
         }
@@ -341,10 +345,16 @@ const GEOINT = {
         if (!map || !this._shipsLayer || !this._shipsData) return;
         var newLayer = L.layerGroup();
         var bounds = map.getBounds();
+        var zoom = map.getZoom();
+        // Zoom-adaptiv: bei weitem Zoom nur fahrende Schiffe, naeher alle
+        var maxMarkers = zoom >= 10 ? 800 : zoom >= 7 ? 400 : zoom >= 5 ? 150 : 50;
+        var minSog = zoom >= 8 ? 0 : zoom >= 5 ? 0.3 : 1.0; // Nur bewegte Schiffe bei Uebersicht
+        var markerSize = zoom >= 10 ? 3.5 : zoom >= 7 ? 2.5 : 2;
         var count = 0;
-        for (var i = 0; i < this._shipsData.length && count < 500; i++) {
+        for (var i = 0; i < this._shipsData.length && count < maxMarkers; i++) {
             var s = this._shipsData[i];
             if (!s.lat || !s.lon || !bounds.contains([s.lat, s.lon])) continue;
+            if ((s.sog || 0) < minSog) continue; // Bei Uebersicht nur fahrende
             count++;
             var sog = s.sog || 0;
             var color = sog > 0.5 ? '#4499ff' : '#556688';
@@ -357,7 +367,7 @@ const GEOINT = {
                 '<br><span class="geoint-popup-key">NAV</span> ' + navText +
                 '</div>';
             L.circleMarker([s.lat, s.lon], {
-                radius: 2.5, fillColor: color, color: '#223355',
+                radius: markerSize, fillColor: color, color: '#223355',
                 fillOpacity: 0.85, weight: 0.5, renderer: this._canvasRenderer
             }).bindPopup(popup, { className: 'geoint-leaflet-popup' }).addTo(newLayer);
         }