This topic describes how to configure a choropleth layer on a map.

Prerequisites

The choropleth layer child widget is added to a map and the corresponding widget parameters are set. For more information, see Map container.

Configure the configuration plane



  • Labels
    • Label Field: Set this field to the name of an area.
    • Color: Set the label color. For more information, see Color picker.
    • Shadow Color: Set the shadow color of the label. For more information, see Color picker.
    • Font Family: Select a font for the label from the drop-down list.
      Note Only a font that is installed in your system can be displayed accurately. If the selected font is not installed in your system, the default font is displayed.
    • Font Size: Click + or -, or enter a font size value to set the font size for the label.
  • Fill Color: Set the values for MinValue Color, MaxValue Color, and NoData Color. For more information, see Color picker.
  • Outline Options: Set the color and width of the outline of the choropleth layer.
  • Interactive Options
    • Hover: Hide or show the hover effect by clicking the Eye icon.
    • Hover Color: Set the color that is displayed when the pointer is positioned above a target area. For more information, see Color picker. Note that this effect is displayed only when you preview the layer or after you release the layer.
    • Click FitBounds: Select this check box to enable the focus effect for the area. After you enable this effect, the system automatically focuses on the area that you have clicked. The line focus effect is displayed only when you preview the layer or after you release the layer.
    • FitBounds Padding: Drag the slider or enter a value to adjust the displayed area when you click an area. Set the fitbounds padding of areas by dragging the slider or entering a value. The padding setting is displayed only when you preview the layer or after you release the layer.
    • Callback ID: Set the field for associating data between widgets.
      Note The callback ID function is also added to the Interaction plane where you can set multiple fields. Additionally, this function will be removed from the Configuration plane. Therefore, we recommend that you upgrade the widget to the latest version.

Configure the data plane

  • Geographical Boundaries: To use the GeoJSON-based boundary data in DataV, follow these steps:
    1. Click Choropleth Layer.
    2. On the Data tab, click Geographical Boundaries.
    3. Select API from the Data Source Type drop-down list.
    4. Paste the GeoJSON API to the URL area, as shown in the following figure.

    5. Publish the project to view the effect.
    If you encounter label text offset during the configuration, you can:
    • Check whether you are using the choropleth layer V0.2.4 or a later version. If you are using an earlier version, delete this layer, and then add a new one.
    • Check whether the data you obtained has been updated. If yes, use the latest data.
    • Modify the parameters:
      1. Use geojson.io to add the customLabelPosition parameter to the GeoJSON API.
        Add the customLabelPosition attribute, such as "customLabelPosition": [112.500801,22.927694], to the properties parameter in the area where label text offset occurs.

      2. Save the modified API to your server.
      3. Click Choropleth Layer.
      4. On the Data tab, click Geographical Boundaries.
      5. Select API from the Data Source Type drop-down list.
      6. Paste the JSON API to the URL area.
  • Mapping Data: Customize the choropleth layer style by configuring the mapping data. Data in the choropleth layer can be rendered first.
    1. Click Choropleth Layer.
    2. On the Data tab, click Mapping Data.
    3. Select Static Data from the Data Source Type drop-down list, as shown in the following figure.

      • area_id: The postal code of an area.
      • value: The value of an area. The color of an area is determined by the MinValue Color and MaxValue Color fields on the Configuration tab.
        Note The color gradient can be calculated according to the value field on the Data tab.
      • info: Optional. The information in the pop-up window.
    4. Set the values for the color (line color), weight (line weight), dashArray (dotted line), and fillColor (fill color) fields.

      The corresponding areas on the map are rendered according to the values of these fields. The value of the fillColor field can be in red, #fff000, and rgba(0,256,0,0.5) format.

Configure the interaction plane

Trigger Event When Area Is Clicked: Select Enable to trigger an event when an area is clicked. Specifically, when the target area is clicked, a request is triggered and data of different areas is loaded.

When you click an area, the value of area_id is displayed automatically. For more information, see Configure callback IDs for ticker boards.