leaflet - How to create the bootstrap containers for loading the dynamic maps from the server side

Question

I am struggling in this scenario I have tried multiple ways but till now i didn't get proper solution.

My requirement is to create the dynamic maps within the bootstrap containers(for no of maps no of containers has to create) and also along with the map in bootstrap container I have to show the data of info(let say x and y)in the cards.

Note: the bootstrap containers will be dynamic with respect to the maps (i.e no of maps is same as no of bootstrap containers and the data of x and y with in the container).

map.component.ts

 for (var i=0;i<this.data.length; i++ ){
                        var v= "map"+i+"";
                        var div=document.createElement("div");
                        div.id = v;
                        console.log(v);
                        document.getElementById('mapper').appendChild(div);
                        map = L.map(v).setView([this.sensors[i].latitude,this.sensors[i].longitude], 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);

}

the data from above code is is coming from the backend. Based on the data length the number of maps has to increase dynamically within the bootstrap container. (No of maps = no of bootstrap containers).

map.component.html

 <div class="row">
      <div class="container">
<div class ="row">

   <div class ="col-sm-6" id="mapper"></div>
</div>
</div>
</div>

question from:https://stackoverflow.com/questions/65651467/how-to-create-the-bootstrap-containers-for-loading-the-dynamic-maps-from-the-ser

Answer 1

Waitting for answers