Zoom-in and zoom-out move in wrong directions with Maptiler

I am trying to use this API https://docs.maptiler.com/angular/ in my Angular project. I can create an normal map but when I zoom in or out my marker move in the completely wrong direction.

I tried change my scss and .ts in a hundered different ways. No idea why it moves wrong. Is it translated to the wrong position, but why?

My HTML:

<div class="map-wrap">
<div class="map" #map></div>
</div>


My Component:

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { Map, MapStyle, Marker, config } from '@maptiler/sdk';
import {getContainingImportDeclaration} from "@angular/compiler-cli/src/ngtsc/reflection/src/typescript";

@Component({
selector: 'app-main-map',
templateUrl: './main-map.component.html',
styleUrls: ['./main-map.component.scss']
})

export class MainMapComponent implements OnInit, AfterViewInit, OnDestroy {
map: Map | undefined;

@ViewChild('map')
private mapContainer!: ElementRef<HTMLElement>;

ngOnInit(): void {
config.apiKey = '4oaTVIMMIidsdNOe0mb'; //NOT A REAL KEY
}

ngAfterViewInit() {
const initialState = { lng: 15.421371, lat: 47.076668, zoom: 14 };

this.map = new Map({
container: this.mapContainer.nativeElement,
style: MapStyle.WINTER,
center: [initialState.lng, initialState.lat],
zoom: initialState.zoom
});

new Marker({color: "#FF0000"})
.setLngLat([15.421371,47.076668])
.addTo(this.map);
}

ngOnDestroy() {
this.map?.remove();
}
}


My SCSS:

.map-wrap {
position: relative;
width: 100%;
height: 100vh
}

.map {
top: 0;
bottom: 0;
position: absolute;
width: 100%;
height: 100%;
}


I tried so many combinations of solutions, but I do not know what is wrong.

Continue reading...