backend/main.py

@@ -441,12 +441,6 @@ async def ui_vector_test():
     # Testet den echten ui.js-Vektor-Pfad (UI.map.create) ohne Auth/App-Shell.
     return FileResponse(os.path.join(STATIC_DIR, "ui-vector-test.html"), media_type="text/html")
 
-
-@app.get("/maplibre-perf-test")
-async def maplibre_perf_test():
-    # Wegwerf-Perf-Test: MapLibre GPU + 600 Cluster-Marker auf DACH-Basemap (Handy-Test).
-    return FileResponse(os.path.join(STATIC_DIR, "maplibre-perf-test.html"), media_type="text/html")
-
 # User-generierte Medien (Fotos aus Tagebuch, Giftköder-Alarm, etc.)
 MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
 os.makedirs(MEDIA_DIR, exist_ok=True)

backend/static/js/map-gl-style.js

@@ -1,60 +0,0 @@
-// MapLibre-GL-Style für die zentrale Karte — gerendert aus unseren DACH-PMTiles
-// (OpenMapTiles-Schema). GPU + Worker → performant auf dem Handy (Ziel der Migration).
-// GEOMETRIE-ONLY (keine Symbol/Text-Layer) → KEINE Glyphs/Fonts nötig für den ersten
-// Perf-Test. Labels (mit Glyph-Hosting) kommen in M3, wenn die Performance steht.
-(function () {
-  'use strict';
-
-  var TILES_FILE = 'dach.pmtiles';
-  function tilesUrl() { return window.location.origin + '/tiles/' + TILES_FILE; }
-
-  var THEMES = {
-    light: {
-      bg: '#f4f1ec', land: '#dce8c8', park: '#c8e6b0', water: '#a0c8f0',
-      road: '#ffffff', roadCasing: '#d9cfc2', building: '#e6ddcf',
-      buildingLine: '#d4cabb', boundary: '#b08ac0',
-    },
-    dark: {
-      bg: '#1a1d21', land: '#222820', park: '#27331f', water: '#16242e',
-      road: '#3a4046', roadCasing: '#23282d', building: '#262b30',
-      buildingLine: '#31373d', boundary: '#7d5a8c',
-    },
-  };
-
-  // Liefert ein MapLibre-Style-JSON (Version 8) ohne glyphs/sprite.
-  function build(opts) {
-    opts = opts || {};
-    var t = THEMES[opts.dark ? 'dark' : 'light'];
-    return {
-      version: 8,
-      sources: {
-        by: { type: 'vector', url: 'pmtiles://' + tilesUrl() },
-      },
-      layers: [
-        { id: 'bg', type: 'background', paint: { 'background-color': t.bg } },
-        { id: 'landcover', type: 'fill', source: 'by', 'source-layer': 'landcover',
-          paint: { 'fill-color': t.land, 'fill-opacity': 0.55 } },
-        { id: 'park', type: 'fill', source: 'by', 'source-layer': 'park',
-          paint: { 'fill-color': t.park, 'fill-opacity': 0.5 } },
-        { id: 'water', type: 'fill', source: 'by', 'source-layer': 'water',
-          paint: { 'fill-color': t.water } },
-        { id: 'waterway', type: 'line', source: 'by', 'source-layer': 'waterway',
-          paint: { 'line-color': t.water, 'line-width': 1 } },
-        { id: 'road-casing', type: 'line', source: 'by', 'source-layer': 'transportation',
-          minzoom: 11,
-          paint: { 'line-color': t.roadCasing,
-            'line-width': ['interpolate', ['linear'], ['zoom'], 11, 2, 16, 6] } },
-        { id: 'roads', type: 'line', source: 'by', 'source-layer': 'transportation',
-          paint: { 'line-color': t.road,
-            'line-width': ['interpolate', ['linear'], ['zoom'], 6, 0.5, 12, 1.5, 16, 4] } },
-        { id: 'buildings', type: 'fill', source: 'by', 'source-layer': 'building',
-          minzoom: 13,
-          paint: { 'fill-color': t.building, 'fill-outline-color': t.buildingLine } },
-        { id: 'boundary', type: 'line', source: 'by', 'source-layer': 'boundary',
-          paint: { 'line-color': t.boundary, 'line-dasharray': [2, 2], 'line-width': 1 } },
-      ],
-    };
-  }
-
-  window.MapGLStyle = { build: build, tilesUrl: tilesUrl, tilesFile: TILES_FILE };
-})();

backend/static/js/maplibre-perf-test.js

@@ -1,70 +0,0 @@
-// Wegwerf-Perf-Test: beweist MapLibre-GPU-Rendering auf dem Handy mit realistischer
-// Marker-Last (600 Punkte, GeoJSON-Clustering) auf unserer DACH-Basemap — die Kombi,
-// die mit protomaps-leaflet (Main-Thread) den UI-Thread blockierte.
-// Cluster-Zahlen weggelassen (Text bräuchte Glyphs → kommt erst in M3).
-(function () {
-  'use strict';
-  var st = document.getElementById('status');
-  function set(t) { if (st) st.textContent = t; }
-
-  try {
-    var proto = new pmtiles.Protocol();
-    maplibregl.addProtocol('pmtiles', proto.tile);
-    var isDark = document.documentElement.dataset.theme === 'dark';
-
-    var map = new maplibregl.Map({
-      container: 'map',
-      style: MapGLStyle.build({ dark: isDark }),
-      center: [11.576, 48.137], zoom: 12, hash: true,
-    });
-    map.addControl(new maplibregl.NavigationControl(), 'top-right');
-    map.addControl(new maplibregl.ScaleControl());
-
-    // Kategorie-Icon (farbiger Kreis) per Canvas → addImage (Icons brauchen KEINE Glyphs).
-    function makeIcon(color) {
-      var s = 34, c = document.createElement('canvas'); c.width = c.height = s;
-      var x = c.getContext('2d');
-      x.beginPath(); x.arc(s / 2, s / 2, s / 2 - 3, 0, Math.PI * 2);
-      x.fillStyle = color; x.fill();
-      x.lineWidth = 2; x.strokeStyle = 'rgba(52,68,36,0.6)'; x.stroke();
-      return x.getImageData(0, 0, s, s);
-    }
-
-    // 600 deterministische Pseudo-POIs um München (3 Kategorien).
-    function genPois(n) {
-      var feats = [], seed = 42;
-      function rnd() { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; }
-      for (var i = 0; i < n; i++) {
-        feats.push({ type: 'Feature', properties: { cat: i % 3 },
-          geometry: { type: 'Point', coordinates: [11.40 + rnd() * 0.36, 48.03 + rnd() * 0.24] } });
-      }
-      return { type: 'FeatureCollection', features: feats };
-    }
-
-    map.on('load', function () {
-      map.addImage('cat0', makeIcon('#e8590c'));
-      map.addImage('cat1', makeIcon('#2f9e44'));
-      map.addImage('cat2', makeIcon('#1971c2'));
-      map.addSource('pois', { type: 'geojson', data: genPois(600),
-        cluster: true, clusterRadius: 50, clusterMaxZoom: 16 });
-      map.addLayer({ id: 'clusters', type: 'circle', source: 'pois', filter: ['has', 'point_count'],
-        paint: {
-          'circle-color': '#5b4a2f', 'circle-stroke-color': 'rgba(52,68,36,0.65)', 'circle-stroke-width': 2,
-          'circle-radius': ['step', ['get', 'point_count'], 14, 10, 18, 50, 24],
-        } });
-      map.addLayer({ id: 'poi', type: 'symbol', source: 'pois', filter: ['!', ['has', 'point_count']],
-        layout: {
-          'icon-image': ['match', ['get', 'cat'], 0, 'cat0', 1, 'cat1', 2, 'cat2', 'cat0'],
-          'icon-allow-overlap': true, 'icon-size': 0.7,
-        } });
-      set('✅ MapLibre + 600 Marker — jetzt zoomen/schieben, fühlt sich das flüssig an?');
-    });
-
-    map.on('error', function (e) {
-      set('⚠️ ' + (e && e.error ? e.error.message : 'Fehler'));
-      if (e && e.error) console.error(e.error);
-    });
-  } catch (e) {
-    set('❌ ' + (e && e.message ? e.message : e));
-  }
-})();

backend/static/maplibre-perf-test.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <title>Ban Yaro — MapLibre Perf-Test (600 Marker)</title>
-  <link rel="stylesheet" href="/js/vendor/maplibre-gl.css">
-  <style>
-    html,body{margin:0;height:100%}
-    #map{position:absolute;inset:0}
-    #hud{position:absolute;top:10px;left:10px;z-index:5;background:rgba(255,255,255,.92);
-      padding:8px 12px;border-radius:8px;font:13px system-ui,sans-serif;box-shadow:0 1px 6px rgba(0,0,0,.2);max-width:80vw}
-  </style>
-</head>
-<body>
-  <div id="map"></div>
-  <div id="hud"><b>MapLibre Perf-Test</b> — DACH-Basemap + 600 Cluster-Marker<br><span id="status">lädt…</span></div>
-  <script src="/js/vendor/maplibre-gl.js"></script>
-  <script src="/js/vendor/pmtiles.js"></script>
-  <script src="/js/map-gl-style.js"></script>
-  <script src="/js/maplibre-perf-test.js"></script>
-</body>
-</html>