The localization library allows localizing the default text content of the Maps control. The Maps control has the static text of some features such as tooltip of zoom toolbar, and that can be changed to any other culture(Arabic, Deutsch, French, etc) by defining the locale value and translation object.
Locale key words | Text to display |
Zoom | Zoom |
ZoomIn | Zoom In |
ZoomOut | Zoom Out |
Reset | Reset |
Pan | Pan |
To load translation object in the application, use load
function of L10n class. For more information about localization, refer here.
import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
import { L10n } from '@syncfusion/ej2-base';
L10n.load({
'ar-AR': {
'maps': {
ZoomIn: 'تكبير',
ZoomOut: 'تصغير',
Zoom: 'زوم',
Pan: 'مقلاة',
Reset: 'إعادة تعيين'
},
}
});
ReactDOM.render(<MapsComponent id="maps" locale="ar-AR" zoomSettings={{ enable: true }}>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}>
</LayerDirective>
</LayersDirective>
</MapsComponent>, document.getElementById("maps"));
import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
import { L10n } from '@syncfusion/ej2-base';
L10n.load({
'ar-AR': {
'maps': {
ZoomIn: 'تكبير',
ZoomOut: 'تصغير',
Zoom: 'زوم',
Pan: 'مقلاة',
Reset: 'إعادة تعيين'
},
}
});
ReactDOM.render(
<MapsComponent id="maps" locale="ar-AR" zoomSettings={ { enable: true } }>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeDataPath='Country'
shapePropertyPath='name'
dataSource={uncountries}>
</LayerDirective>
</LayersDirective>
</MapsComponent>,
document.getElementById("maps") as HTMLElement
);