Search results

Internationalization in Angular Maps component

30 Sep 2022 / 2 minutes to read

Maps provide support for internationalization for the below elements.

  • Data label
  • Tooltip

For more information about number and date formatter, refer to the internationalization section.


Globalization is the process of designing and developing a component that works in different cultures/locales. Internationalization library is used to globalize number, date, time values in Maps component using format property in the Maps.

Numeric Format

The numeric formats such as currency, percentage and so on can be displayed in the tooltip and data labels of the Maps using the format property in the Maps. In the below example, the tooltip is globalized to German culture. When setting the useGroupingSeparator property as true, the numeric text in the Maps separates with the comma separator.

Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { Maps, MapsTooltip } from '@syncfusion/ej2-angular-maps';
import { world_map } from 'world-map.ts';
import { data } from 'data.ts';
selector: 'app-container',
`<ejs-maps id='rn-container' format="c" useGroupingSeparator="true">
<e-layer  [shapeData]= 'shapeData'  [shapePropertyPath]= 'shapePropertyPath' [shapeDataPath]= 'shapeDataPath' [dataSource] = 'dataSource' [shapeSettings] = 'shapeSettings' [tooltipSettings]='tooltipSettings'></e-layer>

export class AppComponent implements OnInit {
public dataSource: object;
public shapePropertyPath: string;
public shapeDataPath: string;
public shapeSettings: object;
public tooltipSettings: object;
public shapeData: object;
ngOnInit(): void {
    this.dataSource = [
        { "Country": "China", "Membership": "Permanent", population: '38332521'},
        { "Country": "France", "Membership": "Permanent", population: '19651127' },
        { "Country": "Russia", "Membership": "Permanent", population: '3090416'},
        { "Country": "Kazakhstan", "Membership": "Non-Permanent", population: '1232521'},
        { "Country": "Poland", "Membership": "Non-Permanent", population: '90332521'},
        { "Country": "Sweden", "Membership": "Non-Permanent", population: '383521'}
    this.shapeData = world_map;
    this.shapePropertyPath = 'name';
    this.shapeDataPath = 'Country';
    this.shapeSettings = {
         colorValuePath: 'Membership',
            colorMapping: [
                value: 'Permanent', color: '#D84444'
                value: 'Non-Permanent', color: '#316DB5'
    this.tooltipSettings ={
        visible: true,
        valuePath: 'population'
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService, SelectionService, AnnotationsService, ZoomService } from '@syncfusion/ej2-angular-maps';
 * Module
    imports: [
        BrowserModule, MapsModule
    declarations: [AppComponent],
    bootstrap: [AppComponent],
     providers: [LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService , SelectionService, AnnotationsService, ZoomService]
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';