Angular globe component

Install the official Angular package:

npm install canvas-globe-angular canvas-globe

CanvasGlobeComponent is standalone and handles Angular lifecycle cleanup, input changes, outputs, and access to the underlying globe instance.

import { Component } from "@angular/core";
import { CanvasGlobeComponent } from "canvas-globe-angular";

@Component({
  selector: "app-audience-map",
  standalone: true,
  imports: [CanvasGlobeComponent],
  template: `
    <canvas-globe
      licenseKey="your-license-key"
      [markers]="markers"
      [options]="{ preset: 'hologram', tooltip: true }"
      (markerClick)="openMarker($event.marker)"
    />
  `,
})
export class AudienceMapComponent {
  markers = [{ lat: 23.03, lon: 72.58, count: 12, live: true }];

  openMarker(marker: unknown) {
    console.log(marker);
  }
}

Pass any CanvasGlobe option through options. The component also exposes the running instance for methods such as flyTo, fitToMarkers, and exportImage.