Search results

Data labels

Data labels provide information to users about the shapes of the Map component.

Add data labels

You can add label text to the shapes of the Maps component using MapsDataLabelSettings. The following sample demonstrates the names of all the states in the United States in data labels.

@using Syncfusion.EJ2.Blazor.Maps

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

The Autofill property is used in MapsShapeSettings to apply the default palette colors to the shapes.

Maps with data label

Some data labels intersect with other labels in this output. The following options are used to avoid intersecting:

Smart labels

The Maps component provides an option to specify the smart labels when the labels intersect with the corresponding shape borders. In the SmartLabelMode property, you can specify any of the following options:

  • None
  • Hide
  • Trim
@using Syncfusion.EJ2.Blazor.Maps

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

Maps with smart data label

Intersect action

This specifies the intersect action when a label intersect with another label. In the IntersectionAction property, you can specify any of the following options:

  • None
  • Hide
  • Trim
@using Syncfusion.EJ2.Blazor.Maps

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

Maps with intersect action for data label