Data labels in Blazor Maps Component

5 Dec 202410 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 MapsDataLabelSettings to true.

Adding data labels

To display data labels in the Maps, the LabelPath property of MapsDataLabelSettings 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.

@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
            @* To add data labels *@
            <MapsDataLabelSettings Visible="true" LabelPath="name"></MapsDataLabelSettings>
            <MapsShapeSettings Autofill="true"></MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

In the following example, the value of LabelPath property is set from the field name in the data source of the layer settings.

@using Syncfusion.Blazor.Maps

<SfMaps ID="Maps">
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="PopulationDetail"
                   DataSource="PopulationDetails" ShapeDataPath="@ShapeDataPath" ShapePropertyPath="@ShapePropertyPath">
            @* To add data labels *@
            <MapsDataLabelSettings Visible="true" LabelPath="Continent"></MapsDataLabelSettings>
            <MapsShapeSettings Autofill="true"></MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code{
    public class PopulationDetail
    {
        public string Code { get; set; }
        public double Value { get; set; }
        public string Name { get; set; }
        public double Population { get; set; }
        public double Density { get; set; }
        public string Color { get; set; }
        public string Continent { get; set; }
    };
    public List<PopulationDetail> PopulationDetails = new List<PopulationDetail> {
        new PopulationDetail {
            Code = "AF", Value= 53, Name= "Afghanistan", Population= 29863010, Density= 119, Color = "Red", Continent = "Asia"
        },
        new PopulationDetail {
            Code= "AL", Value= 117, Name= "Albania", Population= 3195000, Density= 111, Color = "Blue", Continent = "Europe"
        },
        new PopulationDetail {
            Code= "DZ", Value= 15, Name= "Algeria", Population= 34895000, Density= 15, Color = "Green", Continent = "Africa"
        }
    };
    public string[] ShapePropertyPath = { "name" };
    public string ShapeDataPath = "Name";
}

Customization

The following properties and classes are available in the MapsDataLabelSettings to customize the data label of the Maps component.

• MapsLayerDataLabelBorder - To customize the color and width 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.
• MapsLayerDataLabelTextStyle - To customize the text style of the data labels in Maps.

@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
            @* To add data labels *@
            <MapsDataLabelSettings Visible="true" LabelPath="name" Fill="red" Opacity="0.9">
                <MapsLayerDataLabelBorder Color="green" Width="2"></MapsLayerDataLabelBorder>
                <MapsLayerDataLabelTextStyle Color="blue" Size="12px" FontStyle="Sans-serif" FontWeight="normal">
                </MapsLayerDataLabelTextStyle>
            </MapsDataLabelSettings>
            <MapsShapeSettings Autofill="true"></MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

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 MapsDataLabelSettings of the Maps. The duration of the animation is specified in milliseconds.

@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
            @* To add data labels *@
            <MapsDataLabelSettings Visible="true" LabelPath="name" AnimationDuration="5000"></MapsDataLabelSettings>
            <MapsShapeSettings Autofill="true"></MapsShapeSettings>
            <MapsLayerTooltipSettings Visible="true" ValuePath="name"></MapsLayerTooltipSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

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

@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
            @* To hide intersect labels with shape border *@
            <MapsDataLabelSettings Visible="true" LabelPath="name" SmartLabelMode="SmartLabelMode.Hide">
            </MapsDataLabelSettings>
            <MapsShapeSettings Autofill="true"></MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

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

@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
            @* To trim intersect labels *@
            <MapsDataLabelSettings Visible="true" LabelPath="name" IntersectionAction="IntersectAction.Trim">
            </MapsDataLabelSettings>
            <MapsShapeSettings Autofill="true"></MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

Adding data label as a template

The data label can be added as a template in the Maps component. The LabelTemplate property of MapsDataLabelSettings is used to set the data label as a template. Any text or HTML element can be added as the template in data labels.

NOTE

The customization properties of data label, SmartLabelMode, AnimationDuration and IntersectionAction properties are not applicable to LabelTemplate property. The styles can be applied to the label template using the CSS styles of the template element.

@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="PopulationDetail"
                   DataSource="PopulationDetails" ShapeDataPath="@ShapeDataPath" ShapePropertyPath="@ShapePropertyPath">
            <MapsDataLabelSettings Visible="true">
                <LabelTemplate>
                    @{
                        var Data = context as PopulationDetail;
                        <div style="width:50px; height:20px;border: 2px solid black; text-align:center;">
                            <p style="color:red; font-size:12px;">@Data.Continent</p>
                        </div>
                    }
                </LabelTemplate>
            </MapsDataLabelSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code{
    public class PopulationDetail
    {
        public string Code { get; set; }
        public double Value { get; set; }
        public string Name { get; set; }
        public double Population { get; set; }
        public double Density { get; set; }
        public string Color { get; set; }
        public string Continent { get; set; }
    };
    public List<PopulationDetail> PopulationDetails = new List<PopulationDetail> {
        new PopulationDetail {
            Code = "AF", Value= 53, Name= "Afghanistan", Population= 29863010, Density= 119, Color = "Red", Continent = "Asia"
        },
        new PopulationDetail {
            Code= "AL", Value= 117, Name= "Albania", Population= 3195000, Density= 111, Color = "Blue", Continent = "Europe"
        },
        new PopulationDetail {
            Code= "DZ", Value= 15, Name= "Algeria", Population= 34895000, Density= 15, Color = "Green", Continent = "Africa"
        }
    };
    public string[] ShapePropertyPath = { "name" };
    public string ShapeDataPath = "Name";
}