Data labels provide information to users about the shapes of the Maps component. It can be enabled by setting the visible property of the dataLabelSettings to true.
To use the data label feature, the DataLabel module must be injected.
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 * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
return (<MapsComponent>
<Inject services={[DataLabel]}/>
<LayersDirective>
<LayerDirective shapeData={usa_map} shapeSettings={{
autofill: true
}} dataLabelSettings={{
visible: true,
labelPath: 'name'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[DataLabel]} />
<LayersDirective>
<LayerDirective shapeData={usa_map}
shapeSettings= { {
autofill: true
} }
dataLabelSettings={ {
visible: true,
labelPath: 'name'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
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 * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
return (<MapsComponent>
<Inject services={[DataLabel]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapePropertyPath="name" shapeDataPath="name" shapeSettings={{
autofill: true
}} 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" }
]} dataLabelSettings={{
visible: true,
labelPath: 'continent',
smartLabelMode: 'Trim'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[DataLabel]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapePropertyPath="name" shapeDataPath="name"
shapeSettings= { {
autofill: true
} }
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" }
] }
dataLabelSettings={ {
visible: true,
labelPath: 'continent',
smartLabelMode: 'Trim'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
The following properties are available in the dataLabelSettings
to customize the data label of the Maps component.
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel, MapsTooltip } from '@syncfusion/ej2-react-maps';
export function App() {
return (<MapsComponent>
<Inject services={[DataLabel, MapsTooltip]}/>
<LayersDirective>
<LayerDirective shapeData={usa_map} shapeSettings={{
autofill: true
}} dataLabelSettings={{
visible: true,
smartLabelMode: 'Hide',
intersectionAction: 'Trim',
labelPath: 'name',
border: {
color: 'green',
width: 2
},
fill: 'transparent',
opacity: 0.9,
textStyle: {
size: '17px',
fontStyle: 'Sans-serif',
fontWeight: 'normal'
}
}} tooltipSettings={{
visible: true,
valuePath: 'name'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel, MapsTooltip } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[DataLabel, MapsTooltip]} />
<LayersDirective>
<LayerDirective shapeData={usa_map}
shapeSettings= {{
autofill: true
}}
dataLabelSettings={ {
visible: true,
smartLabelMode: 'Hide',
intersectionAction: 'Trim',
labelPath: 'name',
border: {
color: 'green',
width: 2
},
fill: 'transparent',
opacity: 0.9,
textStyle: {
size: '17px',
fontStyle: 'Sans-serif',
fontWeight: 'normal'
}
} }
tooltipSettings= {{
visible: true,
valuePath: 'name'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
The Maps component 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
return (<MapsComponent>
<Inject services={[DataLabel]}/>
<LayersDirective>
<LayerDirective shapeData={usa_map} shapeSettings={{
autofill: true
}} dataLabelSettings={{
visible: true,
labelPath: 'name',
smartLabelMode: 'Hide'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[DataLabel]} />
<LayersDirective>
<LayerDirective shapeData={usa_map}
shapeSettings= { {
autofill: true
} }
dataLabelSettings={ {
visible: true,
labelPath: 'name',
smartLabelMode: 'Hide'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
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 * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
return (<MapsComponent>
<Inject services={[DataLabel]}/>
<LayersDirective>
<LayerDirective shapeData={usa_map} shapeSettings={{
autofill: true
}} dataLabelSettings={{
visible: true,
labelPath: 'name',
intersectionAction: 'Trim'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[DataLabel]} />
<LayersDirective>
<LayerDirective shapeData={usa_map}
shapeSettings= { {
autofill: true
} }
dataLabelSettings= { {
visible: true,
labelPath: 'name',
intersectionAction: 'Trim'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
Any HTML elements can be added as a template in the data labels by using the template property of dataLabelSettings
in the Maps component.
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 * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
return (<MapsComponent>
<Inject services={[DataLabel]}/>
<LayersDirective>
<LayerDirective shapeData={usa_map} shapePropertyPath="name" shapeDataPath="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>'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[DataLabel]} />
<LayersDirective>
<LayerDirective shapeData={usa_map} shapePropertyPath="name" shapeDataPath="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>'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);