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. To display the data labels in Maps, DataLabel module must be injected into the Maps using Maps.Inject(DataLabel) method. Refer to the below code snippet to inject the DataLabel module into the Maps component.
import { Maps, DataLabel } from '@syncfusion/ej2-maps';
Maps.Inject(DataLabel);
let map: Maps = new Maps({ });
To display the data labels in the Maps, set the field name containing the text to be displayed from the data source or shape data in the labelPath property of the dataLabelSettings
property.
In the following example, the value of labelPath
property is set from the field name in the shape data of the Maps layer.
import { usa_map } from './usa.ts';
import { Maps, DataLabel } from '@syncfusion/ej2-maps';
Maps.Inject(DataLabel);
let map: Maps = new Maps({
layers: [
{
shapeData: usa_map,
shapeSettings: {
autofill: true
},
dataLabelSettings: {
visible: true,
labelPath: 'name'
}
}
]
});
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="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="markerdata.js"></script>
<script src="systemjs.config.js"></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="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;
-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>
In the following example, the value of labelPath
property is set from the field name in the data source of the layer settings.
import { world_map } from './world-map.ts';
import { Maps, DataLabel } from '@syncfusion/ej2-maps';
Maps.Inject(DataLabel);
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapePropertyPath: 'name',
shapeDataPath: 'name',
dataLabelSettings: {
visible: true,
labelPath: "continent",
smartLabelMode: 'Trim'
},
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" }
],
shapeSettings: {
autofill: true
}
}]
});
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="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="markerdata.js"></script>
<script src="systemjs.config.js"></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="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;
-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>
The following properties are available in the dataLabelSettings
to customize the data label of the Maps control.
import { usa_map } from './usa.ts';
import { Maps, DataLabel, MapsTooltip } from '@syncfusion/ej2-maps';
Maps.Inject(DataLabel, MapsTooltip);
let map: Maps = new Maps({
layers: [
{
shapeData: usa_map,
dataLabelSettings: {
visible: true,
labelPath: 'name',
smartLabelMode: 'Hide',
intersectionAction: 'Trim',
border: {
color: 'green',
width: 2
},
fill: 'transparent',
opacity: 0.9,
textStyle: {
size: '17px',
fontStyle: 'Sans-serif',
fontWeight: 'normal'
},
},
shapeSettings: {
autofill: true
},
tooltipSettings: {
visible: true,
valuePath: 'name'
},
}
]
});
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="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="markerdata.js"></script>
<script src="systemjs.config.js"></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="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;
-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>
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.
import { usa_map } from './usa.ts';
import { Maps, DataLabel } from '@syncfusion/ej2-maps';
Maps.Inject(DataLabel);
let map: Maps = new Maps({
layers: [
{
shapeData: usa_map,
shapeSettings: {
autofill: true
},
dataLabelSettings: {
visible: true,
labelPath: 'name',
smartLabelMode: 'Hide'
}
}
]
});
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="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="markerdata.js"></script>
<script src="systemjs.config.js"></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="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;
-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>
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.
import { usa_map } from './usa.ts';
import { Maps, DataLabel } from '@syncfusion/ej2-maps';
Maps.Inject(DataLabel);
let map: Maps = new Maps({
layers: [
{
shapeData: usa_map,
shapeSettings: {
autofill: true
},
dataLabelSettings: {
visible: true,
labelPath: 'name',
intersectionAction: 'Trim'
}
}
]
});
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="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="markerdata.js"></script>
<script src="systemjs.config.js"></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="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;
-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>
Any HTML elements can be added as a template in the data labels by using the template property of dataLabelSettings
in the Maps control.
The properties of data label such as,
smartLabelMode
,intersectionAction
,border
,fill
,opacity
andtextStyle
properties are not applicable totemplate
property. The styles can be applied to the label template using the CSS styles of the HTML element.
import { usa_map } from './usa.ts';
import { Maps, DataLabel } from '@syncfusion/ej2-maps';
Maps.Inject(DataLabel);
let map: Maps = new Maps({
layers: [
{
shapeData: usa_map,
shapeDataPath: 'Name',
shapePropertyPath: 'name',
dataSource: [
{ Name: 'Iowa', Population: 29863010 },
{ Name: 'Utah', Population: 1263010 },
{ Name: 'Texas', Population: 963010 },
],
shapeSettings: {
autofill: true
},
dataLabelSettings: {
visible: true,
labelPath: 'Name',
template: '<div><div><img src="https://ej2.syncfusion.com/demos/src/maps/images/weather-clear.png" style="width:22px;height:22px"> </div> ${Name}</img></div>'
}
}
]
});
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="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="markerdata.js"></script>
<script src="systemjs.config.js"></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="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;
-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>