angularleafletgeocodingesringx-leaflet

ERROR TypeError: Cannot read property 'topleft' of undefined on ngx-leaflet and esri-leaflet-geocoder

I'm using @asymmetrik/ngx-leaflet and @asymmetrik/ngx-leaflet-draw for leaflet map in my Angular 9 project. I tried a add search option in the map by 'esri-leaflet-geocoder'. without @asymmetrik/ngx-leaflet and @asymmetrik/ngx-leaflet-draw using I am successfully place the search option in the map with no error. that works totally fine. here is my working code:

/*npm install esri-leaflet esri-leaflet-geocoder*/
import * as L from 'leaflet';
import * as esriGeo from 'esri-leaflet-geocoder';

export class MapComponent implements OnInit {
  public searchControl = new esriGeo.Geosearch();
  
  ngOnInit() {
    this.initMap();        // not all codes are here;
    this.tiles.addTo(L.map);   // not all codes are here;
    
    this.searchControl.addTo(L.map);
  }
}

Output Images: Working Output 1 Working Output 2

But when I try to implement this same code where @asymmetrik/ngx-leaflet and @asymmetrik/ngx-leaflet-draw were done previously, it says some error: ERROR TypeError: Cannot read property 'topleft' of undefined . Error Output image: enter image description here

Solution

  • I just solved the problem. Though I am using ngx-leaflet so here L.Map is not the current instance of the map. The ngx-leaflet initialize the map from the LeafletDirective. so the working code is:

    /*npm install esri-leaflet esri-leaflet-geocoder*/
import * as L from 'leaflet';
import * as esriGeo from 'esri-leaflet-geocoder';
import { LeafletDirective } from '@asymmetrik/ngx-leaflet'; //new import

export class MapComponent implements OnInit {
  public searchControl = new esriGeo.Geosearch();
  
  ngOnInit() {
    const map = this.leafletDirective.getMap(); // initialize map
    
    this.searchControl.addTo(map);
  }
}