Icon scatter layer (v4.x)

Chart style

The icon scatter layer is a sub-widget of Basic Flat Map 4.0 that displays point data on a geographical map as icon scatters. It supports independent style, data, and interaction configurations, including icon settings, series settings, pop-up styles, and interaction settings.

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: Configure the general settings for the icon scatter layer.

  Parameter	Description
  Visibility Level	Set the visibility level for the icon scatter layer. The layer is visible only within the specified level range.
  Opacity	The opacity of the icon scatter layer. The value ranges from 0 to 100%. A larger value makes the layer more opaque.

• Graphic: Configure the graphic settings for the icon scatter layer.

  Parameter	Description
  Icon Shape	Set the shape of the icons. For more information, see Shape mapper instructions to configure mapping styles for different icon shapes.
  Icon Size	Set the size of the icons, including width and height. The value ranges from 0 to 400 px.
  Icon Rotation	Set the rotation angle of the scatter icons.
  Relative Position	Set the position of the scatter icons relative to the scatter points. Options include Left, Right, Center, Top, and Bottom.
  Relative Offset	Set the horizontal or vertical offset of the icons. The value ranges from -400 to 400 px.

• Label: Configure the style parameters for labels in the icon scatter layer.

  Parameter	Description
  Show Label	Turn on the switch to display labels for the icon scatter layer.
  Display Mode	Set how labels are displayed for the icon scatter layer. Options include Always Show, Click, and Hover.
  Relative Position	Set the position of the labels for the icon scatter layer. Options include Left, Center, Right, Top, and Bottom.
  Relative Offset	Set the horizontal and vertical offset of the labels for the icon scatter layer. The value ranges from -100 to 100 px.
  Content Style	Configure the label content style. Row Style: Click the or icon to the right of Row Style to add or delete a row style. Click the or icon to configure the arrangement of multiple row styles. Click the icon to copy the configuration of the currently selected style and add a new row style with the same configuration. Line Field: The field name for the line content. It must match a field in the Data panel. Field Style: Set the style for the line field, including font, font size, color, and weight. Field Prefix: Sets 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 settings. Field Suffix: Set the content, spacing, font, font size, color, and weight for the field suffix. Click the icon to the left of Field Suffix to show or hide the Field Suffix style. Max Width: Set the maximum width for a single line of the label in pixels. Content that exceeds this width automatically wraps to the next line. Line Height Ratio: The line height ratio for the label. The value ranges from 1 to 2. Content Outline: Specifies the outline style for the label content, including the color and thickness. Click the icon to the left of Content Outline to control the visibility of the Content Outline settings. Content Shadow: The style of the content shadow for the label, including the shadow color, blur value, and offset values in the x and y directions. Click the icon to the left of Content Shadow to control the visibility of Content Shadow.
  Background Style	Configure the label background style. Click the icon to the left of Background Style to show or hide the Background Style section. Background Type: The type of background for the label. Options are Vector and Image. Background Color: Set the background color of the label. This is configurable only when Background Type is set to Vector. Border Style: Set the border style for the label, including line type, width, and color. This is configurable only when Background Type is set to Vector. Border Radius: Set the border radius for the four corners of the label in pixels. This is configurable only when Background Type is set to Vector. Image Template: Select a template for the background image. This is configurable only when Background Type is set to Image. Opacity: Set the opacity of the background image. The value ranges from 0 to 100. This is configurable only when Background Type is set to Image. Content Margin: Set the top, bottom, left, and right margins for the content within the label.

• Interaction: Configure interaction settings for the icon scatter layer.

  Graphic interactions are visible in preview or on the published page when you click or hover over map elements. Click the icon to the left of Graphic Interaction to enable Graphic Interaction.

  Parameter	Description
  Click State	Configure the graphic and label styles. Use the icon to enable or disable the Graphic Interaction click state. Graphic: Configure the graphic style for the Click State of the icon scatter layer, including Icon Shape, Icon Size, Icon Rotation, Relative Position, and Relative Offset. Label: Configure the label style for the Click State of the icon scatter layer, including Show Label, Relative Position, Relative Offset, Content Style, and Background Style.
  Hover State	Configure the graphic and label styles. Use the icon to enable or disable the Graphic Interaction hover state. Graphic: Configure the graphic style for the Hover State of the icon scatter layer, including Icon Shape, Icon Size, Icon Rotation, Relative Position, and Relative Offset. Label: Configure the label style for the Hover State of the icon scatter layer, including Show Label, Relative Position, Relative Offset, Content Style, and Background Style.

• Condition: Specifies the condition for applying the style.

  Conditional Style: Click the or icon to add or delete a conditional style. Click the or icon to reorder multiple conditional styles. Click the icon to duplicate the current conditional style configuration. For more information, see Condition tree instructions.

  Graphic: Turn on the switch to configure graphic settings for this style. Turn it off to disable the graphic configuration for this style.

  Parameter	Description
  Icon Shape	Set the icon shape style. Use the icon to confirm whether to apply this style when the condition is met.
  Icon Size	Drag the slider to set the icon size. The value ranges from 0 to 400 px. Use the icon to confirm whether to apply this style when the condition is met.
  Relative Position	Set the position of the icon relative to the scatter point. Use the icon to confirm whether to apply this style when the condition is met.
  Relative Offset	Set the horizontal and vertical offset of the icon. The value ranges from -400 to 400 px. Use the icon to confirm whether to apply this style when the condition is met.

• Custom Pop-up Style: Configure the style parameters for custom pop-ups in the icon scatter layer.

  Parameter	Description
  Pop-up Switch	Turn on the switch to trigger pop-ups by Click or Hover.
  Display Mode	Set how pop-ups are displayed for the icon scatter layer. Options are Click and Hover.
  Relative Offset	Set the horizontal and vertical offset of the pop-up in pixels. The value ranges from -1000 to 1000 px.
  Text Style	Set the text style within the pop-up, including font, font size, color, and weight.
  Show Null Values	Enable this switch to display a 'No data' pop-up for objects that do not have an info field or have an empty info field. If the switch is disabled, no pop-up is displayed for data that does not have an info field.
  Pop-up Style	Padding: Set the top, bottom, left, and right margins for the text content in the pop-up. Border Style: Set the border radius, line width, and color for the pop-up. Background Color: Set the background color of the pop-up. Shadow Style: Set the shadow color, blur radius, X offset, and Y offset for the pop-up. Close Button: Turn on the switch to display a close button in the pop-up and set its color. Pointer Arrow: Turn on the switch to display a pointer arrow on the pop-up.

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
     On Data Update	Triggered when the data response changes. The new data is passed as an output.
     On Request Status Change	Triggered when the data request status changes (for example, to success or failure). The status is passed as an output.
     On Point Click	Triggered when a scatter point in the layer is clicked. The point data is passed as an output.
     On Click Outside Layer	Triggered when an area outside the layer is clicked. The event data is passed as an output.
     On Mouse Enter Element	Triggered when the mouse pointer enters an area of the layer. The area data is passed as an output.
     On Mouse Leave Element	Triggered when the mouse pointer leaves an area of the layer. The area data is passed as an output.
     On Mouse Move Over Element	Triggered when the mouse pointer moves over an area of the layer. The area data is passed as an output.
     Component Loading Complete	Triggered after the data API request returns and the data is processed by the filter. The processed data is passed as a JSON object. For a data example, see the Data Response section on the Data Source tab in the widget's configuration pane in the canvas editor.

   • Actions

     Action	Description
     Import Data	Imports data in the widget's format to redraw the widget without sending a new request to the server. For a data example, see the Data Response section on the Data Source tab in the widget's configuration pane in the canvas editor.
     Request Data	Re-requests data from the server-side. Data passed from upstream data processing nodes or layer nodes is used as parameters. For example, if the icon scatter layer has an API data source set to https://api.test and the data { id: '1'} is passed to the Request Data action, the final request URL will be 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 on the blueprint editor page, modify the field values for the target styles.