Search results

Localization in Angular Maps component

19 Oct 2021 / 2 minutes to read

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from 'world-map.ts';
import { L10n } from '@syncfusion/ej2-base';

L10n.load({
    'ar-AR': {
        'maps': {
            ZoomIn: 'تكبير',
            ZoomOut: 'تصغير',
            Zoom: 'زوم',
            Pan: 'مقلاة',
            Reset: 'إعادة تعيين'
        },
    }
});

@Component({
    selector: 'app-container',
    template:
    `<ejs-maps id='container' [locale]="Locale" [zoomSettings]='zoom'>
    <e-layers>
    <e-layer [shapeData]="mapData" [tooltipSettings]='tooltipSettings'></e-layer>
    </e-layers>
    <ejs-maps>`
})

export class AppComponent implements OnInit {
    public mapData: object[] = world_map;
	public Locale: string = 'ar-AR';
    public zoom: object = {
        enable: true
    };
    public tooltipSettings: object = {
      enable: true
    };
 ngOnInit(): void {
   }
}
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
 */
@NgModule({
    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';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);