Data Labels in Angular Maps component

22 Jul 2021 / 3 minutes to read

Data labels provide information to users about the shapes of the Maps component.

Add data labels

You can add label text to the shapes of the Maps component using dataLabelSettings. The following sample demonstrates the names of all the states n the United States in data labels.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Maps, DataLabel } from '@syncfusion/ej2-angular-maps';
import { usa_map } from 'usa.ts';

Maps.Inject(DataLabel);
@Component({
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'  >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [shapeSettings] = 'shapeSettings' [dataLabelSettings] = 'dataLabelSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    ngOnInit(): void {
         public shapeData: Object = usa_map;
         public shapeSettings: Object = {
                autofill: true
            };
            public dataLabelSettings: Object = {
                visible: true,
                labelPath: 'name',
            };
   }
}

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

The autofill property is used in shapeSettings to apply the default palette colors to the shapes.

Some data labels intersect with other labels in this output. The following options are used to avoid intersecting:

Smart labels

The Maps component provides an option to specify the smart labels when the labels intersect with the corresponding shape borders. In the smartLabelMode property, you can specify any of the following options:

None
Hide
Trim

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Maps, DataLabel } from '@syncfusion/ej2-angular-maps';
import { usa_map } from 'usa.ts';

Maps.Inject(DataLabel);
@Component({
selector: 'app-container',
template:
`<ejs-maps id='rn-container'  >
<e-layers>
<e-layer  [shapeData]= 'shapeData' [shapeSettings] = 'shapeSettings' [dataLabelSettings] = 'dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>`
})

export class AppComponent implements OnInit {
ngOnInit(): void {
     public shapeData: Object = usa_map;
     public shapeSettings: Object = {
            autofill: true
        };
        public dataLabelSettings: Object = {
            visible: true,
            labelPath: 'name',
            smartLabelMode: 'Hide'
        };
   }
}

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

Intersect action

This specifies the intersect action when a label intersect with another label. In the intersectionAction property, you can specify any of the following options:

None
Hide
Trim

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Maps, DataLabel } from '@syncfusion/ej2-angular-maps';
import { usa_map } from 'usa.ts';

Maps.Inject(DataLabel);
@Component({
selector: 'app-container',
template:
`<ejs-maps id='rn-container'  >
<e-layers>
<e-layer  [shapeData]= 'shapeData' [shapeSettings] = 'shapeSettings' [dataLabelSettings] = 'dataLabelSettings'></e-layer>
</e-layers>
</ejs-maps>`
})

export class AppComponent implements OnInit {
ngOnInit(): void {
     public shapeData: Object = usa_map;
     public shapeSettings: Object = {
            autofill: true
        };
        public dataLabelSettings: Object = {
            visible: true,
            labelPath: 'name',
            intersectionAction: 'Trim'
        };
   }
}

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

Contents

Add data labels
Smart labels
Intersect action

Contents

Add data labels
Smart labels
Intersect action