Windy Community
    • Unread
    • Categories
    • Groups
    • Go to windy.com
    • Register
    • Login

    implementing Windy into Angular

    Windy API v4
    3
    4
    1.5k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      filipovski1
      last edited by

      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);
      });
      

      9097ba26-905c-4803-88f7-a0577c8e7c61-image.png

      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:

      d3c272eb-b9f6-4499-846d-3179a48fa302-image.png

      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!

      L 1 Reply Last reply Reply Quote 0
      • L
        LeFunkyFancy @filipovski1
        last edited by

        @filipovski1 maybe this can help you a bit

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

        F 1 Reply Last reply Reply Quote 0
        • F
          filipovski1 @LeFunkyFancy
          last edited by

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

          89dfc06c-1438-413e-958e-fcb829882b4e-image.png

          1 Reply Last reply Reply Quote 0
          • J
            JaniceBaer
            last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post
            Windyty, S.E. - all rights reserved. Powered by excellent NodeBB
            NodeBB & contributors, OSM & contributors, HERE maps
            Terms of Use     Privacy Policy