Ionic 6 and Leaflet 1.7.1

Ionic Framework Ionic Angular
1

Hello!

I created an app to test Leaflet.

When I create a map inside a page and call this page, the map appears… but if I call the same page as modal, the map isn’t showing.

I tried invalidateSize() and set z-index of the map to 99999 (i saw modal is below this value). But the map still not showing.

There is no error message and I wait for all components load before call map creation function.

My code:

TS file:

import * as Leaflet from 'leaflet';
...

ngAfterViewInit() {

      this.map = new Leaflet.Map("map").setView([-25.429397, -49.271165], 10);
      Leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution: 'Map Test'
          }).addTo(this.map);

  }

Calling page as modal (no error, but map doesn’t show):

const modal = await this.modalController.create({
              component: MapTestPage,
              cssClass: 'my-custom-class'
            });
            return await modal.present();

HTML for MapTestPage:

<div class="map" id="map" ></div>

CSS for MapTestPage:

.map {

   z-index:99999;
   height:45%;
   width: 100%;

}

index.html (import css and javascript for leaflet inside head)

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

to install leaflet run:

npm install leaflet --save
npm install @types/leaflet

Ionic Version:

$ ionic --version
6.12.3

packages.json

"leaflet": "^1.7.1",
2

Hi,
I’ve some problem showing the Leaflet map.
It is only partially visible, however something can be seen.
I used this tutorial to add the mapp to the app: https://edupala.com/how-to-add-leaflet-map-in-ionic
It imports css in a different way than you did.

cld

3

Basically use some time out or directly trigger resize event as needed.