Icon scatter layer (v2.x)

Configuration

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.

• Visible levels: Sets the zoom levels at which the icon scatter layer is visible.

• Icon settings: Configures the image path, image size, relative position, and offset for the icons.

  Parameter	Description
  Image path	In the Image path area To remove an image, hover over it and click Delete. To add a new scatter icon, click the image area or drag a local image file into it. Hover over the image and click Change to upload a new local image. You can also enter an image URL to use an image from a remote server as the scatter icon.
  Image size	Sets the width and height of the icon.
  Relative position	Sets the icon's position relative to the data point. Options include Bottom and Center.
  Offset	Sets the horizontal and vertical offset of the icon.

• Series settings: Click the or icon to add or remove a series. Click the or icon to arrange the series. Click the icon to duplicate the selected series configuration.

  Type Filter Value: Corresponds to the type field in the data source. Use this value to configure the style of scatter points based on their type value.

  Configure the icon style for each series type. For more information, see the Icon Configuration parameter in Configuration.

• Label: A text annotation for a data point. Click the icon to the left of Label to show or hide the label.

  Parameter	Description
  Display field	This setting is used with a data source from the data panel and must match a field name in the geographic data. For example, if set to name, the scatter plot labels on the visualization application display the values from the name field.
  Text style	Sets the font family, weight, size, color, and shadow color for the label text. To modify the text color, see Color Picker Guide.
  Relative position	The position of the label text relative to the data point. Options include Center, Top, Bottom, Left, and Right.
  Offset	Sets the horizontal and vertical offset of the text label, in pixels (px).

• Tooltip: Configures the style of the tooltip that appears when you click an icon during preview or after publishing. Click the icon on the left to show or hide the tooltip.

  Note

  To enable the pop-up feature, you must first set the info field.

  • info field: If enabled, the info field, which supports HTML tags, is used as the pop-up content. If disabled, the system falls back to using the content of the name and value fields.

  • Event type: Choose whether the tooltip is triggered by a Click or Mouse Enter event.

  • Configuration options: Choose between Parent container default and Custom configuration for the tooltip style.

    • Parent container default: The system's default style.

    • Custom configuration: Customize the tooltip's text style, line height ratio, border radius, and other parameters.

      Parameter	Description
      Text style	Sets the font family, weight, size, and color of the text inside the tooltip. To modify the color, see Color Picker Guide.
      Line height ratio	Sets the line height ratio for the tooltip content.
      Border radius	Sets the border radius of the tooltip. A larger value creates more rounded corners.
      Margin	Sets the margin between the text and the four edges of the tooltip.
      Background color	Sets the background color of the tooltip.
      Close button	Sets the color and size of the close button, as well as its distance from the top and right edges.

• Interaction settings

  Hover style: Sets the scaling factor of an icon relative to its original size when a user hovers over it. Click the icon to enable or disable the hover interaction.

Data

Interaction

Blueprint Editor interaction configuration

1. On the Canvas Editor page, in the sub-component management list for the basic flat map, click the icon to the right of the icon scatter layer.

2. Click the icon in the upper-left corner of the page.

3. In the Blueprint Editor, click the icon scatter layer component in the imported nodes panel. The configuration parameters for the icon scatter layer appear on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When data request is successful	Triggered after a successful data request, once the data has been processed by any data filters. The event data is the processed JSON-formatted data. For a data example, see the data response section on the Data tab of the component's configuration panel in the Canvas Editor.
     When data request fails	Triggered when a data request fails, for example, due to a network issue or an API error. The event data contains the error information. For a data example, see the data response section on the Data tab of the component's configuration panel in the Canvas Editor.
     When point is clicked	Triggered when a user clicks a point in the icon scatter layer. The event data includes the longitude and latitude of that point.
     When mouse enters	Triggered when the mouse pointer enters a point in the icon scatter layer. The event data includes the longitude and latitude of that point.

   • Actions

     Action	Description
     Request data API	Re-requests server-side data, using the data output from an upstream data processing node or layer node as parameters. For example, if an icon scatter layer is configured with an API data source of http://api.test and the data passed to the Request Data API action is { id: '1'}, the final request URL is http://api.test?id=1.
     Import data	Imports data directly into the component to redraw the layer, bypassing a new server request. The data must be in the component's expected format. For a data example, see the data response section on the Data tab of the component's configuration panel in the Canvas Editor.
     Show	Shows the component. No parameters are required.
     Hide	Hides the component. No parameters are required.