feat: Add responsive map rendering with window resize handling
- Implemented dynamic map key update on window width change - Added window resize event listener to track viewport width - Ensures map re-renders correctly on different screen sizes
This commit is contained in:
parent
3f4e077f7c
commit
d0dc2ded1b
@ -31,8 +31,22 @@ export const MapComponent: FC<{
|
|||||||
}
|
}
|
||||||
}, [selectedLocation]);
|
}, [selectedLocation]);
|
||||||
|
|
||||||
|
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||||
|
useEffect(() => {
|
||||||
|
const handleResize = () => {
|
||||||
|
setWindowWidth(window.innerWidth);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Map
|
<Map
|
||||||
|
key={windowWidth}
|
||||||
state={{
|
state={{
|
||||||
center: mapCenter,
|
center: mapCenter,
|
||||||
zoom:
|
zoom:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user