feat([2fd88f42]): add auto zoom-to-fit and dynamic legend

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

@@ -0,0 +1,26 @@
+// src/components/MapBoundsManager.tsx
+import React, { useEffect } from 'react';
+import { useMap } from 'react-leaflet';
+import L from 'leaflet';
+import { HeatmapPoint } from '../App';
+
+interface MapBoundsManagerProps {
+  data: HeatmapPoint[];
+}
+
+const MapBoundsManager: React.FC<MapBoundsManagerProps> = ({ data }) => {
+  const map = useMap();
+
+  useEffect(() => {
+    if (data && data.length > 0) {
+      const bounds = L.latLngBounds(data.map(p => [p.lat, p.lon]));
+      if (bounds.isValid()) {
+        map.fitBounds(bounds, { padding: [50, 50] });
+      }
+    }
+  }, [data, map]);
+
+  return null; // This component does not render anything
+};
+
+export default MapBoundsManager;