How to use it with Angular 6?

  • 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?

  • This might help

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

  • 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 }}

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

  • 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.

Windyty, S.E. - all rights reserved. Powered by excellent NodeBB
NodeBB & contributors, OSM & contributors, HERE maps
Terms and Conditions     Privacy Policy