Popups - arnaudleclerc/ng-azure-maps GitHub Wiki

You can add Popups to the map using the map-popup directive. Please refer to the Azure Maps Documentation concerning the available options. The map and the popups listen to the changes on the provided markers and will update them accordingly.

import { Component } from '@angular/core';
import { IMapEvent } from 'ng-azure-maps';

@Component({
  selector: 'app-root',
  template: '<azure-map (onClick)="clickedMap($event)">' +
    '<map-popup [content]="content" [position]="popupPosition" [opened]="opened" (onClose)="closed()"></map-popup>'+
    '<map-html-marker [position]="fixedPosition" (onMouseOver)="enterMarker()" (onMouseLeave)="leaveMarker()"></map-html-marker>' +
    '<map-popup [content]="fixedPopupContent" [position]="fixedPosition" [closeButton]="false" [pixelOffset]="[0,-36]" '+
      '[fillColor]="\'rgba(0,0,0,0.8)\'" [opened]="fixedPopupOpened"></map-popup>'+
    '</azure-map>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  private popupTemplate = '<div class="infobox"><b>Coordinates</b><br>Longitude: {longitude}<br>Latitude: {latitude}</div>';

  public content: string;
  public popupPosition: [number, number];
  public opened: boolean;

  public fixedPosition: [number, number] = [0, 50];
  public fixedPopupContent: string = '<span class="infobox-2">Shows on mouse over<span>';
  public fixedPopupOpened: boolean;

  enterMarker(): void {
    this.fixedPopupOpened = true;
  }
  
  leaveMarker(): void {
    this.fixedPopupOpened = false;
  }

  clickedMap(clickEvent: IMapEvent): void {
    this.popupPosition = clickEvent.event.position;
    this.popupPosition[0].toFixed(3)
    this.content = this.popupTemplate.replace(/{longitude}/g, this.popupPosition[0].toFixed(3)).replace(/{latitude}/g, this.popupPosition[1].toFixed(3))
    this.opened = true;
  }

  closed(): void {
    this.opened = false;
  }
}

Route

React to events on the popup

The popup events are supported on the map-popup directive. Every event starts with on and is followed by the key of the event in PascalCase. A parameter containing the popup and the event is given to the method.

The events and their description are defined on the following table.

Native event key popup event Description
close onBoxZoomEnd Fired when the popup closes.
drag onDrag Fired repeatedly during a "drag to pan" interaction on the popup.
dragend onDragEnd Fired when a "drag to pan" interaction ends on the popup.
dragstart onDragStart Fired when a "drag to pan" interaction starts on popup.
open onOpen Fired when the popup opens.
⚠️ **GitHub.com Fallback** ⚠️