Можно ли использовать карту листов ngx и рендеринг геомаркеров?

Question

Я работал над функцией карты, где мы можем легко взаимодействовать с маркерами. Я обнаружил, что проще обрабатывать геомаркеры с помощью библиотеки листовок.

У меня проблемы с рендерингом карты, так как карта не отображается должным образом. Есть ли способ исправить это? или я должен рассмотреть возможность использования изображения stati c с геомаркерами? Возможно ли это?

мой код выглядит следующим образом

HTML:

    <div style="height: 500px;"
         leaflet
         [leafletOptions]="options"
         [leafletLayersControl]="layersControl"
    >
    </div>

TS:

options = {
    layers: [
      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 10,
    center: latLng(6.9318756, 79.8584885)
  };

  layersControl = {
    baseLayers: {
      'Open Street Map': tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
    },
    overlays: {
      'Big Square': polygon([[ 6.929821, 79.860685 ], [ 6.930680, 79.861843], [ 6.930052, 79.862422], [ 6.929113, 79.861430]])
    }

что я в основном хотел, было для конкретной области c, которая будет отображаться на карте, а не большая область.

мой предыдущий код изображения был следующим:

   <div id="img-container" style="width: 1540px; height: 836px;">
      <img
        style="position: relative;"
        id="mapImage"
        (click)="addCoordinate($event)"
        src="../assets/map-blacknwhite.png"
        class="avatar"
      />