Data label in EJ2 TypeScript Maps control
22 Sep 202324 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. 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({ });
Adding data labels
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="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>
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="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>
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.
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="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>
Label animation
The data labels can be animated during the initial rendering of the Maps. This can be enabled by setting the animationDuration property in the dataLabelSettings
of the Maps. The duration of the animation is specified in milliseconds.
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',
animationDuration: 2000,
},
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="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>
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 - It specifies that no action is taken, when a label exceeds the shape’s region.
- Hide - It specifies to hide the labels, when it exceeds the shape’s region.
- Trim - It specifies to trim the labels, when it exceeds the shape’s region.
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="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>
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 - It specifies that no action is taken, when the labels intersect.
- Hide - It specifies to hide the labels when they intersect.
- Trim - It specifies to trim the labels when they intersect.
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="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>
Adding data label as a template
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
,animationDuration
,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="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>