Text callout layer (v2.x version)
Updated at:
The text labeling layer is a sub-component of the basic flat map that displays geographic information as text labels. It supports independent style, data, and interaction configurations, including text labeling styles, popup boxes, mouse interaction events, and location information.
Click Text Labeling Layer below Manage Sub-widgets. In the configuration panel, configure the style and data of the Text Labeling Layer.
Note If Text Labeling Layer is not displayed in the Component Management section, you have not added the Text Labeling Layer component. For more information, seeMap container (v2.x).
Parameter
- Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
- Visible Level: the zoom level range in which the text labeling layer is visible. The layer is hidden outside this range.
- Dimension Style: the display field and text style for the text dimension layer.
Parameter Feature Displayed Field The display field of the label. This value must match a field name in the geographic data. Text Style The font family, weight, size, color, and shadow color of labels in the text labeling layer. For more information, see color picker instructions. Note Only fonts installed on the system are displayed. If the selected font is not installed, the default font is used. - dialog box: the popup that appears when you click a label point on the Preview or Publish page. Click the
icon on the left of the pop-up box to control the display and hiding of the pop-up box. Note To enable the pop-up feature, you must set the info field first.- info Field: If you turn on info Field, set info Field as the pop-up content. You can configure HTML tags for this field. If you turn off info Field, the pop-up content is compatible with the name and value fields.
- Event Type: the type of event displayed in the dialog box.
- Configuration Options: the style configuration of the popup. You can select Default or Custom.
- Parent Container Default: uses the default system style.
- Custom Settings: allows you to customize the text style, line height ratio, and corner radius.
Parameter Feature Text Style The font, weight, size, and color of the text in the dialog box. For more information, see color picker instructions. Row height ratio The row height ratio of the popup text. Fillet Radius The corner radius of the popup. A larger value produces more rounded corners. Margins The spacing between the text and the four edges of the dialog box. Background color The background color of the dialog box. Close button The color, size, and position offsets (from top and right) of the close button.
- Interactive Configuration
Hover Style: Click the
icon on the left of Hover Style to enable or disable the hover interaction feature. When enabled, a text label scales up when you hover over it. The effect is visible only in preview or publish mode.
The metadata of the filtering table.
| Field | Description |
| lat | The latitude of the text label point. |
| lng | The longitude of the text label point. |
| name | The display name of the text label point. |
| value | You can customize the value or info field in the data panel to specify the popup content for text label points. |
| info |
| Parameter | Description |
| Controlled Mode | If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off. |
| Auto Data Request | After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests. |
| Data Source | In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data. |
| Data Filter | If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter. |
| Data Response Result | The response to a data request. If the data source changes, you can click the |
Interaction
| Interaction | Description |
| When you click a point | Select the Enable check box to enable interactions between widgets. The text labeling layer supports click interactions. When you click a label point, the layer returns the callback value. By default, the lng and lat fields from the data are returned. For more information, see Configure callback IDs. |
| When the mouse moves in | Select the Enable check box to enable interactions between widgets. The text labeling layer supports hover interactions. When you move the pointer over a label point, the layer returns the callback value. By default, the lng and lat fields from the data are returned. For more information, see Configure callback IDs. |
Configure interactions in Blueprint Editor
- In Canvas Editor, click the
icon next to Text Labeling Layer in the Basic Flat Map widget. - Click the
icon in the upper-left corner of the page. - In Blueprint Editor, click the Text Labeling Layer widget in the Added Nodes pane. On the canvas, you can configure the parameters for the text labeling layer, as shown in the following figure.
- Event
Event Description When the data interface request is completed The event is triggered after a data interface request completes and the response is processed by a filter. The processed JSON data is returned. For more information about specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor. When a data interface request fails The event that is triggered when a data interface request fails due to network issues or interface errors. The processed JSON data is returned after filter processing. For more information about specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor. When you click a point The event that is triggered when you click a label point on the text labeling layer. The longitude and latitude data of the label point are returned. When the mouse moves in The event that is triggered when you move the pointer over a label point on the text labeling layer. The longitude and latitude data of the label point are returned. - Policy Action
Action Description Request Data Interface Requests server data again, using data from an upstream processing node or layer node as parameters. For example, if the API data source is http://api.testand the data passed to the request data interface is{ id: '1'}, the final request interface ishttp://api.test?id=1.Import data Imports pre-processed data in the widget's drawing format for redrawing, without making another server request. For more information about specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor. Display Shows the widget. No parameters are required. Hide Hides the widget. No parameters are required.
- Event
Is this page helpful?
icon next to Text Labeling Layer in the Basic Flat Map widget.
icon in the upper-left corner of the page.