CODEWITHSUNDEEP
javascriptangularionic-frameworkleafletionic5
KTSB
KTSB

Reputation: 111

Ionic 5 Leaflet - Map container not found

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?

Upvotes: 0

Views: 262

Answers (1)

Fearcoder
Fearcoder

Reputation: 788

can you try this:

leafletMap() {
setTimeout( () => {
      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);
    }, 2000);    
}

I had the same problem with here maps. This was working for me

Upvotes: 1

Related Questions