Internationalization in React Maps component

20 Feb 202610 minutes to read

Internationalization enables the Maps component to display content in different cultures and locales, making it accessible to users worldwide. The Maps component supports internationalization for the following elements:

• Data label
• Tooltip

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

Globalization

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.

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { world_map } from 'world-map.ts';
import {
  MapsComponent,
  LayersDirective,
  LayerDirective,
  MapsTooltip,
  Inject,
} from '@syncfusion/ej2-react-maps';
import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
setCulture('de');
setCurrencyCode('EUR');

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 />);

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { world_map } from 'world-map.ts';
import {
  MapsComponent,
  LayersDirective,
  LayerDirective,
  MapsTooltip,
  Inject,
} from '@syncfusion/ej2-react-maps';
import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
setCulture('de');
setCurrencyCode('EUR');

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 />);