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 { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
import { setCulture } from '@syncfusion/ej2-base';
setCulture('de');
export function App() {
return (<MapsComponent format='c' useGroupingSeparator={true}>
<Inject services={[MapsTooltip]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' 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' }
]} shapeSettings={{
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5' }
]
}} tooltipSettings={{
visible: true,
valuePath: 'population'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
import { setCulture } from '@syncfusion/ej2-base';
setCulture('de');
export function App() {
return(
<MapsComponent format='c' useGroupingSeparator={true}>
<Inject services={[MapsTooltip]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' 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' }
]}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5' }
]
} }
tooltipSettings={ {
visible: true,
valuePath: 'population'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);