Docs · Angular

Frameworks

Angular

A standalone Angular component that owns the map's lifecycle.

Example

orvia-map.component.tsts
1// orvia-map.component.ts — npm i maplibre-gl2// (add "node_modules/maplibre-gl/dist/maplibre-gl.css" to angular.json styles)3import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";4import { Map } from "maplibre-gl";56@Component({7  selector: "app-orvia-map",8  standalone: true,9  template: `<div #map style="height: 420px"></div>`,10})11export class OrviaMapComponent implements AfterViewInit, OnDestroy {12  @ViewChild("map") container!: ElementRef<HTMLDivElement>;13  private map?: Map;1415  ngAfterViewInit() {16    this.map = new Map({17      container: this.container.nativeElement,18      style: "https://orviamaps.ir/api/v1/style.json?key=YOUR_API_KEY",19      center: [51.389, 35.689],20      zoom: 11,21    });22  }2324  ngOnDestroy() {25    this.map?.remove();26  }27}

Replace YOUR_API_KEY with a key from your account, or read it from an environment variable as shown.