Drop maplibre-gl into ngAfterViewInit, store the instance on the component, and tear it down in ngOnDestroy. No Angular wrappers required.
pnpm add maplibre-glimport { 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();
}
}
Free-tier generous enough for real production traffic. 50,000 tile requests/month , no credit card.
No, using maplibre-gl directly is the most predictable path. The map instance lives in component memory and Angular handles subscription cleanup.
Expose the MapLibreMap instance on a service via @Injectable({ providedIn: "root" }) so any component can read or call .flyTo() on it.
The vocabulary behind vector tiles, styles, and geocoding, in plain language.
Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required.