Correctly Display Leaflet Map on Ionic React

Pinned locations on map of globe.

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 {
} 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 (
      <MapContainer center={[51.505, -0.09]} zoom={13}>
          attribution='&copy; <a href="">OpenStreetMap</a> contributors'
        <Marker position={[51.505, -0.09]}>
            A pretty CSS3 popup. <br /> Easily customizable.


Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.