BubbleTooltipTemplateDirective

A directive that sets a template within the <kendo-map-tooltip> component for the Map Bubble layer tooltip.

The available inputs for the bubble tooltip template are:

• dataItem: any—The original data item used to create the bubble.
• layerIndex: number—The index of the layer for the tooltip.
• location: Location—The location of the bubble.
• value: number—The value of the bubble.

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-map>
      <kendo-map-layer type="bubble" [data]="data">
        <kendo-map-bubble-layer-tooltip>
          <ng-template kendoMapBubbleTooltipTemplate let-dataItem="dataItem" let-value="value">
            <div>{{ dataItem.name }}: {{ value }}</div>
          </ng-template>
        </kendo-map-bubble-layer-tooltip>
      </kendo-map-layer>
    </kendo-map>
  `
})
export class AppComponent {
  public data = [{ name: 'City', value: 100000 }];
}

Selector

[kendoMapBubbleTooltipTemplate]