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;

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

@@ -7,6 +7,7 @@ import 'leaflet.heat';
 import type { HeatmapPoint, MapMode } from '../App';
 import MarkerClusterGroup from 'react-leaflet-cluster';
 import Legend from './Legend';
+import MapBoundsManager from './MapBoundsManager';
 
 interface MapDisplayProps {
   heatmapData: HeatmapPoint[];
@@ -84,6 +85,7 @@ const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier,
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
       />
+      <MapBoundsManager data={heatmapData} />
       {viewMode === 'points' ? renderPoints() : renderHeatmap()}
       {viewMode === 'points' && <Legend getColor={getColor} maxCount={maxCount} />}
     </MapContainer>