How to use it with Angular 6?

[Thiago Novaes]

I have used windy v2 api in the past but every time I had the page with windy map loading for a second time, it was giving me a DI error, saying that it already exists.

So the only workaround I found in the past was to use js to remove the script tag that loads windy, and then add it again.

Is there any way I can load the script once on my Angular app, and then any call to WindyInit() won't try to load it again?

[abilek]

This might help https://community.windy.com/topic/6503/redrawing-or-reinitialising-windyapi-in-a-single-page-app

They don't seem to have a method to reinitialise but the hack listed there should work.

[Thiago Novaes]

Yes I saw this hack before, but it seems that it will keep loading the lib over and over, every time user loads the component. So I guess the best solution is to stick with adding and removing the script. To avoid the app to consume all the browser resources.

Hopefully we will have a better official solution implemented by @ivo, in a near future.

It would be great if we could have something like:

import { Windy } from 'windy';

const map = this.windy.create('#windy', {
    lat: {{ LAT }},
    lng: {{ LNG }},
    zoom: {{ ZOOM }}
    ...ANY_LEAFLET_PROPERTY_AVAILABLE
});

and having Windy extending leaflet, so the map returned by the create() would allow us to have access to any leaflet properties/methods

[dighub]

If you use an href rather than router link it will force the page to reload. I'm working on a better solution but so far this is the simplest solution I have come up with.