Maps provide support for internationalization for the below elements.
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
.
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.
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';
Maps.Inject(MapsTooltip);
@Component({
selector: 'app-container',
template:
`<ejs-maps id='rn-container' format="c" useGroupingSeparator="true">
<e-layers>
<e-layer [shapeData]= 'shapeData' [shapePropertyPath]= 'shapePropertyPath' [shapeDataPath]= 'shapeDataPath' [dataSource] = 'dataSource' [shapeSettings] = 'shapeSettings' [tooltipSettings]='tooltipSettings'></e-layer>
</e-layers>
</ejs-maps>`
})
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'
};
}
}
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
*/
@NgModule({
imports: [
BrowserModule, MapsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService , SelectionService, AnnotationsService, ZoomService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);