Leaflet plugin integration

[Brictarus]

Hi, I was wondering how to integrate any leaflet JS plugin into an Angular project using YagaJS ?
Most of them usually :

• define new items in the existing namespace L
• add new option parameters in the constructor of the map
• add new set of functions on existing types
• ...

Have you tried adding such plugins into projects using YagaJS ? if you succeeded, it could be a good idea to either give an example here, or add a few lines of documentation somewhere in the repository.

Thank you.

[atd-schubert]

Hi Brictarus,

yes, we already try to add leaflet plugins to YAGA's leaflet-ng2. It works the typical JavaScript way, but (of course) not within angular's template!

Image you have an app component that uses the map-component of leaflet-ng2, like this:

@Component({
    selector: 'app',
    template: `<yaga-map><!-- ... --></yaga-map>`
})
export class AppComponent {
    
}

Then you can get the map with the ViewChild decorator of Angular2 and add plugins with the normal JavaScript way, like this:

@Component({
    selector: 'app',
    template: `<yaga-map><!-- ... --></yaga-map>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild(MapComponent) private mapComponent: MapComponent;
    public ngAfterViewInit(): void {
        const myFancyLeafletPlugin = (L as any).myFancyLeafletPlugin({ /* ... */ });
        this.mapComponent.addSomething(myFancyLeafletPlugin);
    }
}

This is an approach for plugins where you don't have a type-definition for TypeScript. Leaflet plugins usually use the L. namespace, that is correct, but it causes a lot of trouble in TypeScript, because every plugin redefines the L. namespace and TypeScript does not like it!

You can prevent this problem by explicitly use the any type for the L namespace, but you loose the ability to have type-checking with TypeScript! If you don't want to loose the pros of type-checking you should write an TypeScript interface for your plugin.

In addition, the map component does not have a addSomething method, of course. This is just a hint, because I don't know if you want to add a control, layer or something else.

If your plugin rewrites existing Leaflet functions, or use any non-public API of Leaflet, I can't guarantee that the plugin will work on YAGA's leaflet-ng2. Otherwise I think it should work...

We have another issue #245 that is quite connected to this one. I will give a hint on this issue there and if you don't have any further question, you can close this one.

[atd-schubert]

By the way, I was quite happy about the new Leaflet version 1.1.0, because it is not allowed anymore to add plugins on the L namespace, but I just read the release nodes of 1.2.0 and sadly they turn back, but just for compatibility reasons. So it is still not allowed, but still possible:

"Traditionally, Leaflet plugins has altered and added to Leaflet’s namespace (the L global), something which is no longer allowed after Leaflet was rebuilt on ES6 modules (an imported module is read-only). To preserve backwards compatibility, we have made a workaround to make the Leaflet namespace and its contents mutable again."

[Brictarus]

Thank you Arne for these answers ! My point is more a question than an issue in YagaJS, as you can see.
We'll give a try with the approach you've provided.

Nice work on the project btw !