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 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 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');
Sample link - Maps Labels
The overlapping labels can be customized using the below properties.
- SmartLabelMode
- IntersectionAction
SmartLabelMode
The labels which crosses the boundary on its 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');
Sample link - Smart label
IntersectionAction
The labels which are intersected 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');
Sample link - Label intersection action
