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]);
|
||||
|
||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setWindowWidth(window.innerWidth);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Map
|
||||
key={windowWidth}
|
||||
state={{
|
||||
center: mapCenter,
|
||||
zoom:
|
||||
|
Loading…
x
Reference in New Issue
Block a user