I have issue with my map from mapbox. I don’t know why, but my marker won’t showing up. To give you more details, i had same problem with mapbox logo in left lower corner and annotations in right lower corner (thats why i added them by hand). But as far i know they should be visible out of a box and i think that issue may be related to that with mine marker issue. Okay, that’s all about describing my issue. There is current code implementation:

TS file:

import {
  Component,
  OnInit,
  Input,
  OnChanges,
  SimpleChanges,
} from '@angular/core';
import { setMapboxAccessToken } from '@shared/services/mapbox.config';
import { MapboxService } from '@shared/services/mapbox.service';
import mapboxgl from 'mapbox-gl';

@Component({
  selector: 'app-glassmorph-map-viewer',
  templateUrl: './glassmorph-map-viewer.component.html',
  styleUrls: ['./glassmorph-map-viewer.component.scss'],
})
export class GlassmorphMapViewerComponent implements OnInit, OnChanges {
  @Input() width: string = '20rem';
  @Input() height: string = '20rem';
  @Input() latitude: number = 0;
  @Input() longitude: number = 0;

  map!: mapboxgl.Map;
  marker!: mapboxgl.Marker;
  isAttributionVisible: boolean = false;
  attributionTextElement!: HTMLElement;

  constructor(private mapboxService: MapboxService) {}

  ngOnInit(): void {
    this.mapboxService.getToken().subscribe(
      (token) => {
        setMapboxAccessToken(token);
        this.initializeMap();
      },
      (error) => {
        console.error('Error fetching Mapbox token:', error);
      }
    );
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['latitude'] || changes['longitude']) {
      this.updateMarkerPosition();
    }
  }

  initializeMap(): void {
    this.map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [this.longitude, this.latitude],
      zoom: 12,
      attributionControl: false,
    });

    this.map.on('load', () => {
      this.marker = new mapboxgl.Marker()
        .setLngLat([this.longitude, this.latitude])
        .addTo(this.map);
    });

    this.updateMapSize();
    this.addCustomAttributionAndLogo();
  }

  updateMapSize(): void {
    const mapContainer = document.getElementById('map');
    if (mapContainer) {
      mapContainer.style.width = this.width;
      mapContainer.style.height = this.height;
      this.map.resize();
    }
  }

  updateMarkerPosition(): void {
    if (this.marker) {
      this.marker.setLngLat([this.longitude, this.latitude]);
      this.map.setCenter([this.longitude, this.latitude]);
    }
  }

  addCustomAttributionAndLogo(): void {
    const mapContainer = document.getElementById('map');
    if (mapContainer) {
      const logo = document.createElement('div');
      logo.innerHTML =
        '<img src="assets/mapbox-logo-black.svg" alt="Mapbox Logo" style="width: 50px;">';
      logo.style.position = 'absolute';
      logo.style.left = '0.25rem';
      logo.style.bottom = '0.25rem';

      const attributionButton = document.createElement('button');
      attributionButton.innerText = 'i';
      attributionButton.style.width = '1.1rem';
      attributionButton.style.height = '1.1rem';
      attributionButton.style.fontSize = '0.65rem';
      attributionButton.style.position = 'absolute';
      attributionButton.style.right = '0.25rem';
      attributionButton.style.bottom = '0.25rem';
      attributionButton.style.border = '0.1rem solid black';
      attributionButton.style.borderRadius = '0.55rem';
      attributionButton.style.cursor = 'pointer';
      attributionButton.style.zIndex = '1000';
      attributionButton.onclick = () => {
        this.toggleAttribution(attributionButton);
      };

      this.attributionTextElement = document.createElement('div');
      this.attributionTextElement.innerHTML =
        '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
      this.attributionTextElement.style.position = 'absolute';
      this.attributionTextElement.style.paddingLeft = '0.25rem';
      this.attributionTextElement.style.paddingRight = '1.25rem';
      this.attributionTextElement.style.height = '1rem';
      this.attributionTextElement.style.right = '0.25rem';
      this.attributionTextElement.style.bottom = '0.25rem';
      this.attributionTextElement.style.border = '0.1rem solid black';
      this.attributionTextElement.style.borderRadius = '0.55rem';
      this.attributionTextElement.style.fontSize = '0.65rem';
      this.attributionTextElement.style.display = 'none';

      mapContainer.appendChild(logo);
      mapContainer.appendChild(attributionButton);
      mapContainer.appendChild(this.attributionTextElement);
    }
  }

  toggleAttribution(button: HTMLButtonElement): void {
    this.isAttributionVisible = !this.isAttributionVisible;
    if (this.isAttributionVisible) {
      this.attributionTextElement.style.display = 'block';
      button.innerText = 'x';
    } else {
      this.attributionTextElement.style.display = 'none';
      button.innerText = 'i';
    }
  }
}

SCSS file:

.map-container {
  border-radius: 1rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}
mgl-map {
  height: 100%;
  width: 100%;
}

HTML file:

<div id="map" class="map-container"></div>
<ng-content></ng-content>

Ps. It will be nice to get original bottom-left mapbox logo back.