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?

JaniceBaer

A diplomatic method and channel is ensured for the cited terms for the individuals. The skills of the (aussiessay.com) are ensured for the invitation. The held report is fit for the optional ambit for the vital paths for the team.