How to create the multiple leaflet maps on the page in angular

Question

I have created the leaflet open street map given below.

.component.ts

 map = L.map('map').setView([12.876, 80.599], 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 have Placed the map in html page as given below

.component.html

<div class ="row">
<div class="col-xs-12 col-sm-8 col-lg-7">
    <div id="map"></div>
  </div>
</div>

And mentioned the height in css as

.component.css

#map{
  height: 650px;
  border: 1px solid gray;
   position: relative;
  border: none;
}

Now I want to create the two maps in the page, I have tried but not able to create the maps because I have used the id of name map.

So how to change the id value(map) to class than I will use that class to create the more maps within the page

May be this will help:https://stackoverflow.com/questions/25293579/multiple-leaflet-maps-on-same-page-with-same-options — Chellappan வ, Dec 31 '20 at 12:20
No, they have created the two id values but I want to create the more than two maps dynamically — Haritha, Dec 31 '20 at 12:30

score 1 · Answer 1 · answered Jan 01 '21 at 03:21

1

I would probably use the same L.map instance, and make the necessary change on it. Another way can be to create another DOM with a different ID and use [hide] to show the first or the second map.

answered Jan 01 '21 at 03:21

zahma

412
4
14

How to create the multiple leaflet maps on the page in angular

1 Answers1