Absence of the three buttons on the card

Hi I have a problem when displaying the map. The three buttons that allow you to zoom in, zoom out and take the location are not displayed. Pls I need your help.

map.addControl(new tt.NavigationControl());

I tried but nothing
Here’s my html file:
<div id=“mape” >

</div>

  • CSS
    @import@tomtom-international/web-sdk-maps”;
    #mape {
    height: 100vh;
    width: 100vw;
    }
    And typescript file:
    import * as tt from ‘@tomtom-international/web-sdk-maps’;

export class AdminAuthComponent implements OnInit{
mape: any;
constructor() { }
ngOnInit(): void {
this.mape = tt.map({
key: ‘key’,
container: ‘mape’,
center: { lat: 40.712784, lng: -74.005941 },
zoom: 1
});
this.mape.addControl(new tt.NavigationControl());
}
}

I just tried and it works for me…


any errors in console?

Any errors


first of all, I saw this error : “can only be default-imported using the ‘allowSyntheticDefaultImports’ flag” in my terminal. And I solved it by replacing “import tt from ‘@tomtom-international/web-sdk-maps’;” to “import * as tt from ‘@tomtom-international/web-sdk-maps’;”. It work without buttons

Angular version (11.2.10)

Maybe try to put this when the map is loaded:

let self = this;
this.map.on('load', function () { 
  self.map.addControl(new ttMap.NavigationControl()); 
})