frontend/containers/Map/Bounds.tsx (view raw)
1import {useEffect, useMemo} from 'react';
2import {useMap} from 'react-leaflet';
3import useDebounce from '../../hooks/useDebounce';
4import useMapStore from '../../stores/useMapStore';
5
6const Bounds = () => {
7 const map = useMap();
8 const {markers} = useMapStore();
9 const debouncedMarkers = useDebounce(markers, 750);
10 const bounds = useMemo(
11 () => debouncedMarkers.map(marker => marker.center),
12 [debouncedMarkers]
13 );
14
15 useEffect(() => {
16 map.fitBounds(bounds, {padding: [30, 30]});
17 }, [bounds]);
18
19 return null;
20};
21
22export default Bounds;