Ionic 5 Leaflet - Map container not found

Ionic Framework
1

I’m trying to integrate a leaflet map into my application.
I’ve written the following code in my .ts file:

ionViewDidEnter() {
this.leafletMap();
}

leafletMap() {
this.map = Leaflet.map('map').setView([49.992863, 8.247253], 5);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© XY',
}).addTo(this.map);
}

In the template file I’ve added the div container:

<div id="map" style="width: 100%; height: 200px">

When I’m running it, everything works fine. But now I would like to add some markers with data, which is loaded from an api. Therefore, I have to modify the code so, that the map (and the markers) are added after the data has loaded. So, my new code is the following:

ionViewDidEnter() {
this.dataService.getLocation(this.locationID).then(data => {
    this.location = data;
    this.leafletMap();
});
}

So now I’m receiving the location data, but I’m also getting an error message: Error: Uncaught (in promise): Error: Map container not found.

I’ve tried different things from other questions here, but nothing works. Do you have an idea, how I can solve this problem?

2

Try using the ngAfterViewInit hook which will fire when the DOM elments are ready.

3

When I’m trying it that way:

  ngAfterViewInit()
  {
    this.dataService.getLocation(this.locationID).then(data => 
      {
        this.location = data;
        this.leafletMap(); 
    });
  }

I’m getting the same error. Do you have another idea?
Thanks!