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

    Windy with Angular

    Developers
    3
    14
    2.8k
    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.
    • L
      LTaggart
      last edited by

      Is there any guide for making this work in angular?
      I've tried a few things to get "hello world" up and running but so far cant make anything happen!

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

        @ltaggart

        Hey, as long as you are loading the scripts this should be like a basic setup to get it working.

        (i can't write the div in one line since it will disappear than lol)

        HTML

        <
        div #windyMap id="windy">
        

        TS

        declare function windyInit(options, callback);
        
        @Component({
          selector: 'windy',
          templateUrl: './windy.component.html',
          styleUrls: ['./windy.component.scss'],
          encapsulation: ViewEncapsulation.None,
          changeDetection: ChangeDetectionStrategy.OnPush
        })
        export class WindyComponent implements OnInit, AfterViewInit, OnDestroy {
           @ViewChild('windyMap', {static: true}) windyMapElementRef: ElementRef;
         
          private _config: LoadConfig;
          private windyMap: any;
        
          constructor(@Inject(LOAD_CONFIG) private config: LoadConfig,             
                      private _cdr: ChangeDetectorRef,
                      private _windyScriptLoaderService: WindyScriptLoaderService) {
            this._config = config || {};
          }
        
          ngOnInit(): void {
            if (!this._config.apiKeyWindy) {
              throwError('Windy api key is missing!');
            }
          }
        
          ngAfterViewInit(): void {
            this._windyScriptLoaderService.load().then((test) => {
              const options = {
                // Required: API key
                key: 'APIKEY', // REPLACE WITH YOUR KEY !!!
        
                // Put additional console output
                verbose: false,
        
                // Optional: Initial state of the map
                lat: 35,
                lon: -30,
                zoom: 3
              };
        
              if (!window['copy_of_W']) {
                window['copy_of_W'] = Object.assign({}, window['W']);
              }
              if (window['W'].windyBoot) {
                window['W'] = Object.assign({}, window['copy_of_W']);
              }
        
              windyInit(options, windyAPI => {
                this.windyMap = windyAPI;
                this.windyMap.map.options.minZoom = 0;
                this.windyMap.map.options.maxZoom = 18;
              });
            });
          }
        
          ngOnDestroy() {
            this._windyScriptLoaderService.removeScripts();
          }
        }   
        
        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?

          bc6539d3-19b1-47f2-835c-529a88933efb-image.png

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

            @filipovski1 this shouldn't be actually in the example and you don't need it in the end except you want some generic configs and dynamic loading.
            So remove the config and be sure to put the windy js links into your index.html

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

              @lefunkyfancy Hi, me again. I tried cutting out everything that has to do with LoadConfig and WindyScriptLoaderService, but still no good. How come Angular can't just read java scripts from HTML? Were you able to do it in your Angular project?

              import { DatePipe } from '@angular/common';
              import { HttpClient } from '@angular/common/http';
              import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
              import { FormBuilder } from '@angular/forms';
              import { MatDialog, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
              import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
              import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
              import { Table } from 'primeng/table';
              import { combineLatest, Observable, Subscription } from 'rxjs';
              import { filter } from 'rxjs/operators';
              import { environment } from 'src/environments/environment';
              import { isAppIdentity } from '../../oc-core/app-defs/app-identity';
              import { appLocationEndpointMap } from '../../oc-core/app-defs/app-location-endpoint-map';
              import { CrudGenericService } from '../../oc-core/services/crud-generic.service';
              import { BunkerFormComponent } from '../bunker-form/bunker-form.component';
              import { VoyageCallsModel } from '../models/voyage-calls.model';
              import { VoyageOverviewModel } from '../models/voyage-overview.model';
              import { ScriptLoaderModule } from 'ngx-script-loader'
              import { WindyScriptLoaderService } from 'windy'
              
              declare function windyInit(options, callback);
              @Component({
                selector: 'app-pool-overview',
                templateUrl: './pool-overview.component.html',
                styleUrls: ['./pool-overview.component.css'],
                
              })
              
              
              export class PoolOverviewComponent implements OnInit {
              
                private subscription: Subscription = new Subscription();
                
                @ViewChild(Table, {static: true}) dataTableComponent: Table;
              
                navStart: Observable;
              
                private windyMap: any;
              
              
                constructor(private route: ActivatedRoute, private router: Router, private crudService: CrudGenericService, private httpClient: HttpClient, 
                  private fb: FormBuilder, private modalService: NgbModal, public dialog: MatDialog, public datepipe: DatePipe) { 
                  this.navStart = router.events.pipe(
                    filter(evt => evt instanceof NavigationStart)
                  ) as Observable;
                }
              
                ngOnInit(){
              
                }
              
                ngAfterViewInit(): void {
                 
                    const options = {
                      // Required: API key
                      key: 'MdrN6Cm3LsiP40kv2Y8SUyXyhk4HEer4', // REPLACE WITH YOUR KEY !!!
              
                      // Put additional console output
                      verbose: false,
              
                      // Optional: Initial state of the map
                      lat: 35,
                      lon: -30,
                      zoom: 3
                    };
              
                    if (!window['copy_of_W']) {
                      window['copy_of_W'] = Object.assign({}, window['W']);
                    }
                    if (window['W'].windyBoot) {
                      window['W'] = Object.assign({}, window['copy_of_W']);
                    }
              
                    windyInit(options, windyAPI => {
                      this.windyMap = windyAPI;
                      this.windyMap.map.options.minZoom = 0;
                      this.windyMap.map.options.maxZoom = 18;
                    });
              
                }
              
              
              }
              
              
              
              L 1 Reply Last reply Reply Quote 0
              • L
                LeFunkyFancy @filipovski1
                last edited by

                @filipovski1 btw you should not post your api-key in public forums

                where do you load the scripts?
                yes i'm perfectly fine with using windy in angular

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

                  @lefunkyfancy Apologies, I did not pay attention when I was replying. Do I have to call the scripts through typescript? I thought it was enough to reference them in HTML. I am sorry for being a nuisance, but I am new to this. :(

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

                    @filipovski1 in the end you are calling the windyInit function from the loaded windy scripts
                    do you get any errors you could provide?
                    you also could set the method on timeout and retry it on failure (maybe the scripts are not yet loaded)

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

                      @filipovski1 i just saw that you are not implementing AfterViewInit in your example

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

                        @lefunkyfancy I actually don't get any errors when executing that code. It is just a blank screen. AfterViewInit ? May I ask what is that?

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

                          @lefunkyfancy oh sry, i do get some errors

                          dd793fba-231d-4555-8f5b-462ee16d71b2-image.png

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

                            @filipovski1 you need to implement this in order to get the ngAfterViewInit function to be called
                            if that is not called, sure your map will not be loaded
                            https://angular.io/guide/lifecycle-hooks

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

                              @lefunkyfancy I implemented AfterViewInit, but something is still missing. There is also an error that is connected to windyboot.

                              5b9fc91d-74da-4151-90ac-4ab830138477-image.png

                              If it's not too much of a trouble, can you send me the code example with all the dependencies? I can't get the one provided to work since I lack the knowledge to do so. I also had to remove the LOAD_CONFIG objects, like you said. Also, thanks for all the help. This is the only time I got some insight on how to make this thing work

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

                                @filipovski1 you may have to debug whats going on there but you could also remove the windyBoot part but than you might get some other errors when "reloading" windy

                                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