Refactor: Overpass nur via VLM, Panel ersetzt rechte Sidebar

- Overpass-Toggle aus Layer-Panel entfernt (kein Standalone-Modus)
- Overpass-Panel und UI-Script entfernt
- VLM-Panel nach rechts verschoben, ersetzt Sidebar wenn aktiv
- Sidebar wird automatisch ein-/ausgeblendet bei VLM Toggle
- VLM ruft Overpass API direkt auf (kein Umweg ueber OverpassUI)
- Ergebnis-Zaehler im VLM-Panel statt separatem Overpass-Panel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

static/css/globe.css

@@ -694,11 +694,11 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 /* === VLM Bildanalyse === */
 .dot-vlm { background: #e040fb; }
 
-.vlm-panel {
+.vlm-panel-right {
     position: fixed;
     top: 56px;
-    left: 268px;
+    right: 12px;
-    width: 360px;
+    width: 320px;
     max-height: calc(100vh - 100px);
     overflow-y: auto;
     background: var(--bg-panel);
@@ -783,6 +783,6 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
     flex-shrink: 0;
 }
 
-.vlm-panel::-webkit-scrollbar { width: 4px; }
+.vlm-panel-right::-webkit-scrollbar { width: 4px; }
-.vlm-panel::-webkit-scrollbar-track { background: transparent; }
+.vlm-panel-right::-webkit-scrollbar-track { background: transparent; }
-.vlm-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+.vlm-panel-right::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

static/index.html

@@ -108,13 +108,6 @@
                 <span class="layer-count" id="count-infra">-</span>
             </label>
             <div class="layer-status" id="status-infra"></div>
-<label class="layer-toggle">
-                <input type="checkbox" id="layer-overpass" title="Overpass Turbo: Beliebige OSM-Daten abfragen">
-                <span class="layer-dot dot-overpass"></span>
-                <span class="layer-name" title="OverpassQL-Abfragen gegen OpenStreetMap">Overpass</span>
-                <span class="layer-count" id="count-overpass">-</span>
-            </label>
-            <div class="layer-status" id="status-overpass"></div>
             <label class="layer-toggle">
                 <input type="checkbox" id="layer-vlm" title="VLM-Bildanalyse: Bild hochladen, Claude analysiert, Overpass sucht passende Orte">
                 <span class="layer-dot dot-vlm"></span>
@@ -208,11 +201,9 @@
     <div id="city-links" class="city-links"></div>
 
     <!-- Rechte Sidebar: Datenpunkt-Uebersicht -->
-    <!-- Overpass Panel -->
-    <div id="overpass-panel" class="overpass-panel" style="display:none"></div>
 
     <!-- VLM Bildanalyse Panel -->
-    <div id="vlm-panel" class="vlm-panel" style="display:none"></div>
+    <div id="vlm-panel" class="vlm-panel-right" style="display:none"></div>
     <aside id="sidebar-right" class="sidebar-right">
         <button id="sidebar-toggle" class="sidebar-toggle" title="Seitenleiste ein-/ausblenden">
             <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
@@ -259,7 +250,6 @@
     <script src="/static/js/layers/cables.js"></script>
     <script src="/static/js/layers/infra.js"></script>
 <script src="/static/js/layers/overpass.js"></script>
-    <script src="/static/js/ui/overpass.js"></script>
     <script src="/static/js/ui/vlm.js"></script>
     <script src="/static/js/layers/iss.js"></script>
     <script src="/static/js/layers/terminator.js"></script>

static/js/app.js

@@ -159,13 +159,17 @@ const Globe = {
             'layer-satellites': function(on) { on ? SatellitesLayer.start(Globe.viewer) : SatellitesLayer.stop(); },
             'layer-cables': function(on) { on ? CablesLayer.start(Globe.viewer) : CablesLayer.stop(); },
             'layer-infra': function(on) { on ? InfraLayer.start(Globe.viewer) : InfraLayer.stop(); },
-            'layer-overpass': function(on) {
-                if (on) { OverpassLayer.start(Globe.viewer); OverpassUI.show(); }
-                else { OverpassLayer.stop(); OverpassUI.hide(); }
-            },
             'layer-vlm': function(on) {
-                if (on) { VlmUI.show(); }
+                var sidebar = document.getElementById('sidebar-right');
-                else { VlmUI.hide(); }
+                if (on) {
+                    if (sidebar) sidebar.style.display = 'none';
+                    OverpassLayer.start(Globe.viewer);
+                    VlmUI.show();
+                } else {
+                    VlmUI.hide();
+                    OverpassLayer.stop();
+                    if (sidebar) sidebar.style.display = '';
+                }
             },
             'layer-iss': function(on) { on ? ISSLayer.start(Globe.viewer) : ISSLayer.stop(); },
             'layer-disasters': function(on) { on ? DisastersLayer.start(Globe.viewer) : DisastersLayer.stop(); },

static/js/ui/vlm.js

@@ -267,7 +267,8 @@ const VlmUI = {
         var searchResult = document.getElementById('vlm-search-result');
         if (searchResult) { searchResult.style.display = 'block'; searchResult.textContent = 'Generiere Overpass-Queries...'; searchResult.style.color = 'var(--text-dim)'; }
 
-        // Queries generieren
+        // 1. Queries generieren
+        var startTime = Date.now();
         fetch('/api/vlm/generate-queries', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -280,23 +281,35 @@ const VlmUI = {
         .then(function(data) {
             if (searchResult) searchResult.textContent = 'Query generiert (' + data.tag_count + ' Tags). Suche OSM-Daten...';
 
-            // Overpass-Layer aktivieren und Query ausfuehren
+            // 2. Overpass-Query direkt ausfuehren
-            var overpassCb = document.getElementById('layer-overpass');
-            if (overpassCb && !overpassCb.checked) {
-                overpassCb.checked = true;
-                overpassCb.dispatchEvent(new Event('change'));
-            }
-
-            // Query an Overpass senden
             OverpassLayer.setColor('#e040fb');
-            if (typeof OverpassUI !== 'undefined') {
+            return fetch('/api/overpass/query', {
-                OverpassUI.executeQueryDirect(data.query, bbox, '#e040fb');
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query: data.query, bbox: bbox }),
+            });
+        })
+        .then(function(r) {
+            if (r.status === 429) {
+                return r.json().then(function(d) { throw new Error(d.detail || 'Rate-Limit'); });
             }
-
+            if (!r.ok) {
+                return r.json().then(function(d) { throw new Error(d.detail || 'Overpass-Fehler'); });
+            }
+            return r.json();
+        })
+        .then(function(data) {
+            var elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+            OverpassLayer.render(data);
             if (searchResult) {
-                searchResult.textContent = 'Overpass-Suche gestartet';
+                var text = data.total + ' Orte gefunden (' + elapsed + 's)';
+                if (data.cached) text += ' [Cache]';
+                if (data.truncated) text += ' [Limit erreicht]';
+                searchResult.textContent = text;
                 searchResult.style.color = 'var(--accent)';
             }
+            var countEl = document.getElementById('count-vlm');
+            if (countEl) countEl.textContent = data.total;
         })
         .catch(function(e) {
             if (searchResult) {
@@ -329,5 +342,8 @@ const VlmUI = {
 
         var countEl = document.getElementById('count-vlm');
         if (countEl) countEl.textContent = '-';
+
+        // Overpass-Ergebnisse loeschen
+        if (typeof OverpassLayer !== 'undefined') OverpassLayer.clear();
     },
 };