Help Center> Data Lake Visualization> User Guide> Component Guide> Maps> Basic 2D Map
Updated on 2024-06-21 GMT+08:00
View PDF

Basic 2D Map

This section describes parameters of a basic 2D map.

Precautions

In the static data of the DLV map component, the longitude and latitude information is only for format demonstration. You need to provide your real-world longitude and latitude information when required.

Pattern

  • Size/Position
    • Size: width and height of the component. Unit: pixel.
    • Position: position where the component is located in the canvas. Unit: pixel.
  • Subcomponents

    The following subcomponents can be added to a basic 2D map: Flying Lines, Scatters, Advanced Scatter Layer, Drilldown, Heatmap Layer, Hover Text, and Carousel Video.

    The following operations can be performed on those subcomponents:

    • Adding subcomponents

      In the Pattern panel, click Add Subcomponent. In the displayed menu, select a subcomponent. After the subcomponent is added, the name of the added subcomponent is displayed under Add Subcomponent, for example, fly line.

    • Editing subcomponents

      After clicking a component, you can edit it.

    • Deleting subcomponents

      To delete a subcomponent, click .

  • Global Style
    • Map: to select a country from the drop-down list.
    • Map Center: location of the map center on the canvas.
    • Zoom Range: to set zooming ratio of the map center.
  • Filling
    • Fill Color: color and transparency.
    • Borderline: color and width of the borderline.
  • Label
    • Label: to show or hide the label by clicking or .
    • Font: fill color and transparency.
    • Color: font color of the label.
    • Font Size: font size of the label.
    • Font Width: font width of the label.
  • Visual Mapping
    • Visual Mapping: to show or hide virtual mapping by clicking or .
    • Mapping Type: to select a mapping type from the drop-down list. The value can be Segment-based or Continuous.
    • Direction: to select a mapping direction from the drop-down list. The value can be Vertical or Horizontal.
    • Width: width of the visual mapping.
    • Height: height of the visual mapping.
    • Left: distance between the visual mapping and the left side of the map component.
    • Bottom: distance between the visual mapping and the bottom of the map component.
    • Text: font color and font size of the text in the visual mapping.
  • Selected Style
    • Color: to set the color by clicking the color editor.
    • Data Value: to show or hide the data value by clicking or .
    • Data Name: to show or hide the data name by clicking or .
    • Text
      • Text Style: text color, font size, and font width.
      • Prompt Dialog Box: You can set Margin, Background Color, Customize Size, Border Color, and Border Width for a prompt dialog box.
  • Scale: After this function is enabled, when viewing or previewing the screen, you can zoom in or zoom out the map on the screen.
  • Move: After this function is enabled, when viewing or previewing the screen, you can move the map on the screen
  • Initial Value: initial value of the name field on the Interaction panel.

Data

The example data in the preceding figure is as follows:

[
  {
"name": "Beijing",
    "value": 900
  },
  {
"name": "Shanghai",
    "value": 1200
  },
  {
"name": "Tianjin",
    "value": 1200
  },
  {
"name": "Chongqing",
    "value": 1200
  },
  {
"name": "Shanxi",
    "value": 1400
  },
  {
"name": "Shaanxi",
    "value": 1800
  },
  {
"name": "Xinjiang",
    "value": 2400
  },
  {
"name": "Shandong",
    "value": 5000
  },
  {
"name": "Zhejiang",
    "value": 2500
  },
  {
"name": "Fujian",
    "value": 2600
  },
  {
"name": "Guangdong",
    "value": 2800
  },
  {
"name": "Guangxi",
    "value": 2900
  },
  {
"name": "Tibet",
    "value": 3300
  },
  {
"name": "Inner Mongolia",
    "value": 3300
  },
  {
"name": "Henan",
    "value": 3500
  },
  {
"name": "Jiangsu",
    "value": 3600
  },
  {
"name": "Hainan",
    "value": 3700
  },
  {
"name": "Taiwan",
    "value": 3800
  },
  {
"name": "Yunnan",
    "value": 3900
  },
  {
"name": "Guizhou",
    "value": 3900
  },
  {
"name": "Sichuan",
    "value": 4100
  },
  {
"name": "Hebei",
    "value": 4400
  },
  {
"name": "Jilin",
    "value": 4700
  },
  {
"name": "Anhui",
    "value": 5000
  },
  {
"name": "Hong Kong",
    "value": 5000
  },
  {
"name": "Macao",
    "value": 5100
  },
  {
"name": "Liaoning",
    "value": 5400
  },
  {
"name": "Gansu",
    "value": 5800
  },
  {
"name": "Qinghai",
    "value": 5800
  },
  {
"name": "Jiangxi",
    "value": 5800
  },
  {
"name": "Hubei",
    "value": 5300
  },
  {
"name": "Heilongjiang",
    "value": 5300
  },
  {
"name": "Hunan",
    "value": 5300
  },
  {
"name": "Ningxia",
    "value": 5300
  }
]
  • name: name of the area displayed on the map component.
  • value: value of the area. The value matches the Max. Value, Min. Value, and No Data in the Filling to determine the area color.

Interaction

For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.

Flying Lines

A flying line dynamically connects two geographical locations on the map.

  • Pattern
    • Flying Line Style
      • Flare Size: The unit is pixel.
      • Speed: speed at a flare flies.
      • Length: length of a flying line. The distance between the start point and the end point is one unit.
      • Track Color: color of the flight path.
      • Track Width: The unit is pixel.
      • Curvature: curvature of a flying line. When the curvature is 0, the flying line is a straight line.
      Figure 1 Flying line layer
    • Endpoint Style: to show or hide the start and end points. By default, the start and end points are hidden. After this function is enabled, you can set the start point style and end point style.
      • Start/End Point Style
        • Pattern: shape of an endpoint. Multiple patterns are available.
        • Inner Ring Color: color of the inner ring of the endpoint.
        • Outer Ring Color: color of the outer ring of the endpoint.
        • Animation Effect: animation effect of the endpoint.
        • Animation Range: range of the dynamic animation of an endpoint. This configuration is invalid when Animation Effect is set to No fill.
        • Animation Speed: speed of the animation.
        • Size: size of an endpoint.
  • Data
    • Field and Mapping: The data format contains the following fields. Set the field names in the data source to which each field is mapped. If the field names are left empty, the field names are the same as those in the data source to which each field is mapped.
      • from: longitude and latitude of the start point of a flying line. The longitude and latitude are separated by commas (,).
      • to: longitude and latitude of the end point of a flying line. The longitude and latitude are separated by commas (,).

      The data source is in JSON format. The following is an example:

      [
  {
    "from": "116.85059,31.69078",
    "to": "118.69629,36.20882"
  },
  {
    "from": "120.89355,37.09024",
    "to": "116.93848,31.61597"
  }
]
    • Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
    • Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
    • Preview Result: Click Preview Result to view the information about the selected data source. You can click Update Query to manually update the component data when the data source changes.
  • Interaction

    For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.

Scatters

Data information about geographical locations on the map can be displayed by scatters.

  • Pattern
    • Pattern: shape of a scatter. Multiple patterns are available.
    • Animation Effect: animation effect of scatters.
    • Size: size of a scatter.
    • Animation Range: A larger value leads to a wider animation range. This configuration is invalid when Animation Effect is set to No fill.
    • Animation Speed: A larger value leads to a faster animation speed. This configuration is invalid when Animation Effect is set to No fill.
    • Inner Ring Color: color of the inner ring of a scatter.
    • Outer Ring Color: color of the outer ring of a scatter.
    • Selected Style: style displayed when you move over a scatter during screen preview or viewing. After setting the selected style, you can click in the upper right corner of the page to view the selected style. Expand Selected Style and set the following parameters:

      Color: color of a scatter when you mouse over the scatter.

      Data Value: to show or hide the value of the name field.

      Data Name: to show or hide the data name.

      Text Style: color, font size, and font width of the text displayed when you mouse over a scatter.

  • Data
    • Field and Mapping: The data format contains the following fields. Set the field names in the data source to which each field is mapped. If the field names are left empty, the field names are the same as those in the data source to which each field is mapped.
      • lon: longitude of a scatter.
      • lat: latitude of a scatter.
      • name: name of the geographical location represented by a scatter.
      • value: value of a scatter. The value and the scatter size in the style determine the scatter size together. A larger value leads to a larger scatter.
    • Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
    • Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
    • Preview Result: Click Preview Result to view the information about the selected data source. You can click Update Query to manually update the component data when the data source changes.
  • Interaction

    For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.

Advanced Scatter Layer

Compared with the scatters on the map, the advanced scatters support the mapping of data values to the scatter size and the customization of scatter icons.

  • Pattern
    • Pattern: shape of a scatter. Multiple patterns are available.
    • Data Mapping: If this option is selected, the scatter color and size vary according to the data volume. A larger scatter indicates a larger data volume. Min. Value, Max. Value, and No Data under Color and Size are customized. The unit of the scatter size is pixel.
    • Animation Effect: animation effect of scatters.
    • Animation Range: A larger value leads to a wider animation range.
    • Animation Speed: A larger value leads to a faster animation speed.
    • Label: If this option is selected, the label is displayed at the scatter. Set the label as follows:

      Mapping Field: to set this parameter to a field name on the Data panel instead of the field name of the source data. When Label is selected, the value of the selected field is displayed at the scatter.

      Font: label font.

      Color: label color.

      Font Size: font size of the label.

      Font Width: font width of the label.

      Position: position of the label relative to a scatter.

      Horizontal Shift: horizontal offset to the right of the configured position. The unit is pixel.

      Vertical Shift: vertical offset to the bottom of the configured position. The unit is pixel.

    • Selected Style: style displayed when you move over a scatter during screen preview or viewing. After setting the selected style, you can click in the upper right corner of the page to view the selected style. Expand Selected Style and set the following parameters:

      Color: color of a scatter when you mouse over the scatter.

      Data Value: to show or hide the value of the name field.

      Data Name: to show or hide the data name.

      Text Style: color, font size, and font width of the text displayed when you mouse over a scatter.

    • Initial Value: initial value of the name field on the Interaction panel.
  • Data
    • Field and Mapping: The data format contains the following fields. Set the field names in the data source to which each field is mapped. If the field names are left empty, the field names are the same as those in the data source to which each field is mapped.
      • lon: longitude of a scatter.
      • lat: latitude of a scatter.
      • name: name of the geographical location represented by a scatter.
      • value: value of a scatter. The value and the scatter size in the style determine the scatter size together. A larger value leads to a larger scatter.
      • type: Click to add a series value. You can select a value of the type field as a series and set the display style of the scatter of the series. If the type field is set to other values, the corresponding scatter is displayed in the default style of the type field.

        For example, if the type of a scatter is type":"snack", click to set the series value to snack.

      • img: path of the custom scatter icon. You can set this parameter to the path of the image stored in OBS or the public network image path. If this parameter is not set, the default icon is used.
    • Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
    • Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
    • Preview Result: Click Preview Result to view the information about the selected data source. You can click Update Query to manually update the component data when the data source changes.
  • Interaction

    Click and Mouseover are supported. For details about how to use component interaction, see Configuring Component Interaction.

Drilldown

Data information about geographical locations on the map can be displayed by drilldown.

  • Pattern
    • Color: color of the target area.
    • Transparency: transparency of the target area.
    • Borderline
      • Color: borderline color of the target area.
      • Width: borderline width of the target area.
      • Line Style: border line style of the target area.
      • Shadow Color: color of the borderline shadow of the target area.
    • Label: to show or hide a label. You can set the font, color, font size, and font width of the label text.
    • Zoom Range: zooming ratio of the target area.
  • Data
    • Field and Mapping: The data format contains the following field. Set the field name in the data source to which each field is mapped. If the field name is left empty, the field name is the same as that in the data source to which the field is mapped.
      • name: name of the target region.
    • Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
    • Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
    • Preview Result: Click Preview Result to view the information about the selected data source. You can click Update Query to manually update the component data when the data source changes.
  • Interaction

    For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.

Heatmap Layer

Data information about geographical locations on the map can be displayed by heapmap.

  • Pattern
    • Min. transparency: minimum transparency of heat points.
    • Max. transparency: maximum transparency of heat points.
    • Fuzzy Radius: fuzzy radius of a heat point.
    • Radius: radius of a heat point.
    • Color: You can set five color bands from color 1 to color 5 for heat points from outside to inside.
  • Data

    • Field and Mapping: The data format contains the following fields. Set the field names in the data source to which each field is mapped. If the field names are left empty, the field names are the same as those in the data source to which each field is mapped.
      • lat: latitude of an area.
      • lon: longitude of an area.
      • value: value of the heatmap point corresponding to the region.
    • Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
    • Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
    • Preview Result: Click Preview Result to view the information about the selected data source. You can click Update Query to manually update the component data when the data source changes.
  • Interaction

    For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.

Hover Text

Data information about geographical locations on the map can be displayed by hover text.

  • Pattern
    • Borderline
      • Pattern: borderline style of the hover text box.
      • Width: width of the borderline of the hover text box.
    • Text Style: font, font size, and font width of the hover text. The text displayed in the hover text box is the value of the text field on the Data panel.
    • Constant-Speed Play: After this function is enabled, the hover text will be played at a fixed speed based on the following settings: This function is disabled by default.
      • Hover Boxes: number of hover text boxes displayed each time the constant-speed play is enabled.
      • Appearance Duration: time spent before the hover text appears. Unit: microsecond.
      • Stay Duration: period when the hover text stays on the map. Unit: microsecond.
      • Disappearance Duration: time spent before the hover disappears.
  • Data

    • Field and Mapping: The data format contains the following fields. Set the field names in the data source to which each field is mapped. If the field names are left empty, the field names are the same as those in the data source to which each field is mapped.
      • lat: latitude of an area.
      • lon: longitude of an area.
      • text: hover text above an area.
    • Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
    • Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
    • Preview Result: Click Preview Result to view the information about the selected data source. You can click Update Query to manually update the component data when the data source changes.
  • Interaction

    For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.

Carousel Video

A carousel video subcomponent plays different geographical locations in turn. The video format can be MP4 or FLV.

  • Pattern
    • Mute: to enable or disable the mute mode.
    • Control Bar: to show or hide the progress bar in the video player.
    • Adjust Volume: to adjust the video volume.
    • Custom: to enable or disable the custom playback time.
    • Play Duration: duration when a video is played. Unit: microsecond.
    • Width: width of the video player. Unit: pixel.
    • Background Color: background color of the video player.
    • Dot Color: color of the dot representing a geographic location on the map.
    • Borderline: to set the pattern, width, and color of the borderline of the video player.
    • Text Style: to set the color, font, font size, and font width of the text displayed over the video player. The displayed text is the value of the text field on the Data panel.
  • Data

    • Field and Mapping: The data format contains the following fields. Set the field names in the data source to which each field is mapped. If the field names are left empty, the field names are the same as those in the data source to which each field is mapped.
      • lat: latitude of an area.
      • lon: longitude of an area.
      • video: video address. Video addresses stored in OBS or public network video addresses are supported. The video format can be MP4 and FLV.
      • text: title displayed over the video player.
    • Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
    • Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
    • Preview Result: Click Preview Result to view the information about the selected data source. You can click Update Query to manually update the component data when the data source changes.
  • Interaction

    For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.

Parent topic: Maps