I am trying to lazy load js drawing library Leaflet-Geoman
I am using webpack and the following code to load
private async loadGeoman () {
await import(/* webpackChunkName: "leaflet-geoman" */ '@geoman-io/leaflet-geoman-free')
}
And then using it in the following function
public async enableDrawing (type: TaggedType, item: any) {
await this.loadGeoman()
this._map.pm.enableDraw(type, {
...
})
....
I keep getting the following error
TypeError: Cannot read properties of undefined (reading 'enableDraw')
at DrawingService.enableDrawing (drawing.service.ts?af11:192)
at eval (drawing.service.ts?af11:75)
It seems like the library isn't hooking up on leaflet map. Leaflet map is created before the library is loaded and i am assuming that's the problem, but i don't know how to go around it
Geoman is adding it self to the map while initializing the map. This means if L.Map is called before Geoman-Script is added to your site, Geoman will not be added to the map.
Then you need to call L.PM.reInitLayer(map).
public async enableDrawing (type: TaggedType, item: any) {
await this.loadGeoman();
L.PM.reInitLayer(this._map);
this._map.pm.enableDraw(type, {
...
})