How to render the customized map Labelstyle through CSS?

1 min read

Step 1:

Create a map sample and include the necessary script files.

Step 2:

To customize the label style, define the CSS style under the style section. You can also define the CSS style for the smartLabel under the smartLabelStyle to customize the smartLabel style.

CSS

<style type="text/css">
.labelStyle
            {
                font-family: Corbel;
                font-size:14px;
                white-space: nowrap;
            }
.smartLabelStyle
            {
                padding:3px;
                                        font-weight: normal;
                                        color:black;
                                        width:auto;
                                        height:20px;
                                        text-align:center;
                                        font-size: 14px;
                                        font-family:Segoe UI;
            }
</style>

ASPX

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="ControlsSection">
                           . . .
     <ej:Map ID="labels" runat="server">
                             . . .
     <LabelSettings ShowLabels = "true" EnableSmartLabel = "true"></LabelSettings>
                              . . .
      </ej:Map>
                             . . .     
<style type="text/css">
.labelStyle
            {
                font-family: Corbel;
                font-size:14px;
                white-space: nowrap;
            }
.smartLabelStyle
            {
                padding:3px;
                                        font-weight: normal;
                                        color:black;
                                        width:auto;
                                        height:20px;
                                        text-align:center;
                                        font-size: 14px;
                                        font-family:Segoe UI;
            }
</style>                           
</asp:Content>

ASPX.CS

public partial class Labels : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
              . . .  
        }
    }

The following screenshot represents the customized map labelStyle along with the customized smartLabelStyle:

Figure 1: Map label

Sample Link:

http://www.syncfusion.com/downloads/support/directtrac/137817/WyomingMap_(2)1786869893.zip

Did you find this information helpful?

Yes

Comments (0)