Background image layer (v4.x)

Chart style

The background image layer is a sub-widget of the Basic Flat Map 4.0 that sets a custom image as the map background.

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.

• General: General settings for the background image layer.

  Parameter	Description
  Visibility Level	The visibility level of the background image layer. The layer is visible only within the specified level range.
  Opacity	The opacity of the background image layer, ranging from 0 to 100%. A larger value makes the layer more opaque.

• Graphic: Graphic settings for the background image layer.

  Parameter	Description
  Fill Type	The fill type for the background image. Valid values: Image Fill and Texture Tile.
  Image Shape	The style of the image shape. Select one of the three built-in styles from the drop-down list, enter an image URL to use a remote image, or click the icon to upload a local image. This parameter is available only when Fill Type is set to Image Fill.
  Fill Method	The method used to fill the background with the image. Valid values: Fill, Fit, and Stretch. This parameter is available only when Fill Type is set to Image Fill.
  Texture Shape	The style of the texture shape. Select one of the nine built-in texture styles from the drop-down list, enter a texture image URL to use a remote image, or click the icon to upload a local texture image. This parameter is available only when Fill Type is set to Texture Tile.
  Tile Size	The width and height of the tiled texture image, ranging from 0 to 100 px. This parameter is available only when Fill Type is set to Texture Tile.

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 open the Blueprint page.

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

3. View the blueprint configuration parameters.

   Note

   Click the icon in the anchor point area on the right to view event and action parameter tooltips.

   • Events

     Event	Description
     When Data Is Updated	Triggered when the data response changes. Returns the updated data.
     When Request Status Changes	Triggered when the data request status changes, for example, to success or failure. Returns the updated status.
     Loaded Components	Triggered after a data API response is processed by a filter. Outputs the processed data in JSON format. For a data example, see the Data Response Result area on the Data Source tab in the component's configuration panel on the right side of the canvas editor.

   • Actions

     Action	Description
     Import data	Imports data in the component's drawing format and redraws the component without re-requesting server-side data. For a data example, see the Data Response area on the Data Source tab in the configuration panel to the right of the component in the canvas editor.
     Request data	Re-requests server-side data, using the output from upstream data processing nodes or layer nodes as parameters. For example, if the API data source for a background image layer is set to https://api.test, and the data passed to the Request data 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 component configuration	Dynamically updates the style configuration of the component. To get the configuration data, click Copy configuration to clipboard on the component's Style panel. Then, modify the style field values in the data processing node on the blueprint editor's configuration page as needed.