How to render the detailed US map with labels
How to render the detailed US map with labels?
Data labels provide information to the user about the shapes. You can add text to the shapes of the maps component using dataLabelSettings and bind the field name in the data source to the labelPath property in dataLabelSettings.
The following code renders the names of all the shapes in the USA.
import { Maps, DataLabel } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
Maps.Inject(DataLabel);
let maps: Maps = new Maps({
layers: [
{
shapeData: usa,
dataLabelSettings: {
visible: true,
labelPath: 'name'
},
shapeSettings: {
autofill: true
}
//..
}
]
});
maps.appendTo('#container');
Screenshot:
Refer to the working sample for additional details and implementation: Maps Labels
The overlapping labels can be customized using the below properties.
- SmartLabelMode
- IntersectionAction
SmartLabelMode
The labels which cross the boundary of their shape can be handled in this. You can use the smartLabelMode property with the following options.
- Trim
- Hide
- None
The below code snippet shows the labels with smartLabelMode as Trim.
import { Maps, DataLabel } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
Maps.Inject(DataLabel);
let maps: Maps = new Maps({
layers: [
{
shapeData: usa,
dataLabelSettings: {
visible: true,
labelPath: 'name',
smartLabelMode: 'Trim'
},
shapeSettings: {
autofill: true
}
//..
}
]
});
maps.appendTo('#container');
Screenshot:
Refer to the working sample for additional details and implementation: Smart label
IntersectionAction
The labels, which intersect with other labels, can be handled in this. You can use the intersectionAction property with the following options.
- Trim
- Hide
- None
The below code snippet shows the labels with intersectionAction as Hide.
import { Maps, DataLabel } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
Maps.Inject(DataLabel);
let maps: Maps = new Maps({
layers: [{
shapeData: usMap,
dataLabelSettings: {
visible: true,
labelPath: 'name',
intersectionAction: 'Trim'
},
shapeSettings: {
autofill: true
}
//..
}]
});
maps.appendTo('#element');
Screenshot:
Refer to the working sample for additional details and implementation: Label intersection action
