Как динамически генерировать маркеры в листовке

Question

Поэтому я пытаюсь использовать буклет с angular, я извлекаю данные из API, который отображает информацию о каждой стране в мире, и используя foreach l oop Мне удалось получить название страны. и широта и долгота страны. Мне нужны эти данные, потому что я хочу генерировать пользовательские маркеры, основанные на широте и долготе страны, но я застрял и не знаю, как go включить.

export class MapComponent implements AfterViewInit{

  private map:any;


   tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});


  private initMap(): void {
    this.map = L.map('map', {
      center: [ 42.245, 15.271],
      zoom:3
    });
  }

  private getLangLng(): void {
    fetch("https://restcountries.eu/rest/v2/all")
  .then(response => response.json())
  .then(data => {
    data.forEach(({ name,latlng }) =>
      console.log("name: "+name+" cord:"+latlng)

    );
  });
  }
  ngAfterViewInit(): void {
    this.initMap();
    this.tiles.addTo(this.map);


  }