@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 I actually don't get any errors when executing that code. It is just a blank screen. AfterViewInit ? May I ask what is that?
@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 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 Hello, I am trying to do this but am getting some errors. How do I get dependencies for LoadConfig, LOAD_CONFIG and WindyScriptLoaderService?
@lefunkyfancy Hello, I am trying to do this but am getting some errors. How do I get dependencies for LoadConfig, LOAD_CONFIG and WindyScriptLoaderService?
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:
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: 
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!