How can I help you?
Annotations in EJ2 TypeScript Maps component
6 Feb 202622 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.
Annotation
The content property of the annotations accepts text content, the ID of an HTML element, or an HTML string to render custom content on the map.
<script id='annotation' type="text/x-template">
<div id='template'>
<img src='src/maps/images/flight.png'>
</div>
</script>
import { Maps, Annotations } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Annotations);
let maps: Maps = new Maps({
annotations: [
{
content: '#annotation',
x: '0%', y: '50%'
}
],
layers: [
{
shapeData: world_map,
}
]
});
maps.appendTo('#element');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 Mpas elements.
import { Maps, Annotations } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Annotations);
let map: Maps = new Maps({
annotations: [
{
content: '<div id="first"><h1>Maps</h1></div>',
x: '0%', y: '50%',
zIndex: '-1'
}
],
layers: [
{
shapeData: world_map
}
]
});
map.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>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 annotation.
import { Maps, Annotations } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Annotations);
let map: Maps = new Maps({
annotations: [
{
content: '<div id="first"><h1>Maps</h1></div>',
x: '20%', y: '50%',
zIndex: '-1'
}
],
layers: [
{
shapeData: world_map
}
]
});
map.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>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 { Maps, Annotations } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Annotations);
let map: Maps = new Maps({
annotations: [
{
content: '<div id="first"><h1>Maps</h1></div>',
verticalAlignment: 'Center',
horizontalAlignment: 'Center',
x: '20%', y: '50%',
zIndex: '-1'
}
],
layers: [
{
shapeData: world_map
}
]
});
map.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>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 annotation settings.
import { Maps, Annotations } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Annotations);
let map: Maps = new Maps({
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'
}
],
layers: [
{
shapeData: world_map
}
]
});
map.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>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.
import { Africa_Continent } from './Africa_Continent.ts';
import { Maps, Annotations } from '@syncfusion/ej2-maps';
Maps.Inject(Annotations);
// initialize Maps component
let map: Maps = new Maps({
layers: [
{
shapeData: Africa_Continent,
shapeSettings: {
fill: 'url(#grad1)'
}
}
],
annotations: [
{
content:'#maps-annotation', // To insert the text content
x: '0%', y: '70%'
},
{
content: '#compass-maps', // To insert the image
x: '80%', y: '5%'
}
]
}, '#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="africa_continent.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></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 offset="100%" style="stop-color:#4C134F;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
<!-- annotation content -->
<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>
<div id="compass-maps" style="display: none;">
<img src="https://ej2.syncfusion.com/demos/src/maps/images/compass.svg" height="75px" width="75px">
</div>
<style>
#annotation {
color: #DDDDDD;
font-size: 12px;
font-family: Roboto;
background: #3E464C;
margin: 20px;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 300px;
-moz-box-shadow: 0px 2px 5px #666;
-webkit-box-shadow: 0px 2px 5px #666;
box-shadow: 0px 2px 5px #666;
}
.country-label {
color: white;
font-size: 25px;
}
</style>
</body>
</html> <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>
<div id="compass-maps" style="display: none;">
<img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
</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>