Annotations in JavaScript Maps component
18 Nov 201821 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>
var maps = new ej.maps.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 Maps elements.
var map = new ej.maps.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="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
var map = new ej.maps.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="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
var map = new ej.maps.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="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
var map = new ej.maps.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="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
var map = new ej.maps.Maps({
annotations:[
{
content:'#maps-annotation', // To insert the text content
x: '0%', y: '70%'
},
{
content: '#compass-maps', // To insert the image
x: '80%', y: '5%'
}
],
layers: [
{
shapeData: africa_continent,
shapeSettings: {
fill: 'url(#grad1)'
}
}
],
});
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="africa_continent.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<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>
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
</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/javascript/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>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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>