Estoy creando un mapa que muestra un marcador de coordenadas que se almacena en la base de datos. Sin embargo, el marcador no aparece en el mapa, el mapa es parte del archivo component.ts:

 ngOnInit(): void { console.log( this.route.snapshot.paramMap.get('facviewid'), ' : ID of report' ); this.getparamformid = this.route.snapshot.paramMap.get('facviewid'); this.daformfacservice.getOneDAFacForm(this.getparamformid).subscribe((daFormFac: DAFormFac[]) => { this.daformfacs = daFormFac; console.log(daFormFac, 'response of form'); }); let map = L.map('map').setView([10.536421, -61.311951], 8); L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1IjoiZGlsbG9uciIsImEiOiJjbDB6MGdlbW8xNnZuM2lqbmJnNWZkNzY0In0.cfAOIAy5foQsoUlHhpYSjQ' }).addTo(map); this.mapService.getMarkers(map) }

Estoy llamando al marcador usando this.mapService.getMarkers(map) del servicio de mapas que tiene la función getMarkers() de:

 baseURL: string = 'http://localhost:3000/DAFacility'; constructor(private webReqService: WebRequestService, private http: HttpClient) { } getMarkers(map: L.Map): void { this.http.get(this.baseURL).subscribe((res: any)=> { for (const c of res){ const lat = c.latitude; const lon = c.longitude; var marker = L.marker([lon, lat], {draggable: true}).addTo(map); marker.bindPopup(`<center><p><strong>${c.facilityName}</strong></p></center>`+ marker.getLatLng()).openPopup(); } }); }

los datos se almacenan en la colección de la base de datos DAFacility como:

El marcador no aparece en el mapa, creo que es así como llamé al servicio de mapas, pero probé todo lo que sé y no funcionó. ¡Cualquier ayuda sería apreciada!