Estoy tratando de cargar el mapa de Mapbox solo una vez almacenando el objeto del mapa en un Servicio y reutilizándolo en un componente personalizado.

Funciona bien la primera vez que cargo el mapa. El mapa se agrega correctamente a su contenedor.

Pero cuando trato de usar para mapear un objeto que ya se creó a través del Servicio, el mapa no se muestra. Mi objeto de mapa es correcto (si lo consuelo. log() por ejemplo) pero no se agrega al contenedor.

Aquí está el servicio:

 export class MapboxService { public map: Map | undefined = undefined constructor(private http: HttpClient) { } private loadMap(center: [number, number]): void { this.map = new Map({ container: 'map', style: 'mapbox://styles/planidays/ckqbcju7w2acp18qtgj9xyegw', center: center, zoom: 15, }) // Add zoom and rotation controls to the map. this.map.addControl(new NavigationControl()) } public getMap(center: [number, number]): Map | undefined { if (!this.map) { this.loadMap(center) } return this.map ? this.map : undefined } }

Aquí está el componente personalizado TS:

 export class MapComponent implements OnInit { center: [number, number] = [-73.974187, 40.771133] private map: mapboxgl.Map | undefined = undefined constructor(private mapboxService: MapboxService) {} ngOnInit(): void { this.map = this.mapboxService.getMap(this.center) } }

Aquí está el HTML del componente personalizado:

 <div #map id='map' class="map"></div>

Creo que la referencia del contenedor cambia cada vez que uso el objeto del mapa, por lo que no se agrega, pero no estoy seguro. Alguna idea ?