While using leaflet, I noticed that when I click on the map in Chrome browser, the map appears larger. I'm not sure why this is happening.
Below is my code:
import "./styles.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
const App = () => {
return (
<>
<div className="App overflow-hidden">
<nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
... (omitted for brevity) ...
</nav>
<div
className="flex-wrap sm:flex-nowrap
items-start container flex justify-between items-center mx-auto px-2 sm:px-4 py-2.5"
>
... (omitted for brevity) ...
</div>
<div style={{ height: "60vh" }}>
<MapContainer
className="m-10"
center={[51.505, -0.09]}
zoom={13}
scrollWheelZoom={true}
>
... (omitted for brevity) ...
</MapContainer>
</div>
</div>
</>
);
};
export default App;
I initially thought it was an issue with the "overflow" property, so I commented out that line but the problem persisted.
You can access the full project here:
If you have any insights or suggestions to fix this issue, please let me know. Thank you!