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

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?

OS: OS X, Windows
Browser: All

If you try to resize the map, while windytv div is hidden you will get an error:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

This line is the reason of the error:

var ha = p[B].getImageData(0, 0, N, M)

The Problem:

N = width is 0

The solution :

Replace the line N = J.width with N = J.width || 1

If N is equal 0 than use 1 as width, it will stop throwing the error.