A grid heatmap is a subcomponent of a basic flat map. It supports independent styles and data configurations, including the size, color, edge width, longitude, and latitude of a grid. It can represent the distribution density of points in a geographic location in the form of grids. This article describes the meaning of each configuration items of grid heatmap.

Click Grid heatmap below Sub-widget management. In the configuration panel, configure the style and data of the grid heatmap.
Note If Mesh heatmap is not displayed in the Sub-component Management section, you have not added the Mesh heatmap sub-component. For more information, see Map container (v1.x version).

Parameter

  • 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 asset configurations.
  • Grid Size: The grid size of the grid heatmap. DataV calculates the number and position of all grids based on the specified grid size and data range.
  • Grading: The number of color gradations for the grid heatmap. Used in conjunction with the start color and end color configuration items, sets the color of each mesh based on the distribution of points.
  • Start Color: the color of the start mesh. For more information, see the color picker description. DataV calculates the grid where the points are located based on the longitude and latitude values of the points in the data. The grid with the largest number of points is the start grid.
  • End Color: the color of the end mesh. DataV calculates the grid where the points are located based on the longitude and latitude values of the points in the data. The grid with the smallest number of points is the end grid.
    Note The Start Color and End Color colors are displayed on the grid between the start grid and the end grid based on the number of levels that you specify.
  • Edge Width: the width of the grid border. The value ranges from 0 to 6. Unit: pixels.
  • Border Color: the color of the grid border.

The metadata of the filtering table.

You can download the sample JSON code in the preceding figure.

Table 1. Description
FieldDescription
lngThe longitude of the grid point.
latThe latitude of the grid point.
Table 2. Parameters
ParameterDescription
Controlled ModeIf you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data RequestAfter you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data SourceIn the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data FilterIf you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response ResultThe response to a data request. If the data source changes, you can click the Refresh icon icon next to Data Response Result to view the data response in real time.

Interaction

This widget does not support interaction events.

Configure interactions in Blueprint Editor

  1. In Canvas Editor, click the Add to Blueprint Editor icon on the right side of Mesh heatmap in the Basic Flat Map component list.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.
  3. In Blueprint Editor, click the Mesh heatmap component in the Import Nodes pane. You can view the configuration parameters of the Mesh heatmap on the canvas.
    • Event

      When the data interface request is completed: The event is thrown after the data interface request is returned and processed by the filter. The event also throws the processed JSON data. For more information, see Example data.

    • Policy Action
      ActionDescription
      Request Data InterfaceThis action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, density grid layer the API data source is http://api.test and the data transferred to the request data interface is { id: '1'}, the final request interface is http://api.test?id=1.
      Import dataAfter data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For specific data, see Data.
      DisplayA widget is shown without the need to specify parameters.
      HideA widget is hidden without the need to specify parameters.