Options goes transparents after Init

sameh khemira

Hello,
I am using windy api in my angular web app ,I have followed tha basic hello world example and I have used the package "ngx-script-loader to load the libBoot.js script.
Every thing is working but the zoom and the others options on the left side of the map are not visible as well as the logo of windy on the top?

However I noticed that when the map is charging and it has the grey color on the backgroud, I can see them but once the map colors changed, they are not visible anymore.

Suty

@sameh-khemira Hi there, can you share the code of implementation, so I can forward it to colleagues?

sameh khemira

@Suty Hello I
Here is the function where I load the libBoot using the script loader package

  initializeWindyMap(windyApiKey: string, lat: number, lon: number, zoom: number): Observable {
    const options = {
      key: windyApiKey, verbose: true, lat, lon, zoom,
    };
    return this.windyScriptLoaderService.loadScript('https://api.windy.com/assets/map-forecast/libBoot.js').pipe(switchMap(() => {
      return new Observable(observer => {
        windyInit(options, windyAPI => {
          this.map = windyAPI.map;
          observer.next();
          observer.complete();
        });
      });
    }));
  }

I do use this function in my angular compenent like this :

this.mapService
        .initializeWindyMap(
          this.windyApiKey,
          selectedRegion.center.lat,
          selectedRegion.center.lon,
          selectedRegion.zoom,
        )
        .subscribe(() => {
        // treatment to process
        });

The map is displayed and initialized correctly each time. However, the map options are always not visible.
Thank you

Suty

@sameh-khemira Hi, you said that they are not visible. Did you check if they are not only visible, or they aren't there at all?

It is possible that there is a certain collision with some of your elements and they are only hidden somewhere behind.

sameh khemira

@Suty the options are only visible at the beginning when the map is loading, as shown in this capture. I can see them when the background is grey. However, once the map finishes loading, the options become invisible

I dont think there is other elements causing this issue in my html code .

Suty

@sameh-khemira Okay and can you check that in the devtools?

sameh khemira

@Suty
Yes I checked and I tried to only let the map in all the html component like this
< div id="windy" style="width: 95%; height: 85%; ">
And it is always the same problem

Suty

@sameh-khemira And z-index is not a problem, did you check that?