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

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>