An InfoWindow layer is a component of the 3D globe widget. It allows you to display geographical details in your DataV project. You can configure the style and data of an info window, including the size, color, content, longitude, and latitude. This topic describes the configuration items of the InfoWindow layer.

Click InfoWindow Layer under Components. The Settings tab of InfoWindow Layer appears.
Note If Components does not contain InfoWindow Layer, add the InfoWindow Layer component. For more information, see Map Container.

Settings

settings
  • Show: Turn on the switch to enable the infoWindow layer display.
  • Scale: the distance between the InfoWindow layer and the globe.
  • InfoWindow Options

    Size: the size of the InfoWindow layer.

Data

data

Sample code in the preceding figure:

[
  {
    "type": "dom",
    "id": 1,
    "latlngs": {
      "lng": -180.1904296,
      "lat": 7.29701788
    },
    "content": {
      "title": "NO.2",
      "content": "This is the content of an info window.",
      "width": 900,
      "height": 350,
      "paddingLeft": 90,
      "paddingRight": 60,
      "paddingTop": 110,
      "titleFontSize": 45,
      "titleColor": "#fbf320",
      "contentColor": "#000",
      "contentFontSize": 40,
      "fontFamily": "Microsoft Yahei, serif",
      "bgImgUrl": "https://img.alicdn.com/tps/TB1bymmOFXXXXaxXpXXXXXXXXXX-2201-753.png"
    }
  },
  {
    "type": "dom",
    "id": 2,
    "latlngs": {
      "lng": -20.83203125,
      "lat": 13.94426488
    },
    "content": {
      "title": "NO.1",
      "content": "This is the content of an info window.",
      "width": 900,
      "height": 350,
      "paddingLeft": 90,
      "paddingRight": 60,
      "paddingTop": 110,
      "titleFontSize": 45,
      "titleColor": "#fbf320",
      "contentColor": "#000",
      "contentFontSize": 40,
      "fontFamily": "Microsoft Yahei, serif",
      "bgImgUrl": "https://img.alicdn.com/tps/TB1bymmOFXXXXaxXpXXXXXXXXXX-2201-753.png"
    }
  }
]
Table 1. Parameters
Parameter Description
type The type of an info window.
id The ID of an info window.
latlngs The latitude and longitude where an info window is located.
content The information displayed in an info window, which contains the following fields:
  • title: the title of an info window.
  • content: the content of an info window.
  • width: the width of an info window. Unit: pixels.
  • height: the height of an info window. Unit: pixels.
  • paddingLeft: the space between the content and the left border of an info window. Unit: pixels.
  • paddingRight: the space between the content and the right border of an info window. Unit: pixels.
  • paddingTop: the space between the content and the top border of an info window. Unit: pixels.
  • titleFontSize: the font size of the title.
  • titleColor: the color of the title.
  • contentColor: the color of the content.
  • contentFontSize: the font size of the content.
  • fontFamily: the font of the title and content. Specify a font that is installed on your operating system. If the specified font is not installed, the default font is used.
  • bgImgUrl: the URL of the background image.
Table 2. Parameters
Parameter Description
Controlled Mode If 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 Request After 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 Source In 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 widget data.
Data Filter If 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 Result The 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 component does not support interaction events.

Interaction configuration in the blueprint editor

  1. In the canvas editor of the 3D globe widget, click the Add to Blueprint Editor icon next to InfoWindow Layer under Components.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.
  3. In the blueprint editor, click InfoWindow Layer in the Added Nodes pane. You can configure parameters of the InfoWindow layer on the canvas.InfoWindow layer parameters in the blueprint editor
    • Event

      On Completion of InfoWindow Request: After data of the InfoWindow layer is returned by the API and processed by filters, this event is triggered to pass JSON-format data. For more information, see Example data.

      On Error of InfoWindow Request: When a data interface request fails (the request may be caused by network problems or interface errors, etc.), the event is returned and processed by the filter, and the processed JSON-formatted data is also thrown. For more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor..

    • Action
      Action Description
      Request InfoWindow This action takes parameters passed by an upstream data processing node or widget and requests data from the server. For example, the InfoWindow layer uses the API data source http://api.test, and the data passed to the Request InfoWindow action is { id: '1'}. As a result, the http://api.test? id=1 API is called to request data.
      Import InfoWindow This action imports data from the API to render the InfoWindow layer and dose not request data from the server. For more information, see Example data.
      Show This action shows the component and does not need parameter input.
      Hide This action hides the component and does not need parameter input.