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 {bounds: storedBounds} = useMapStore();
9 const debouncedBounds = useDebounce(storedBounds, 750);
10 const bounds = useMemo(
11 () => debouncedBounds.map(bound => bound),
12 [debouncedBounds]
13 );
14
15 useEffect(() => {
16 if (bounds.length >= 1) {
17 map.fitBounds(bounds, {padding: [30, 30]});
18 }
19 }, [bounds]);
20
21 return null;
22};
23
24export default Bounds;