The region drill-down heat layer is a component of the basic flat map. You can configure the settings, data, and interaction for this layer, including labels, border options, interactive effects, and location information. The region drill-down heat layer can be used as the choropleth layer for provinces, direct-administered municipalities, and prefecture-level cities. This topic describes configurations of the region drill-down heat layer and how to use components of this layer.

For more information about how to add a region drill-down heat layer and configure its parameters, see Configure a basic flat map.

Settings

Configure the Settings tab
  • Label
    • Label Field: the label field of the drill-down area. The name must match the value of Field on the Data tab.
    • Color: the color of the label. For more information about how to modify the label color, see Color picker.
    • Shadow Color: the shadow color of the label.
    • Font Family: the font of the label.
      Note Only fonts that are installed on the system are displayed. If the selected font is not installed, the default font is displayed.
    • Font Size: the font size of the label.
  • Fill Color: the colors of areas, which correspond to the values of the Minimum, Maximum, and No Data parameters.
  • Border Options: the color, thickness, and line type of the area borders.
  • Interactive Configuration
    • Hover: the color that highlights the area where the pointer is positioned above. This effect is displayed only when you preview the layer or after you publish the layer.
    • Zoom Range Ratio: the zoom intensity when an area is clicked.
    • Double-Click Callback ID: the parameter variable for associating data between widgets. The callback ID does not have to correspond to any field in the static JSON data. By default, the callback ID is the adcode value of the area that is double-clicked. For example, if you double-click Zhejiang Province, 330000 will be returned.
      Note This function has been added to the Interaction tab, and will be removed from the Settings tab. We recommend that you keep DataV up to date. The latest version of DataV allows you to configure multiple fields on the Interaction tab.
    • Click Callback ID: the parameter variable for associating data between widgets. The callback ID must correspond to one field in the static JSON data.
      Note This function has been added to the Interaction tab, and will be removed from the Settings tab. We recommend that you keep DataV up to date. The latest version of DataV allows you to configure multiple fields on the Interaction tab.

Data

  • Default Area
    1. On the Data tab, select Static Data from the Data Source Type drop-down list.
      By default, the region drill-down heat layer displays the choropleth layer data of all provinces and direct-administered municipalities in China, as shown in the following figure.Data of the default area in the region drill-down heat layer
      Note For more information about area adcodes, see Mapping table of the area adcode and longitude and latitude.
    2. If you need to use the prefecture-level choropleth layer, modify the value of adcode.
      For example, you can obtain the adcode value of Zhejiang Province (330000) by referring to Mapping table of the area adcode and longitude and latitude. The region drill-down heat layer allows you to locate all the prefecture-level cities in Zhejiang Province and can be used as the prefecture-level choropleth layer. You can use this example as a reference to configure choropleth layer data for other provinces and direct-administered municipalities.Drill-down heat layer data of Zhejiang ProvinceThe sample JSON code in the preceding figure is as follows:
      [
        {
          "adcode": 330000
        }
      ]
  • Custom Area includes two fields: area_tree and area_topo_json.Custom Area
    By default, DataV displays the URLs of all provinces and direct-administered municipalities in China in the following hierarchical relationship: Country > Province or direct-administered municipality > Prefecture-level city > District or county, as shown in the following example:
    [
      {
        "area_tree": "https://sh-conf.oss-cn-shanghai.aliyuncs.com/map/area_drill/area_tree.json",
        "area_topo_json": "https://sh-conf.oss-cn-shanghai.aliyuncs.com/map/area_drill/china.topo.new.json"
      }
    ]

    You can also modify the default data to customize drill-down areas. The following example shows you how to configure custom data for Zhejiang Province:

    1. Reference Default Area and modify the value of adcode to 330000 in the default static JSON data.Configure custom data
    2. Modify the area_tree.json file of the default country level to extract data of Zhejiang Province. Configure the file in the following hierarchical relationship: Province or direct-administered municipality > Prefecture-level city > District or county. The following figure shows a part of data in the area_tree.json file.The area_tree.json file of the country level
      Notice
      • If you have defined a hierarchical relationship, you can customize the value of area_id. The value of area_id must be unique.
      • The large volume of returned JSON data cannot be configured as static data and can only be accessed through a URL.
      Click Here to download the complete area_tree.json file that is shown in the preceding figure.
    3. Obtain the URL of the area_tree.json file.
      We recommend that you use Alibaba Cloud Object Storage Service (OSS) to obtain the URL of the area_tree.json file.
      Notice This URL must use HTTPS and a domain name with an SSL certificate.
    4. Obtain the topo_json file.
      1. Click Here to download the JSON file of Zhejiang Province.
      2. Go to geojson.io, choose Open > File in the upper-left corner of the page to open the JSON file. The data of Zhejiang Province is automatically pasted into the edit box on the right.
      3. Choose Save > TopoJSON in the upper-left corner of the page to obtain the topo_json file of Zhejiang Province.Obtain the topo_json file of Zhejiang Province
        Note Click http://turfjs.org/docs#union, reference the union method to combine the data of two neighboring areas, and obtain the new GeoJSON border data.
      4. As shown in the following figure, open the topo_json file of Zhejiang Province. Add the adcode of Zhejiang Province (330000) at the beginning of the data. Separate 330000 and the data with a colon (:) and enclose 330000 and the data with braces ({}) to obtain the final topo_json file of Zhejiang Province.topo_json file

        The preceding final topo_json file only contains the data of prefecture-level cities in Zhejiang Province. If you want to drill down to the district or county level, more configurations are required for the topo_json file. The following example shows you how to configure the data to drill down to the district or county level in Hangzhou.

      5. Click Here to download the JSON file of Hangzhou and reference step b and step c to obtain the topo_json file of Hangzhou.
      6. As shown in the following figure, open the topo_json file of Hangzhou. Add the adcode of Hangzhou (330100) at the beginning of the data. Separate 330100 and the data with a colon (:) and enclose 330100 and the data with braces ({}).The topo_json file of Hangzhou
      7. Copy the new data of Hangzhou, and paste it after the final topo_json data of Zhejiang Province. Separate the data of Zhejiang Province and Hangzhou with a comma (,). Use a pair of braces ({}) to enclose an object.Add the topo_json file of Hangzhou

        Click Here to download the final topo_json file.

    5. Obtain the URL of the final topo_json file.

      Repeat step iii to obtain the URL of the final topo_json file.

    6. Configure the Custom Area section of the region drill-down heat layer.
      Replace the default URLs in the Custom Area section with the two URLs obtained in step iii and step v and click View Response Result to view the effect on the map.Configure the Custom Area section of the region drill-down heat layerThe sample code in the preceding figure is as follows:
      [
        {
          "area_tree": "https://datav-map-test.oss-cn-hangzhou.aliyuncs.com/zhejiang_area_tree.json",
          "area_topo_json": "https://datav-map-test.oss-cn-hangzhou.aliyuncs.com/zhejiang.topojson"
        }
      ]
      The following figure shows the preview. You can double-click Hangzhou on the map of Zhejiang Province to go to the map of Hangzhou. You can double-click any blank space to return to the map of Zhejiang Province.Preview
      Notice If the custom drill-down area is not displayed, the URLs may have cross-region errors. You can use OSS cross-region configuration to solve this problem. For more information, see Configure CORS rules.
    7. If the preview works as expected, you can click Publish to publish the project.

    You can use the same way to configure the drill-down area data for other provinces and prefecture-level cities. The hierarchical relationship is Country > Province or direct-administered municipality > Prefecture-level city > District or county. The upper level must contain the area data such as adcode and location data of the lower level before you can drill down.

  • For more information about Mapping Data, see Configure a choropleth layer.

Interaction

  • On Click of Region:

    Select the Enable check box to enable interactions among components. Components of Region Drill-Down Heat Layer support interactive configurations. When the target area is clicked, a request is triggered and data of the area is loaded.

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

  • On Double Click of Region:

    Select the Enable check box to enable interactions among components. Components of Region Drill-Down Heat Layer support interactive configurations. When the target area is double-clicked, a request is triggered and data of the area is loaded.

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

    Note The callback ID does not have to correspond to any field in the static JSON data. By default, the callback ID is the adcode value of the area that is double-clicked. For example, if you double-click Zhejiang Province, 330000 will be returned.