0

My requirement is to show the multiple leaflet maps(based on the backend data) on the page.

map.component.ts

for (var i = 0; i < this.mapleaf.length; i++) {
    map[i] = L.map(this.mapleaf[i]).setView([12.9249, 80.1000], 12); 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map[i]);
}

map.component.html

<div class="col-xs-12 col-sm-8 col-lg-8" >
  <span *ngFor="let leaflet of mapleaf">      
    <div id ="{{mapleaf}}"></div>
  </span>   
</div>

I have placed the map id as But while executing showing the error as map container not found.

I am new to this leaflet map Can anyone help me regarding this.

Haritha
  • 77
  • 2
  • 10

1 Answers1

0

I would strongly recommend to reproduce the error by sharing your code with https://stackblitz.com/ cause maybe there is more than one problem.

However, what seems problematic at first sight is this:

<span *ngFor="let leaflet of mapleaf">      
    <div id ="{{mapleaf}}"></div>
</span>

You loop through array but each time, you are binding the whole array, not each item of it. Therefore, map container does not match the one you point in your .ts file.

Change it to the following:

<span *ngFor="let leaflet of mapleaf">      
    <div id ="{{leaflet}}"></div>
</span>
treecon
  • 2,415
  • 2
  • 14
  • 28
  • I have tried what you suggested but again showing the same error can you please help me for another way to work – Haritha Jan 06 '21 at 16:57
  • please post complete code or even better, share a stackblitz with us to reproduce the error. – treecon Jan 06 '21 at 17:31
  • It is working with the server so it cannot reproduce the errors while running in stackblitz, My question is creating dynamically multiple leaflet maps based on the backend data – Haritha Jan 07 '21 at 08:59
  • 1
    1) Then, I suppose that when each map is initialized, its leaflet container (which is created with *ngFor) does not already exist in DOM. 2) Try to immitate the dynamic creation of maps into stackblitz with the use of setTimeout / setInterval. It would really help us. – treecon Jan 07 '21 at 11:33