feat([2fd88f42]): initial setup of heatmap tool

heatmap-tool/frontend/src/components/MapDisplay.tsx

@@ -0,0 +1,67 @@
+// src/components/MapDisplay.tsx
+import React from 'react';
+import { MapContainer, TileLayer, CircleMarker, Tooltip } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import { HeatmapPoint } from '../App'; // Assuming type is exported from App.tsx
+
+interface MapDisplayProps {
+  heatmapData: HeatmapPoint[];
+}
+
+const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData }) => {
+  const germanyCenter: [number, number] = [51.1657, 10.4515];
+
+  // Simple scaling function for marker radius
+  const calculateRadius = (count: number) => {
+    return 5 + Math.log(count + 1) * 5;
+  };
+  
+  // Simple color scaling function
+  const getColor = (count: number, maxCount: number) => {
+    const ratio = count / maxCount;
+    if (ratio > 0.8) return 'red';
+    if (ratio > 0.5) return 'orange';
+    if (ratio > 0.2) return 'yellow';
+    return 'green';
+  }
+
+  const maxCount = Math.max(...heatmapData.map(p => p.count), 1);
+
+
+  if (heatmapData.length === 0) {
+      return (
+          <div style={{ textAlign: 'center', paddingTop: '50px' }}>
+              <p>No data to display on the map.</p>
+              <p>Upload a file and apply filters to see the heatmap.</p>
+          </div>
+      );
+  }
+
+  return (
+    <MapContainer 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'
+      />
+      {heatmapData.map((point, idx) => (
+        <CircleMarker
+          key={idx}
+          center={[point.lat, point.lon]}
+          radius={calculateRadius(point.count)}
+          pathOptions={{ 
+              color: getColor(point.count, maxCount),
+              fillColor: getColor(point.count, maxCount),
+              fillOpacity: 0.7
+          }}
+        >
+          <Tooltip>
+            PLZ: {point.plz} <br />
+            Count: {point.count}
+          </Tooltip>
+        </CircleMarker>
+      ))}
+    </MapContainer>
+  );
+};
+
+export default MapDisplay;