Infowindow layer

更新时间:
复制 MD 格式

Configure the infowindow layer's style, data source, and blueprint interaction settings to display location-specific information on a 3D Earth visualization.

Chart style

The infowindow layer is a 3D Earth subcomponent with independent style and data configurations, including height, scaling ratio, and transparency. Use it to display location-specific information as floating panels in your visualization. image.png

Style panelimage.png

  • Search Configuration: Click the Style icon image in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see Search configuration item.

  • Height: The vertical distance between the infowindow layer and the Earth's surface, in pixels (px).

  • Scaling: The overall size of the infowindow layer.

  • Transparency: The transparency level of the infowindow layer.

  • Mixed Mode: The blending mode of the infowindow layer. Options include additive and normal.

  • Interaction Switch: Enables interaction and allows you to set the mouse click color.

Data source panelimage.png

Field

Description

lat

Latitude coordinate of the infowindow's location.

lng

Longitude coordinate of the infowindow's location.

content

(Optional) The text content to be displayed within the infowindow.

  • width: The width of the infowindow, measured in pixels (px).

  • height: The height of the infowindow, measured in pixels (px).

  • title: The title text of the infowindow.

  • titleFontSize: The font size used for the infowindow's title.

  • titleColor: The color of the infowindow's title text.

  • content: The main body text of the infowindow.

  • contentColor: The color of the infowindow's body text.

  • contentFontSize: The font size used for the infowindow's body text.

  • paddingLeft: The left padding of the infowindow's content, measured in pixels (px).

  • paddingRight: The right padding of the infowindow's content, measured in pixels (px).

  • paddingTop: The top padding of the infowindow's content, measured in pixels (px).

  • fontFamily: The font family for the infowindow's title and body text. Select a font installed on your system; if unavailable, the default font is used.

  • bgImgUrl: The URL of the background image for the infowindow layer.

Data Item Configuration

Description

Data Source

The component's data source displays the data fields contained within the component using code editing or visual editor. You can also modify the data type to flexibly configure the component's data.

Data Mapping

When you need to customize chart field configurations, you can set different field mappings in the Data Mapping module to map these fields to the corresponding fields of the component. This allows for real-time data matching without altering the data source fields. Additionally, click the image icon to configure field styles individually.

Filter

Open the Filter to select an existing data filter or create a new one, and configure the data filter script to achieve data filtering capabilities. For more information, see manage data filters.

Data Response Result

This feature displays the component's data in real-time. When the component's data source changes, the data response result will display the latest data accordingly. In case of a delayed system response, you can click the image icon on the right to check the current data response result, or click the image icon on the right to obtain the most recent data for the component. You can also click to view examples to see sample response results for the current component.

Disable Loading State

Check the check box to hide the loading content during component updates and data dashboard previews. Unchecking will display the loading content. The default setting is unchecked.

Controlled Mode

Check the check box to prevent data requests upon the component's initialization. Data requests will only be initiated through global variables or methods configured in the blueprint editor. Unchecking allows for automatic update requests. The default setting is unchecked.

Automatic Update Request

Check the check box to manually set the polling frequency for dynamic polling. Clearing this option disables automatic updates, requiring manual page refreshes or data request triggers through the blueprint editor and global variable events for updates.

Advanced panel

Turn on the switch to enable widget interaction. Selecting or deselecting an infowindow triggers a data request and passes a temporary variable for dynamic data loading. For detailed configurations, see Widget interaction configuration.

Blueprint interaction

  1. Click the image icon in the upper left corner to access the Blueprint page.

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

  3. Review the blueprint configuration parameters. image.png

    • Event

      Event

      Description

      When The Data Interface Request Is Completed

      Triggered after the data interface request completes and the filter processes the data. Returns the processed data in JSON format. For data examples, refer to the Data Source tab in the widget's configuration panel on the right side of the canvas editor, under the Data Response Result section.

      Selected State

      Triggered when an infowindow is selected, passing the selection data.

      Deselect

      Triggered when an infowindow is deselected, passing the deselection data.

    • Action

      Action

      Description

      Request Data Interface

      Re-requests server-side data, using data from the input data processing node or layer node as parameters. For example, if the infowindow layer uses an API data source such as https://api.test, and the data passed to the Request Data Interface action is { id: '1'}, the final request URL becomes https://api.test?id=1.

      Import Data Interface

      Imports data into the widget for re-rendering without re-requesting server-side data. The data must be processed into the widget rendering format. For data examples, refer to the Data Source tab in the widget's configuration panel on the right side of the canvas editor, under the Data Response Result section.

      Toggle Visibility

      Toggles the widget's visibility. No parameters required.

      Show

      Displays the widget. Example data:

      {
        "animationType": "",//Animation type. Optional value: fade. No animation if not filled.
        "animationDuration": 1000,//Animation latency, measured in ms.
        "animationEasing": ""//Animation curve
      }

      Hide

      Hides the widget. Example data:

      {
        "animationType": "",//Animation type. Optional value: fade. No animation if not filled.
        "animationDuration": 1000,//Animation latency, measured in ms.
        "animationEasing": ""//Animation curve
      }

      Update Widget Configuration

      Dynamically updates the widget's style configuration. To get the configuration data, click Copy Configuration To Clipboard in the widget's Style panel, then modify the field values as needed in the data processing node on the blueprint editor configuration page.