Looking to incorporate markers into my map using Mapbox.
Below is the Angular TypeScript code I am working with:
export class MappViewComponent implements OnInit {
map: mapboxgl.Map;
lat = 41.1293;
lng = -8.4464;
style = "mapbox://styles/mapbox/streets-v11";
zoom = 8;
constructor(
private mapService: MapService,
private nodeService: NodeService
) {}
ngOnInit() {
this.buildMap(this.map);
/*var mymap = L.map('mapID').setView([41.260555, -8.436098], 10);
this.buildMap(mymap);*/
this.addMarkersLines(this.map);
new mapboxgl.Marker().setLngLat([this.lng, this.lat]).addTo(this.map);
}
/**https://leafletjs.com/reference-1.7.1.html */
buildMap(map: any) {
map = new mapboxgl.Map({
accessToken:
"accessToken",
container: "mapID",
style: this.style,
zoom: this.zoom,
center: [this.lng, this.lat],
antialias: true,
attributionControl: false,
});
map.addControl(new mapboxgl.NavigationControl());
The issue arises when running the code in console and encountering an error on this line:
new mapboxgl.Marker().setLngLat([this.lng, this.lat]).addTo(this.map);
Error message: TypeError: t is undefined addTo mapbox-gl.js:35 ngOnInit mapp-view.component.ts:30
Has anyone else faced a similar problem?