Animated bubbles layer (v4.x)

Chart style

The animated bubbles layer is a sub-widget of the Basic Flat Map 4.0 that displays point data on a map as animated bubbles. You can configure its style, data, and interactions, including bubble size, animation effect, type, and coordinates.

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: Several predefined quick styles are available. Select a style that fits your scenario.

• General: Configure the general settings for the animated bubbles layer.

  Parameter	Description
  Visible Level	Set the visibility level of the animated bubbles layer. The layer is visible only within the specified range.
  Opacity	Set the opacity of the animated bubbles layer. Valid values: 0 to 100%. A larger value indicates higher opacity.

• Graphic: Configure the graphic settings for the animated bubbles layer, including the shape, radius, and color of the bubbles.

  Parameter	Description
  Bubble Radius	Set the radius of the animated bubbles. To configure mapped radii for different bubbles, see Size mapper instructions.
  Relative Offset	Set the horizontal and vertical offset of the animated bubble relative to its centroid. The value ranges from -100 to 100 px.
  Rotation	Set the rotation angle of the animated bubble relative to its centroid.
  Bubble Style	Click the or icon to the right of Bubble Style to add or delete a bubble style. Click the or icon to configure the page layout for multiple bubble styles. Click the icon to copy the configuration of the currently selected style and add a new bubble style with the same configuration. Shape: The icon style for animated bubbles. Select a built-in icon from the drop-down list, enter a URL to use a remote image, or click the icon to upload a local image. Color: Set the color of the bubble. To configure mapped colors for different bubbles, see Color mapper instructions. Size Ratio: Set the scaling ratio of the bubble relative to the icon generated based on the Bubble Radius setting. The value ranges from 0 to 1. Animation: Set the bubble's breathing animation. Type: Set the animation type for the bubble. Options include Rotate, Breathe, Fade In, Glow, and Diffusion. Speed: Set the running time of the animation. The value ranges from 500 to 5000 ms. Delay: Set the animation delay time. The value ranges from 0 to 1000 ms. Scaling Range: Set the scaling range for the breathing animation. The value ranges from 1 to 5. This is configurable when the animation type is set to Breathe. Opacity Range: Drag the slider to set the opacity range for the fade-in effect. The value ranges from 0 to 100. This is configurable when the animation type is set to Fade In. Glow Color: Set the glow color of the bubble. This is configurable when the animation type is set to Glow. Glow Intensity: Set the glow intensity of the bubble. The value ranges from 1 to 5. This is configurable when the animation type is set to Glow. Glow Radius: Set the glow radius of the bubble. The value ranges from 0 to 20. This is configurable when the animation type is set to Glow. Size Calibration: If the glowing edge of the image is not aligned correctly, adjust this parameter to calibrate the size. The value ranges from -1 to 1. This is configurable when the animation type is set to Glow. Diffusion Multiplier: Set the diffusion multiplier of the bubble relative to the icon generated based on the Bubble Radius setting. The value ranges from 1 to 5. This is configurable when the animation type is set to Diffusion.

• Label: Configure the label style for the animated bubbles layer.

  Parameter	Description
  Show Label	Turn on the switch to display labels in the animated bubbles layer.
  Display Mode	Set how labels are displayed. Options include Click and Hover.
  Relative Position	Set the position of the label relative to the bubble. Options include Left, Center, Right, Top, and Bottom.
  Relative Offset	Set the horizontal and vertical offset of the label. The value ranges from -100 to 100 px.
  Content Style	Set the style of the label content. 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 with the same configuration. Row Field: The field name for the row content. It 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 of the field prefix. 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 weight of 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: Set the style for the label's content outline, including the color and thickness. Click the icon to the left of Content Outline to show or hide the Content Outline section. Content Shadow: Set the shadow style for the label content, including the shadow's color, blur value, and x and y offsets. Click the icon to the left of Content Shadow to control the visibility of Content Shadow.
  Background Style	Set the background style parameters for the labels in the animated bubbles layer. Click the icon to the left of Background Style to show or hide the Background Style settings. 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, 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 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 Padding: Set the padding for the content on all four sides (top, bottom, left, and right).

• Interaction: Configure the interaction settings for the animated bubbles layer.

  Graphic Interaction: In preview or published mode, interaction styles appear when you click or hover over map elements. Click the icon to the left of Graphic Interaction to enable it.

  Parameter	Description
  Click State	Set the graphic and label styles for the click state. Use the icon to enable or disable the click state for Graphic Interaction. Graphic: Set the graphic style for the animated bubbles layer in the Click State, including Bubble Radius, Relative Offset, Rotation, and Bubble Style. Label: Set the label for the animated bubbles layer in the Click State, including Show Label, Relative Position, Relative Offset, Content Style, and Background Style.
  Hover State	Set the graphic and label styles for the hover state. Use the icon to enable or disable the hover state for Graphic Interaction. Graphic: Set the graphic style for the animated bubbles layer in the Hover State, including Bubble Radius, Relative Offset, Rotation, and Bubble Style. Label: Set the label for the animated bubbles layer in the Hover State, including Show Label, Relative Position, Relative Offset, Content Style, and Background Style.

• Condition: The condition for applying a style.

  Conditional Style: Click the or icon to add or delete a conditional style. Click the or icon to change the order of multiple conditional styles. Click the icon to copy the current conditional style configuration and add a new one with the same settings. For more information about style configurations, see Condition tree instructions.

  Graphic: Turn on the switch to configure the graphic settings for this style. If the switch is off, you cannot configure the graphic settings.

  Parameter	Description
  Bubble Radius	Set the radius of the animated bubbles. Use the icon to confirm whether to apply this style when the condition is met.
  Rotation	Set the rotation angle of the animated bubble relative to its centroid. Use the icon to confirm whether to apply this style when the condition is met.
  Bubble Style	Click the or icon to the right of Bubble Style to add or delete a bubble style. Click the or icon to configure the page layout of multiple bubble styles. Click the icon to copy the configuration of the currently selected style and add a new bubble style with the same configuration. Shape: The icon style for animated bubbles. Select a built-in icon from the drop-down list, enter a URL to use a remote image, or click the icon to upload a local image. Use the icon to confirm whether to apply this style when the condition is met. Color: Set the color of the bubble. Use the icon to confirm whether to apply this style when the condition is met. Size Ratio: Set the scaling ratio of the bubble relative to the icon generated based on the Bubble Radius setting. The value ranges from 0 to 1. Use the icon to confirm whether to apply this style when the condition is met. Animation: Set the bubble's breathing animation. Use the icon to confirm whether to apply this animation style when the condition is met. Type: Set the animation type for the bubble. Options include Rotate, Breathe, Fade In, Glow, and Diffusion. Speed: Set the running time of the animation. The value ranges from 500 to 5000 ms. Delay: Set the animation delay time. The value ranges from 0 to 1000 ms. Scaling Range: Set the scaling range for the breathing animation. The value ranges from 1 to 5. This is configurable when the animation type is set to Breathe. Opacity Range: Drag the slider to set the opacity range for the fade-in effect. The value ranges from 0 to 100. This is configurable when the animation type is set to Fade In. Glow Color: Set the glow color of the bubble. This is configurable when the animation type is set to Glow. Glow Intensity: Set the glow intensity of the bubble. The value ranges from 1 to 5. This is configurable when the animation type is set to Glow. Glow Radius: Set the glow radius of the bubble. The value ranges from 0 to 20. This is configurable when the animation type is set to Glow. Size Calibration: If the glowing edge of the image is not aligned correctly, adjust this parameter to calibrate the size. The value ranges from -1 to 1. This is configurable when the animation type is set to Glow. Diffusion Multiplier: Set the diffusion multiplier of the bubble relative to the icon generated based on the Bubble Radius setting. The value ranges from 1 to 5. This is configurable when the animation type is set to Diffusion.

• Custom Pop-up Style: Configure the custom pop-up style for the animated bubbles layer.

  Parameter	Description
  Pop-up Switch	Turn on the switch to trigger a pop-up on Click or Hover.
  Display Mode	Set how the pop-up is displayed. Options include 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 style for the text inside the pop-up, including font, font size, color, weight, and line height ratio.
  Show Null Values	Turn on the switch to display a pop-up with "No data" for objects that have no info field or an empty info field. When the switch is off, no pop-up appears for data without an info field.
  Pop-up Style	Padding: Set the padding for the pop-up text on all four sides. 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 blur 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. In the upper-left corner of the page, click the icon 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	This event is triggered when the data response changes. The event returns the updated data.
     When Data Request Status Changes	This event is triggered when the data request status changes, such as to success or failure. The event returns the data.
     When a Point Is Clicked	This event is triggered when a point in the layer is clicked. The event returns the data.
     When an Area Outside the Layer Is Clicked	This event is triggered when an area outside the layer is clicked. The event returns the data.
     When Mouse Enters an Element	This event is triggered when the mouse pointer enters an area of the layer. The event returns the data.
     When Mouse Leaves an Element	This event is triggered when the mouse pointer leaves an area of the layer. The event returns the data.
     When Mouse Moves Over an Element	This event is triggered when the mouse pointer moves over an area of the layer. The event returns the data.
     Component Loading Completed	This event is triggered after a filter processes the data returned from an API request. The event provides this processed data in JSON format. For a data example, see the Data Response 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 widget's drawing format to redraw the widget without re-requesting data from the server. For a data example, see the Data Response area on the Data Source tab in the widget's configuration pane in the canvas editor.
     Request Data	Re-requests data from the server, using data from an input data processing node or layer node as a parameter. For example, if the API data source for a basic scatter layer is 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 Widget Configuration	Dynamically updates the widget's style configuration. In the widget's Style panel, click Copy Configuration to Clipboard to get the widget configuration data. Then, in the data processing node on the blueprint editor page, change the field values for the corresponding styles as needed.