Листовка customcontrol - угловой 2+

Question

При необходимости интегрировать пользовательский элемент управления формы в мой компонент Angular2+:

export class HeatMapComponent {
...
  onMapReady(map: L.Map) {
    let div = L.DomUtil.create('div', 'info');
    let info = new L.Control();
    info.onAdd = () => {
      return div;
    };
    info.addTo(map);
  }
} 

И файл.hmtl вот так:

    <div class="map container-fluid"
     leaflet [leafletOptions]="options"
     [leafletLayersControl]="layersControl"
     (leafletMapReady)="onMapReady($event)">
</div>

.css:

...

    .info {
      padding: 2rem 1rem;
      margin-left: 70rem;
      margin-right: 15rem;
      font: 1rem/1.5rem Arial, Helvetica, sans-serif;
      background: white;
      background: rgba(255,255,255,0.8);
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
      border-radius: 5px;
    }

В буклете документ написан на.JS так:

var info = L.control();info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
}; 
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state');
};

info.addTo(map);

Кто-то знает, почему я не могу интегрировать метод addTo в моем onMapReady, я не получаю никаких ошибок, но ничего не отображается на моей карте.

Answer 1

Я решил эту проблему, решение:

onMapReady(map: leaflet.Map) { 
let div = leaflet.DomUtil.create('div', 'infoControl'); 
let info = new leaflet.Control(); info.onAdd = () => { 
return div; 
   }; 
console.log(div); 
info.addTo(map); 
}