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