Windy with Angular

LTaggart

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!

LeFunkyFancy

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

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?

LeFunkyFancy

@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

filipovski1

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

  }


}

LeFunkyFancy

@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

filipovski1

@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. :(

LeFunkyFancy

@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)

LeFunkyFancy

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

filipovski1

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

filipovski1

@lefunkyfancy oh sry, i do get some errors

LeFunkyFancy

@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

filipovski1

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

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

LeFunkyFancy

@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