![Pinned locations on map of globe.](/sites/default/files/styles/large/public/2023-03/andrew-stutesman-l68Z6eF2peA-unsplash.jpg?itok=PGE0X7Tg)
This issue persists on Ionic 6 and React Leftlet 4. To solve it, call the resize event when the page has finished rendering and animating.
import { IonPage, useIonViewDidEnter, ... } from '@ionic/react'; const BuildingPermits: React.FC = () => { /** * Trigger a 'resize' event when Page has finished rendering and animating, so leaflet map can read a consistent height value. */ useIonViewDidEnter(() => { window.dispatchEvent(new Event('resize')); }); return ( <IonPage> <MapContainer center={[51.505, -0.09]} zoom={13}> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={[51.505, -0.09]}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer> </IonPage> ); }
Add new comment