How to customize the tooltip text for the null values from the data source in Angular Maps?

The tooltip in the Angular Maps are rendered based on the data, either from the data source or shape data. If the tooltip is rendered based on the data from the data source, there may be any data that has null values. In this section, we will show you how to customize the tooltip text for the null values from the data source in Angular Maps.

The tooltipRender event in Maps, which is triggered when the tooltip is rendered, allows us to customize the tooltip text for the null values from the data source. This can be achieved by using the content property in its event argument. When the tooltipRender event is triggered, you can determine whether the data bound to the shapes (as represented by args.options.data.continent) is empty. If it is empty, the tooltip content is updated by adding “NA” to the content property in the event argument. In the following example, where the continent data is missing or null, the tooltip is customized.

The below code example demonstrates how to customize the tooltip text for the null values from the data source in Angular Maps:

app.component.html

<div class="control-section">
  <div align="center">
    <ejs-maps
      id="container"
      style="display:block;"
      [zoomSettings]="zoomSettings"
      [layers]="layers"
      [legendSettings]="legendSettings"
      [titleSettings]="titleSettings"
      (load)="load($event)"
      (tooltipRender)="tooltipRender($event)"
    >
    </ejs-maps>
  </div>
</div>

app.component.ts

import { Component, ViewEncapsulation, Inject } from '@angular/core';
import {
  Maps,
  Legend,
  Marker,
  MapsTooltip,
  ILoadEventArgs,
} from '@syncfusion/ej2-angular-maps';
import worldMap from './world-map.json';
import datasource from './default-datasource.json';
Maps.Inject(Legend, Marker, MapsTooltip);
declare var require: any;
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  titleSettings: object = {
    text: 'YouTube office locations',
    textStyle: {
      size: '16px',
    },
  };
  public zoomSettings: object = {
    enable: false,
  };
  public legendSettings: object = { visible: true };

  public layers: object[] = [
    {
      shapeData: worldMap,
      shapePropertyPath: 'continent',
      shapeDataPath: 'continent',
      dataSource: datasource,
      shapeSettings: { colorValuePath: 'color' },
      tooltipSettings: {
        visible: true,
        valuePath: 'continent',
        format: 'Name : ${continent} <br/> Sales : ${Sales}',
        fill: '#D0D0D0',
        textStyle: {
          color: 'green',
          fontFamily: 'Times New Roman',
          fontStyle: 'Sans-serif',
        },
      },
    },
  ];

  public load = (args: ILoadEventArgs) => {};

  public tooltipRender = (args) => {
    if (args.options.data.continent == '') {
      args.content =
        args.content.split(':')[0] +
        ' : NA' +
        args.content.split(':')[1] +
        ':' +
        args.content.split(':')[2];
    }
  };

  constructor() {}
}

The following screenshot illustrates the output of the above code snippet.

View StackBlitz Sample

Conclusion

I hope you enjoyed learning how to customize the tooltip text for the null values from the data source in the Angular Maps component.

You can refer to our Angular Maps feature tour to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Maps example to understand how to create and visualize the data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!