Angular maps, the boring infra part
sorted.

import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import maplibregl, { Map as MapLibreMap } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const MAP_STYLE = 'https://maps.guru/api/v1/styles/standard/light/style.json?key=YOUR_API_KEY';

@Component({
  selector: 'app-city-map',
  template: `<div #host class="map-canvas"></div>`,
  styles: [`.map-canvas { width: 100%; height: 480px; }`],
  standalone: true,
})
export class CityMapComponent implements AfterViewInit, OnDestroy {
  @ViewChild('host', { static: true }) host!: ElementRef<HTMLDivElement>;
  private map?: MapLibreMap;

  ngAfterViewInit(): void {
    this.map = new maplibregl.Map({
      container: this.host.nativeElement,
      style: MAP_STYLE,
      center: [77.209, 28.6139],
      zoom: 11,
    });
    this.map.addControl(new maplibregl.NavigationControl());
  }

  ngOnDestroy(): void {
    this.map?.remove();
  }
}