[2fd88f42] 1. Kartendarstellung (Neutralisierung):

1. Kartendarstellung (Neutralisierung): * Die TileLayer-URL in heatmap-tool/frontend/src/components/MapDisplay.tsx wurde auf eine neutrale CARTO light_all-Kachelansicht umgestellt und die Quellenangabe entsprechend angepasst.
2026-02-11 15:36:06 +00:00
parent 4eb4d033fd
commit fb7347eb89
9 changed files with 74 additions and 26 deletions
--- a/.dev_session/SESSION_INFO
+++ b/.dev_session/SESSION_INFO
@@ -1 +1 @@
-{"task_id": "2ff88f42-8544-8000-8314-c9013414d1d0", "token": "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", "session_start_time": "2026-02-11T13:36:10.682978"}
+{"task_id": "2fd88f42-8544-80f2-b60c-e23321da9620", "token": "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", "session_start_time": "2026-02-11T15:35:58.262778"}
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -201,9 +201,18 @@
            <p>
                Transkribieren Sie Meetings (MP3/WAV) mit automatischer Sprechererkennung und Timestamps via Gemini 2.0.
            </p>
-            <a href="http://192.168.0.2:8001/tr/" class="btn">Starten &rarr;</a>
+            <a href="/tr/" class="btn">Starten &rarr;</a>
        </div>
        
+        <!-- Heatmap Tool -->
+        <div class="card">
+            <span class="card-icon">🗺️</span>
+            <h2>Heatmap Tool</h2>
+            <p>
+                Visualisieren Sie Excel-Daten (PLZ) auf einer interaktiven Deutschlandkarte als Heatmap oder Cluster.
+            </p>
+            <a href="/heatmap/" class="btn">Starten &rarr;</a>
+        </div>
    </div>

    <footer>
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -28,6 +28,25 @@ services:
      - transcription-app
      - content-app
      - competitor-analysis
+      - heatmap-frontend
+
+  # --- HEATMAP ---
+  heatmap-backend:
+    build: ./heatmap-tool/backend
+    container_name: heatmap-backend
+    restart: unless-stopped
+    volumes:
+      - ./heatmap-tool/backend:/app
+
+  heatmap-frontend:
+    build: ./heatmap-tool/frontend
+    container_name: heatmap-frontend
+    restart: unless-stopped
+    volumes:
+      - ./heatmap-tool/frontend:/app
+    depends_on:
+      - heatmap-backend
+

  # --- AGENT (moltbot) ---
  # moltbot: # Moltbot ist oft auskommentiert, um Port-Konflikte zu vermeiden, da der Agent oft separat läuft.
@@ -88,8 +107,6 @@ services:
      GEMINI_API_KEY: "AIzaSyCFRmr1rOrkFKiEuh9GOCJNB2zfJsYmR68" # Placeholder, actual key is in file
    ports:
      - "8001:8001"
-    depends_on:
-      - nginx # Abhängigkeit vom Proxy, da der Frontend über den Proxy geht

  b2b-app:
    build:
--- a/heatmap-tool/frontend/src/App.css
+++ b/heatmap-tool/frontend/src/App.css
@@ -77,10 +77,3 @@ body {
  padding: 20px;
  border-radius: 8px;
 }
-
-.map-container p {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
--- a/heatmap-tool/frontend/src/App.tsx
+++ b/heatmap-tool/frontend/src/App.tsx
@@ -68,7 +68,7 @@ function App() {
    setIsLoading(true);
    setError(null);
    try {
-      const response = await axios.post('/api/set-plz-column', {
+      const response = await axios.post('/heatmap/api/set-plz-column', {
        plz_column: selectedColumn,
      });
      handleUploadSuccess(response.data); // Re-use the success handler
@@ -89,7 +89,7 @@ function App() {
    setIsLoading(true);
    setError(null);
    try {
-      const response = await axios.post('/api/heatmap', {
+      const response = await axios.post('/heatmap/api/heatmap', {
        filters: selectedFilters,
        tooltip_config: currentTooltipConfig, // Pass tooltip config to backend
      });
@@ -170,14 +170,18 @@ function App() {
              )}
            </div>
            <div className="map-container">
-            {isLoading && <p>Loading map data...</p>}
-            {error && <p className="error">{error}</p>}
-            <MapDisplay 
-              heatmapData={heatmapData} 
-              radiusMultiplier={radiusMultiplier}
-              viewMode={viewMode}
-              tooltipColumns={tooltipColumns}
-            />
+            {isLoading ? (
+                <p>Loading map data...</p>
+            ) : error ? (
+                <p className="error">{error}</p>
+            ) : (
+                <MapDisplay
+                heatmapData={heatmapData}
+                radiusMultiplier={radiusMultiplier}
+                viewMode={viewMode}
+                tooltipColumns={tooltipColumns}
+                />
+            )}
            </div>
        </main>
        </div>
--- a/heatmap-tool/frontend/src/components/FileUpload.tsx
+++ b/heatmap-tool/frontend/src/components/FileUpload.tsx
@@ -39,7 +39,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ onUploadSuccess, setIsLoading,
    setError(null);

    try {
-      const response = await axios.post('/api/upload', formData, {
+      const response = await axios.post('/heatmap/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
--- a/heatmap-tool/frontend/src/components/MapDisplay.tsx
+++ b/heatmap-tool/frontend/src/components/MapDisplay.tsx
@@ -77,7 +77,7 @@ const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier,

  if (heatmapData.length === 0) {
    return (
-      <div style={{ textAlign: 'center', paddingTop: '50px' }}>
+      <div>
        <p>No data to display on the map.</p>
        <p>Upload a file and apply filters to see the heatmap.</p>
      </div>
@@ -87,8 +87,8 @@ const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier,
  return (
    <MapContainer key={viewMode} center={germanyCenter} zoom={6} style={{ height: '100%', width: '100%' }}>
      <TileLayer
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
      />
      {viewMode === 'points' ? renderPoints() : renderHeatmap()}
    </MapContainer>
--- a/heatmap-tool/frontend/vite.config.ts
+++ b/heatmap-tool/frontend/vite.config.ts
@@ -3,11 +3,19 @@ import react from '@vitejs/plugin-react'

 // https://vite.dev/config/
 export default defineConfig({
+  base: '/heatmap/',
  plugins: [react()],
  server: {
+    host: true,
+    fs: {
+      strict: false
+    },
+    allowedHosts: [
+      'floke-ai.duckdns.org'
+    ],
    proxy: {
      '/api': {
-        target: 'http://backend:8000',
+        target: 'http://heatmap-backend:8000',
        changeOrigin: true,
      },
    }
--- a/nginx-proxy.conf
+++ b/nginx-proxy.conf
@@ -134,6 +134,23 @@ http {
            proxy_send_timeout 1800s;
        }

+        location ~ ^/heatmap/api/(.*)$ {
+            proxy_pass http://heatmap-backend:8000/api/$1$is_args$args;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /heatmap/ {
+            # Heatmap Tool
+            proxy_pass http://heatmap-frontend:5173;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+        }
+
        location /lead/ {
            # Lead Engine (TradingTwins)
            # Proxying external service on host