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.