Absence of the three buttons on the card

Maps SDK for Web (JavaScript)
#1

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.

Screenshot from 2021-07-27 20-35-29
Screenshot from 2021-07-27 20-35-291366×768 159 KB

#2 
map.addControl(new tt.NavigationControl());
#3

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

#4

I just tried and it works for me…

image
image711×587 78.8 KB

any errors in console?

#5

Any errors

nwscr
nwscr1352×640 127 KB

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

#6

Angular version (11.2.10)

#7

Maybe try to put this when the map is loaded:

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