Information label layer (v4.x)

Chart style

The information label layer is a sub-widget of the Basic Flat Map 4.0 that displays geographic label information as icons. You can independently configure its style, data, and interactions, including the indicator line and main icon.

Style panel

• Search Configuration: Click the icon in the upper-right corner of the Style panel to search for configuration items by name. Fuzzy matching is supported. Search for a configuration item.

• Quick styles: Provides preset styles for the information label layer. Select a style based on your scenario.

• General: General settings for the information label layer.

  Parameter	Description
  Visibility level	The visibility level of the information label layer. The layer is visible only within the specified level range.
  Opacity	The opacity of the information label layer, ranging from 0 to 100%. Higher values make the layer more opaque.

• Graphic: Graphic settings for the information label layer.

  • Indicator Line: The style of the indicator line. Click the icon on the left to show or hide the indicator line.

    Parameter	Description
    Endpoint offset	The horizontal and vertical offset of the indicator line, ranging from -500 to 500 px.
    Horizontal line ratio	Drag the slider to set the ratio of the horizontal segment to the full indicator line, ranging from 0 to 100%.
    Line style	Drag the slider to set the line style, including line type, color, and thickness, ranging from 0 to 20 px. Note The line type supports numeric input such as 4,4, where the first number is the solid line length and the second is the gap length.

  • Main Icon: The style of the main icon in the label. Click the icon on the left to show or hide the main icon.

    Parameter	Description
    Icon shape	The shape of the main icon. Select a built-in style from the drop-down list, enter the URL of a remote image, or click the icon to upload a local image.
    Icon size	The width and height of the main icon, ranging from 0 to 200 px.

• Label: Style settings for the labels in the information label layer.

  • Overall width: The overall width of the label. Set the adaptation type to Auto or Fixed width. With Auto, the width adapts to the map widget size, and you can set a maximum width from 20 to 500 px. With Fixed width, you can set a fixed width from 20 to 500 px.

  • Main Title: The style of the main title in the label. Click the icon to the left of Main Title to show or hide the Main Title style settings.

    Parameter	Description
    Title field	The title field for the label, which must match a field name in the geographic data. The default field is name.
    Text style	The text style for the label title, including font, font size, color, and weight.
    Title background	The background style for the main title of the label. Background color: The background color of the main title. Border style: The border style of the main title, including line type, width, and color. Border radius: The border radius for the four corners of the main title, in px. Content margin: The margin between the main title content and the four sides of its container.

  • Main Content: The style of the main content within the label. Click the icon to the left of Main Content to show or hide the Main Content style settings.

    Parameter	Description
    Style per row	Click the or icon to the right of Row Style to add or delete a row content style. Click the or icon to configure the arrangement of multiple row content styles. Click the icon to copy the currently selected content style and add a new content style with the same configuration. Row field: The field name for the row content. This must match a field in the data panel. Field style: The row field style, including font, font size, color, and weight. Field Prefix: The content, spacing, font, font size, color, and weight of the field prefix. Click the icon to the left of Field Prefix to show or hide the Field Prefix style. Field Suffix: The content, spacing, font, font size, color, and weight of the field suffix. Click the icon to the left of Field Suffix to show or hide the Field Suffix style.
    Line height ratio	The line height ratio of the label, ranging from 1 to 2.
    Content background	The background style for the main content of the label. Background color: The background color of the main content. Border style: The border style of the main content, including line type, width, and color. Border radius: The border radius for the four corners of the main content, in px. Content margin: The margin between the content and the four sides of the main content container.

  • Background: The background style for the label. Click the icon to the left of Background to show or hide the Background style settings.

    Parameter	Description
    Background type	The background type of the label. Options are Vector and Image.
    Background color	The background color of the label. Configurable only when Background type is set to Vector.
    Image template	The template for the background image. Configurable only when Background type is set to Image.
    Opacity	The opacity of the background image, ranging from 0 to 100. Available only when Image Template is set to Image.
    Border style	The border style of the label background, including line type, width, and color. Configurable only when Background type is set to Vector.
    Border radius	The border radius for the four corners of the label background, in px. Configurable only when Background type is set to Vector.
    Content margin	The margin between the content and the four sides of the background box.

• Condition: The criteria for applying a style.

  Conditional Style: Click the or icon to add or delete a conditional style. Click the or icon to configure the arrangement of multiple conditional styles. Click the icon to copy the current conditional style and add a new one with the same configuration. For more information about style configurations, see Use the condition tree.

  Graphic: Sets the style of the graphic in the information label layer for this condition. Click the icon to the left of the Graphic setting to show or hide the graphic.

  • Indicator Line: The style of the indicator line under this condition. Click the icon on the left to show or hide the indicator line.

    Parameter	Description
    Endpoint offset	The horizontal and vertical offset of the indicator line, ranging from -500 to 500 px.
    Horizontal line ratio	Drag the slider to set the ratio of the horizontal segment to the full indicator line, ranging from 0 to 100%.
    Line style	Drag the slider to set the line style, including line type, color, and thickness, ranging from 0 to 20 px. Note The line type supports numeric input such as 4,4, where the first number is the solid line length and the second is the gap length.

  • Main Icon: The style of the main icon under this condition. Click the icon on the left to show or hide the main icon.

    Parameter	Description
    Icon shape	The shape of the main icon. Select a built-in style from the drop-down list, enter the URL of a remote image, or click the icon to upload a local image.
    Icon size	The width and height of the main icon, ranging from 0 to 200 px.

Data Source panel

Advanced panel

Configure interaction events or associate global variables for filter interactions between widgets. Configure widget interactions.

Blueprint interaction

1. Click the icon in the upper-left corner of the page to go to the Blueprint page.

2. On the Layer Node tab, add the current widget to the main canvas.

3. View the Blueprint configuration parameters.

   Note

   To view the parameter tooltips for layer events and actions, click the icon in the anchor point configuration on the right side of the canvas.

   • Events

     Event	Description
     When data is updated	Triggered when the data response result changes, and throws the updated data.
     When the data request status changes	Thrown when the data request status changes. The callback parameter is the current status. For a data example, see the Data Response section on the Data Source tab in the widget's configuration pane in the canvas editor.
     Component Loading Complete	An event triggered after a data API request is returned and processed by a filter, which also provides the processed data in JSON format. For a specific data example, see the Data Response area on the Data Source tab in the configuration panel to the right of the widget in the canvas editor.

   • Actions

     Action	Description
     Import data API	Imports pre-formatted data directly into the widget for redrawing, without sending another server request. For specific data examples, see the Data Response area on the Data Source tab in the configuration panel to the right of the widget in the canvas editor.
     Request data API	Re-requests data from the server, using data from input processing nodes or layer nodes as parameters. For example, if the information label layer uses an API data source of https://api.test and the data passed to the Request data API action is { id: '1'}, the final request URL is https://api.test?id=1.
     Toggle visibility	The Toggle Visibility, Show, and Hide actions do not require parameters by default. You can add animation configurations as needed. See the data example. { // Animation type. Optional values: appear|fade|slideToUp. The default is fade. If left blank, there is no animation. "animationType": "fade", // Animation duration. The default is 1000 ms. "animationDuration": 1000, // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo. The default is linear. "animationEasing": "linear" }
     Show
     Hide
     Update widget configuration	Dynamically updates the widget's style configuration. In the widget's Style panel, click Copy Configuration to Clipboard to get the configuration data. Then, in the data processing node of the Blueprint editor, modify the field values for the styles as needed.