Annotations in Angular Maps component
18 Nov 201817 minutes to read
Annotations allow marking specific areas of interest on a map by adding custom content such as text, shapes, images, or HTML elements. Unlike markers and data labels, annotations provide flexibility to overlay any custom HTML content at precise locations. Multiple annotations can be added to the Maps component.
Adding an annotation
The content property of annotations, accepts text content, the ID of an HTML element, or an HTML string to render custom content on the map.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { AnnotationsService } from '@syncfusion/ej2-angular-maps'
import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
MapsModule
],
providers: [AnnotationsService],
standalone: true,
selector: 'app-container',
template:
`<ejs-maps id='rn-container' style="display:block" [annotations]='annotations'>
<e-layers>
<e-layer [shapeData]= 'shapeData'></e-layer>
</e-layers>
</ejs-maps>`
})
export class AppComponent implements OnInit {
public annotations?: object;
public shapeData?: object;
ngOnInit(): void {
this.annotations = [{
content: '<div id="first"><h1>Maps</h1></div>',
x: '0%', y: '50%',
zIndex: '-1'
}];
this.shapeData = world_map
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Annotation customization
Changing the z-index
The zIndex property in the annotations controls the stack order of annotation elements. A higher z-index value places the annotation above other Maps elements.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { AnnotationsService } from '@syncfusion/ej2-angular-maps'
import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
MapsModule
],
providers: [AnnotationsService],
standalone: true,
selector: 'app-container',
template:
`<ejs-maps id='rn-container' style="display:block" [annotations]='annotations'>
<e-layers>
<e-layer [shapeData]= 'shapeData'></e-layer>
</e-layers>
</ejs-maps>`
})
export class AppComponent implements OnInit {
public annotations?: object;
public shapeData?: object;
ngOnInit(): void {
this.annotations = [{
content: '<div id="first"><h1>Maps</h1></div>',
x: '0%', y: '50%',
zIndex: '-1'
}];
this.shapeData = world_map;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Positioning an annotation
Annotations can be placed anywhere in the Maps by specifying pixel or percentage values to the x and y properties in the annotations.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { AnnotationsService } from '@syncfusion/ej2-angular-maps'
import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
MapsModule
],
providers: [AnnotationsService],
standalone: true,
selector: 'app-container',
template:
`<ejs-maps id='rn-container' style="display:block" [annotations]='annotations'>
<e-layers>
<e-layer [shapeData]= 'shapeData'></e-layer>
</e-layers>
</ejs-maps>`
})
export class AppComponent implements OnInit {
public annotations?: object;
public shapeData?: object
ngOnInit(): void {
this.annotations = [{
content: '<div id="first"><h1>Maps</h1></div>',
x: '20%', y: '50%',
zIndex: '-1'
}];
this.shapeData = world_map;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Alignment of an annotation
Annotations can be aligned using the horizontalAlignment and verticalAlignment properties in the annotations. The supported values are Center, Far, Near, and None.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { AnnotationsService } from '@syncfusion/ej2-angular-maps'
import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
MapsModule
],
providers: [AnnotationsService],
standalone: true,
selector: 'app-container',
template:
`<ejs-maps id='rn-container' style="display:block" [annotations]='annotations'>
<e-layers>
<e-layer [shapeData]= 'shapeData'></e-layer>
</e-layers>
</ejs-maps>`
})
export class AppComponent implements OnInit {
public annotations?: object;
public shapeData?: object;
ngOnInit(): void {
this.annotations = [{
content: '<div id="first"><h1>Maps</h1></div>',
verticalAlignment: 'Center',
horizontalAlignment: 'Center',
x: '20%', y: '50%',
zIndex: '-1'
}];
this.shapeData = world_map;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Multiple annotations
Multiple annotations can be added to the Maps component by defining an array of annotation objects in the annotations property. Each annotation can be customized individually using the annotations settings.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { AnnotationsService } from '@syncfusion/ej2-angular-maps'
import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
MapsModule
],
providers: [AnnotationsService],
standalone: true,
selector: 'app-container',
template:
`<ejs-maps id='rn-container' style="display:block" [annotations]='annotations'>
<e-layers>
<e-layer [shapeData]= 'shapeData'></e-layer>
</e-layers>
</ejs-maps>`
})
export class AppComponent implements OnInit {
public annotations?: object;
public shapeData?: object;
ngOnInit(): void {
this.annotations = [{
content: '<div id="first"><h1>Maps-Annotation</h1></div>',
x: '50%', y: '0%',
zIndex: '-1'
},
{
content: '<div id="first"><h1>Maps</h1></div>',
x: '20%', y: '50%',
zIndex: '-1'
}];
this.shapeData = world_map;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Creating custom annotation templates
Initialize the Maps component with annotation option, text content or ID of an HTML element or an HTML string can be specified to render a new element that needs to be displayed in the Maps by using the content property. To specify the content position with x and y properties as mentioned in the following example.
[app.module.ts]
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { AnnotationsService } from '@syncfusion/ej2-angular-maps';
@NgModule({
imports: [ BrowserModule,MapsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [AnnotationsService]
})
export class AppModule { }[app.component.ts]
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { Component, ViewEncapsulation } from '@angular/core';
import { africa_continent } from './africa-continent';
@Component({
imports: [
MapsModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the maps component
template:`<div class="control-section">
<div align='center'>
<ejs-maps id='container' style="display:block;" [annotations] ='annotation'>
<e-layers>
<e-layer [shapeData]='shapeData' [shapeSettings]='shapeSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>
<div id="maps-annotation" style="display: none;">
<div id="annotation">
<div>
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
</div>
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
<div>
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
<li>Africa is the second largest and second most populated continent in the world.</li>
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.
</li>
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
</ul>
</div>
</div>
</div>
<style>
#annotation {
color: #DDDDDD;
font-size: 12px;
font-family: Roboto;
background: #3E464C;
margin: 20px;
padding: 10px;
border-radius: 2px;
width: 300px;
box-shadow: 0px 2px 5px #666;
}
</style>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public shapeData = africa_continent;
public shapeSettings = {
fill: 'url(#grad1)'
};
public annotation:object[] = [
{
content:'#maps-annotation',
x: '0%', y: '70%'
}
];
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));