Add visual components

The MapDashboard WebApp provides a rich library of visual components, including 7 categories such as layout, map, map sub-components, charts, basics, data, tools, etc. You can use simple interactive operations to create different types of components to create visual dashboard applications:

• Layout components
• Map components
• Map subcomponents
• Chart components
• Basic components
• Data components
• Tool components

Besides, the MapDashboard also supports users to develop new components and provides several custom component demos for you to try. For specific development methods of custom components, see: Component development guide.

Add and manage data

Some visual components (such as chart components, data components, and text lists, etc.) need to be associated with data for use. The MapDashboard provides a data panel to facilitate adding, viewing, and managing the data involved in these components:

• View data: Click "Data" in the left sidebar of the MapDashboard, and a list of data currently added to the dashboard will be listed for you to view. When sharing a complete dashboard, please make sure that the data permissions used by the components in the dashboard are public, otherwise the components cannot be displayed normally.
• Add data: Click "Data" in the left sidebar of the MapDashboard, and click "Add Data" to add data to the MapDashboard as the data source of components. The MapDashboard currently supports the following forms of data:
• Map layer: If the layer in the added map component has data records, you can add the data records in the layer

• Public data: public data in iPortal

• My data: the user's self data

• Service: supports iServer REST map service, iServer REST data service, iServer address matching service, and third-party services whose response data is GeoJSON/JSON format

• Time-series data/map: supports two types of time data, fixed time period and relative time period (recent time), the data response format supports GeoJSON/JSON, the response result should be an object, and the key of the object is unix timestamp.

• Manage data: For the data in the data list, you can perform the following operations:
• Delete: Click the "More" icon on the right side of the data item, select "Delete" to remove the added data from MapDashboard
• Rename: Click the "More" icon on the right side of the data item, and select "Rename" to rename the data
• Change data source: click on a data item, click on "URL" to re-select the data
• Periodical refresh: Click on the data item to turn on/off the periodical refresh switch. When turning on the periodical refresh function, you can set the refresh interval.
• Select dataset: For the data of the iSever REST data service type, click on the data item, you are allowed to re-select other datasets of the data service.

Basic properties of components

The following are the attribute settings common to all components:

• Move: Perform drag operation on the icon to change the position of the selected component in the dashboard
• Layout: Click on the icon to fill the dashboard with the selected component by spreading with height/width, full screen.
• Change the display order: Click the to adjust the display order of the current component on the dashboard. Supported options: bring to front, bring forward, send backward, send to back.
• Delete: Click the icon or press the "Delete" key to delete the current componen
• Copy and paste: Click the icon and click the "OK" button in the pop-up dialog box to complete the copy and paste of the component; you can also use the Ctrl+C/Ctrl+V shortcut key to copy and paste the component
• Resize the component: click and drag the anchor points around the currently selected component to set the size of the component. You can also set the size via the width and height of the component in the right-side panel

For unique attribute configuration items of each component, you can set them in the right-side panel of the component. For details, please refer to the documentation of each component.

Component interaction settings

The MapDashboard app provides a wealth of interactive operations for the components to realize the linkage response between the components and make your dashboard applications more vivid.

The objects of component interaction are the trigger component and the target component. The premise of the interactive operation is that the trigger component and the target component contain the same data or the data between the components can be associated through a certain field. The interactive components and interactive operations supported by MapDashboard are shown in Table 1.

The following introduces how to set the component interaction in a dashboard:

1. Select a trigger component, and in the interactive settings panel on the right, add a trigger;

2. After adding a trigger, click "Add Operation", select the target component, target operation, target data in turn, and click the "Add" button to complete the component interaction settings.

Table 1 Interactive components and interactive operations supported by MapDashboard

After adding the visual components, you can further set other useful settings for the dashboard.