Search results

Data Labels in Angular Maps component

22 Oct 2021 / 5 minutes to read

Data labels provide information to users about the shapes of the Maps control. It can be enabled by setting the visible property of the dataLabelSettings to true.

Adding data labels

To display data labels in the Maps, the labelPath property of dataLabelSettings must be used. The value of the labelPath property can be taken from the field name in the shape data or data source. In the following example, the value of the labelPath property is the field name in the shape data of the Maps layer.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } 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 {
    public shapeData: object;
    public shapeSettings: object;
    public dataLabelSettings: object
    ngOnInit(): void {
        this.shapeData = usa_map;
        this.shapeSettings = {
                autofill: true
            };
        this.dataLabelSettings = {
            visible: true,
            labelPath: 'name',
        };
   }
}
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);

In the following example, the value of labelPath property is set from the field name in the data source of the layer settings.

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

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

export class AppComponent implements OnInit {
    public shapeData: object;
    public shapePropertyPath: string;
    public shapeDataPath: string;
    public dataSource: object;
    public shapeSettings: object;
    public dataLabelSettings: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.shapePropertyPath = 'name';
        this.shapeDataPath = 'name';
        this.dataSource = [
            {"name": "Afghanistan", "value": 53, "countryCode": "AF", "population": "29863010", "color": "red", "density": "119", "continent": "Asia"},
            {"name": "Albania", "value": 117, "countryCode": "AL", "population": "3195000", "color": "Blue", "density": "111", "continent": "Europe"},
            {"name": "Algeria", "value": 15, "countryCode": "DZ", "population": "34895000", "color": "Green", "density": "15", "continent": "Africa"}]
        this.shapeSettings = {
            autofill: true
        };
        this.dataLabelSettings = {
            visible: true,
            labelPath: "continent",
            smartLabelMode: 'Trim'
        };
    }
}
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);

Customization

The following properties are available in the dataLabelSettings to customize the data label of the Maps control.

  • border - To customize the color, width and opacity for the border of the data labels in Maps.
  • fill - To apply the color of the data labels in Maps.
  • opacity - To customize the transparency of the data labels in Maps.
  • textStyle - To customize the text style of the data labels in Maps.
Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit} 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 {
public shapeData: object;
public shapeSettings: object;
public dataLabelSettings: object;
ngOnInit(): void {
    this.shapeData = usa_map;
    this.shapeSettings = {
            autofill: true
        };
    this.dataLabelSettings = {
        visible: true,
        labelPath: 'name',
        border: {
            color: 'green',
            width: 2
        },
        fill: 'red',
        opacity: 0.9,
        textStyle: {
            color: 'blue',
            size: '10px',
            fontStyle: 'Sans-serif',
            fontWeight: 'normal',
        }
    };
}
}
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);

Smart labels

The Maps control provides an option to handle the labels when they intersect with the corresponding shape borders using the smartLabelMode property. The following options are available in the smartLabelMode property.

  • None
  • Hide
  • Trim
Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } 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 {
public shapeData: object;
public shapeSettings: object;
public dataLabelSettings: object;
ngOnInit(): void {
    this.shapeData = usa_map;
    this.shapeSettings = {
        autofill: true
    };
    this.dataLabelSettings = {
        visible: true,
        labelPath: 'name',
        smartLabelMode: 'Hide'
    };
}
}
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);

Intersect action

The Maps component provides an option to handle the labels when a label intersects with another label using the intersectionAction property. The following options are available in the intersectionAction property.

  • None
  • Hide
  • Trim
Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } 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 {
public shapeData: object;
public shapeSettings: object;
public dataLabelSettings: object;
ngOnInit(): void {
    this.shapeData = usa_map;
    this.shapeSettings = {
        autofill: true
    };
    this.dataLabelSettings = {
        visible: true,
        labelPath: 'name',
        intersectionAction: 'Trim'
    };
}
}
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);

Adding data label as a template

The data label can be added as a template in the Maps component. The template property of dataLabelSettings is used to set the data label as a template. Any text or HTML element can be added as the template in data labels.

The customization properties of data label, smartLabelMode and intersectionAction properties are not applicable to template property. The styles can be applied to the label template using the CSS styles of the template element.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } 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 {
public shapeData: object;
public shapeSettings: object;
public dataLabelSettings: object;
ngOnInit(): void {
    this.shapeData = usa_map;
    this.shapeSettings = {
        autofill: true
    };
    this.dataLabelSettings = {
        visible: true,
        labelPath: 'name',
        template: 'Label'
    };
}
}
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);