Data label in React Maps component
18 Jan 202324 minutes to read
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.
Adding data labels
To display data labels in the Maps, the labelPath
property of dataLabelSettings
must be used. The value of the labelPath
property can be taken from the field name in the shape data or data source. In the following example, the value of the labelPath
property is 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 />);
Customization
The following properties are available in the dataLabelSettings
to customize the data label of the Maps component.
-
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 * 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 />);
Smart labels
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.
- None
- Hide
- Trim
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 />);
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
- Hide
- Trim
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 />);
Adding data label as a template
The data label can be added as a template in the Maps component. The template
property of dataLabelSettings
is used to set the data label as a template. Any text or HTML element can be added as the template in data labels.
The customization properties of data label,
smartLabelMode
andintersectionAction
properties are not applicable totemplate
property. The styles can be applied to the label template using the CSS styles of the template 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 />);