Реализация поискового ввода с листовкой в ​​угловых 6 рамках

Question

Итак, мне дали задание использовать буклет внутри углового приложения, но я столкнулся с проблемой, которую не знаю, как решить.То, что я хочу сделать, это сделать поисковый ввод, который будет накладываться на верхнюю часть карты и при использовании будет искать через геокод / ​​geoJSON и возвращать определенный маркер на основе выбора выпадающего списка.Я смог сделать это на обычной карте листовки, используя только javascript.Я не могу воссоздать его в угловых.У меня есть следующий код ниже.

export class AppComponent {

 
  constructor (private http: HttpClient) { }

   // Define our base layers so we can reference them multiple times
   streetMaps = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    detectRetina: true,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });
  wMaps = tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
    detectRetina: true,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });

  map: L.Map;
  json;
  options = {
      layers: [
          L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
              maxZoom: 18, attribution: '...'
          })
      ],
      
      zoom: 7,
      center: L.latLng(47.482019, -1),
      icon: icon({
        iconSize: [ 25, 41 ],
        iconAnchor: [ 13, 41 ],
        iconUrl: 'leaflet/marker-icon.png',
        shadowUrl: 'leaflet/marker-shadow.png'
      }),

      position:'topleft',
      placeholder:'Search...',
      initialize: function (options){
      //constructor
      L.Util.setOptions(this, options);
    },
    onAdd: function (map) {
            // happenes after added to map
            var container = L.DomUtil.create('div','search-container');
            this.form = L.DomUtil.create('form', 'form', container);
            var group = L.DomUtil.create('div','form-group', this.form);
            this.input = L.DomUtil.create('input', 'form-control input-sm', group);
            this.input.type = 'text';
            this.input.placeholder = this.options.placeholder;
            this.results = L.DomUtil.create('div','list-group', group);
            L.DomEvent.addListener(this.input,'keyup',_.debounce(this.keyup,300), this);
            L.DomEvent.addListener(this.form,'submit', this.submit, this);
            L.DomEvent.disableClickPropagation(container);
            return container;
          },
          onRemove: function (map){
            // when removed
            L.DomEvent.removeListener(this.input, 'keyup', this.keyup,this);
            L.DomEvent.removeListener(this.form,'submit', this.submit, this);
            
          },
          keyup: function (e) {
            if(e.keycode === 38 || e.keycode === 40){
              // do nothing
            } else {
              this.results.innerHTML = '';
              if(this.input.value.length > 2) {
                var value = this.input.value;
                var results = _.take(_.filter(this.options.data, function(x) {
                  return x.feature.properties.bureauid.toUpperCase().indexOf(value.toUpperCase()) > - 1;
                }).sort(sortBurearuIds), 10 );
                _.map(results, function(x){
                  var a = L.DomUtil.create('a', 'list-group-item');
                  a.innerText = '';
                  a.setAttribute('data-result-name', x.feature.properties.bureauid);
                  a.innerHTML = x.feature.properties.bureauid;
                  this.results.appendChild(a);
                  L.DomEvent.addListener(a, 'click', this.itemSelected, this);
                  return a;
                }, this);
              }
            }
          },
          itemSelected: function(e) {
            L.DomEvent.preventDefault(e);
            var elem = e.target;
            var value = elem.innerHTML;
            this.input.value = elem.getAttribute('data-result-name');
            var feature = _.find(this.options.data, function(x) {
              return x.feature.properties.bureauid === this.input.value;
            }, this);
            if (feature) {
              this._map.panTo(feature._latlng);
            }
            },
            submit: function(e) {
              L.DomEvent.preventDefault(e);
              
            },

  };
  



  
  layersControl = {
    baseLayers: {
      'Street Maps': this.streetMaps,
      'Wikimedia Maps': this.wMaps
    },
    overlays: {
      // 'Mt. Rainier Summit': this.summit,
      // 'Mt. Rainier Paradise Start': this.paradise,
      // 'Mt. Rainier Climb Route': this.route
    }
  };
    onMapReady(map: L.Map) {
      this.http.get('./assets/jsonData/sampleData.json').subscribe((json: any) => {
          console.log(json);
          this.json = json;
          L.geoJSON(this.json).addTo(map);
      });

   
 
};

};