Vector scatter layer (v4.x)

Chart style

The vector scatter layer is a sub-widget of Basic Flat Map 4.0 that displays point data at geographic locations as vector scatter points. The layer supports independent style, data, and interaction configurations.

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: Select from several predefined quick styles for the vector scatter layer.

• General: Configure general settings for the vector scatter layer.

  Parameter	Description
  Visible levels	Specify the zoom level range in which the layer is visible.
  Opacity	Specify the layer opacity as a percentage from 0 to 100. Higher values make the layer more opaque.

• Graphic: Configure the graphic appearance of scatter points.

  Parameter	Description
  Vector shape	Specify the scatter point shape. For more information, see Use the shape mapper.
  Scatter radius	Specify the scatter point radius. For more information, see Use the size mapper.
  Icon rotation	Set the rotation angle of the scatter point icons.
  Scatter color	Specify the scatter point color. For more information, see Use the color mapper.
  Scatter outline	Set the color and thickness of the scatter point outlines.

• Label: Configure label styles for the vector scatter layer.

  Parameter	Description
  Show labels	Turn on the switch to display labels on scatter points.
  Display mode	Set how labels are displayed. Options include Always show, Click, and Mouseover.
  Relative position	Set the relative position of the labels. Options include Left, Center, Right, Top, and Bottom.
  Relative offset	Set the horizontal and vertical offset of the labels in pixels (px). The value ranges from -100 to 100.
  Content style	Set the content style for the labels. 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 currently selected row style configuration and add a new row 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: Set the style for the row field, including font, font size, color, and weight. Field Prefix: Set the content, spacing, font, font size, color, and weight. Click the icon to the left of Field Prefix to show or hide the Field Prefix style. Field Suffix: Set the content, spacing, font, font size, color, and font weight of the suffix. Click the icon to the left of Field Suffix to show or hide the Field Suffix style. Max width: Specify the maximum single-line width for a label in pixels (px). Content exceeding this width wraps automatically. Line height ratio: Specify the label line height ratio. Valid values: 1 to 2. Content Outline: Configure the outline color and thickness for label content. Click the icon to the left of Content Outline to show or hide these settings. Content Shadow: Configure the label content shadow, including color, blur, and X/Y offsets. Click the icon to the left of Content Shadow to show or hide these settings.
  Background style	Configure the label background style. Click the icon to the left of Background Style to show or hide these settings. Background type: The background type 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 of 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 (px). 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 Image template is set to Image. Opacity: Set the opacity of the background image. The value ranges from 0 to 100. This is configurable only when Image template is set to Image. Content padding: Set the padding between the label content and the top, bottom, left, and right borders.

• Interaction: Configure the interactions for the vector scatter layer.

  Graphic interaction: Display interaction styles when you click or hover over a map element on the preview or published page. Click the icon to the left of Graphic interaction to enable Graphic interaction.

  Parameter	Description
  Click state	Set the graphic and label styles. Use the icon to enable or disable the Graphic interaction click state. Graphic: Set the graphic style of the vector scatter layer for the Click state. This includes Vector shape, Scatter radius, Icon rotation, Scatter color, and Scatter outline. Label: Set the label style of the vector scatter layer for the Click state. This includes Show labels, Relative position, Relative offset, Content style, and Background style.
  Mouseover state	Set the graphic and label styles. Use the icon to enable or disable the Graphic interaction mouseover state. Graphic: Set the graphic style of the vector scatter layer for the Mouseover state. This includes Vector shape, Scatter radius, Icon rotation, Scatter color, and Scatter outline. Label: Set the label style of the vector scatter layer for the Mouseover state. This includes Show labels, Relative position, Relative offset, Content style, and Background style.

• Condition: Specifies the condition under which the style is applied.

  Conditional style: Click the or icon on the right to add or delete a conditional style. Click the or icon to arrange multiple conditional styles. Click the icon to copy the selected conditional style configuration and add a new one with the same settings. For more information about style configurations, see Use the condition tree.

  Graphic: Turn on the switch to configure the graphic items in this style. Turn off the switch to disable the configuration.

  Parameter	Description
  Scatter shape	Click the icon to the left of Scatter Shape to show or hide the vector scatter shape style for the current condition.
  Scatter radius	Click the icon to the left of Scatter Point Radius to show or hide the scatter point radius style for this condition.
  Scatter color	Click the icon to the left of Point Color to show or hide the vector point color style for this condition.
  Scatter outline	Click the icon to the left of Relative Offset to control the visibility of the outline for the vector scatter points under this condition, including its color and thickness value.

• Custom pop-up style: Configure custom pop-up styles for the vector scatter layer.

  Parameter	Description
  Pop-up switch	Turn on the switch to trigger a pop-up by click or mouseover.
  Display mode	Set how pop-ups are displayed. Options include Click and Mouseover.
  Relative offset	Set the horizontal and vertical offset of the pop-up in pixels (px). The value ranges from -1000 to 1000.
  Text style	Set the style for the text inside the pop-up, including font, font size, color, and weight.
  Show empty values	Turn on the switch. If the info field is missing or the info field object is empty, the pop-up displays "No data".
  Pop-up style	Padding: Set the padding between the pop-up text and the top, bottom, left, and right borders. Border style: Set the border radius, 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 the button's 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 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

   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	Triggers an event and returns data when the data response changes.
     When data request status changes	Triggers an event when the data request status changes. The callback parameter is the current status. For a data example, see the Data response result area on the Data Source tab in the widget configuration panel in the canvas editor.
     When a point is clicked	Triggers an event and returns data when a scatter point in the vector scatter layer is clicked.
     When an area outside the layer is clicked	Triggers an event and returns data when an area outside the layer is clicked.
     When the mouse enters an element	Triggers an event and returns data when the mouse pointer enters an area of the layer.
     When the mouse leaves an element	Triggers an event and returns data when the mouse pointer leaves an area of the layer.
     When the mouse moves over an element	Triggers an event and returns data when the mouse pointer moves over an area of the layer.
     Widget loaded	Triggered after a data API request is returned and processed by the filter. The processed data is returned in JSON format. For a data example, see the Data response result area on the Data Source tab in the widget configuration panel in the canvas editor.

   • Actions

     Action	Description
     Import data	Processes data in the widget's drawing format and redraws the widget without a new server-side data request. For a data example, see the Data response result area on the Data Source tab in the widget's configuration panel in the canvas editor.
     Request data	Requests server-side data again. Data from input data processing nodes or layer nodes is used as parameters. For example, if the vector scatter layer is configured with an API data source of https://api.test and the data passed to the Request data action is { id: '1'}, the final requested API 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. First, in the widget's Style panel, click Copy configuration to clipboard to get the widget configuration data. Then, change the field values for the corresponding styles in the data processing node on the blueprint editor page as needed.