implementing Windy into Angular

filipovski1

I have been trying to implement Windy map into my angular project. I followed their documentation to make a simple project where I can point to a single location on their map, and the pointer should say "Hello world". I was able to do this:

I was trying to make this

Code itself is quite simple. It is consisted of HTML that I took from their webside, and small javascript code that communicates with Windy API. You can try it for yourself:

const options = {
    key: 'MdrN6Cm3LsiP40kv2Y8SUyXyhk4HEer4', 
    lat: 14,
    lon: -29,
    zoom: 4,
};

windyInit(options, windyAPI => {
    // windyAPI is ready, and contain 'map', 'store',
    // 'picker' and other usefull stuff
    const { map } = windyAPI;
    // .map is instance of Leaflet map
    L.popup()
        .setLatLng([50.4, 14.3])
        .setContent('Hello World')
        .openOn(map);
});

As you can see, the HTML requires 3 scritps to work properly. The first one is "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js", which is used to point on the map. The second script is map itself "https://api.windy.com/assets/map-forecast/libBoot.js". And the last one is javascript file used to comunicate with api, and it is called "hello.js". On every online HTML/JS compiler this works, even if you try to make it locally with a text editor and JS file.

However, when I tried to implement this into my Angular project, it dosen't work. I made a new project for the sole purpose of trying to make this thing work. When i enter "ng serve" command to run the project, I only get a white screen. For some reason Angular dosen't read HTML the right way. When the project is running in my local host, the HTML is this:

When it should show the HTML that I showed earlier.

This is my Angular app folder. I didn't touch the other comonents. I just added hello.js, and modified HTML: alt text

I think that the main problem here is that Angular needs more information about the HTML that I send him, but I have no idea where or how to do something like this. I am not well versed into Angular and I am still learning it. Some help with this would be highly appreciated. Thanks in advnace!

LeFunkyFancy

@filipovski1 maybe this can help you a bit

https://community.windy.com/topic/17845/windy-with-angular/2

filipovski1

@lefunkyfancy Hello, I am trying to do this but am getting some errors. How do I get dependencies for LoadConfig, LOAD_CONFIG and WindyScriptLoaderService?