Component interaction

MapDashboard WebApp provides components with a wealth of interactive operations to link different components. Thus you can observe and understand data in different ways.

The objects of component interaction can be classified into trigger component and target component. In the trigger component, you can build the interaction between components by setting triggers. In other words, When an event is triggered in the trigger component, such as mouse clicking, data switching, etc., the target component will perform the corresponding target operation, such as highlighting elements in the map component, switching data in the chart component, etc. we'll cover those later as well.

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.

Component interaction settings

In the dashboard, follow these steps to set the component interactions:

1. Select trigger component and add trigger in the right hand interaction panel.
2. Click 'Add Operation', and select 'Target', 'Target Operation' and 'Target Data Type' in turn, the click 'OK' to complete the interaction setting.

Some triggers also need to set 'Associated Fields', including 'Trigger Layer Field' and 'Target Data Field'. The former refers to the field in the data source of trigger component, and the latter refers to the field in the data source of target component. The trigger component and the target component will be associated through these two fields.

After setting, click element in the trigger component to get the corresponding response in the target component. It supports adding multiple different triggers in one component, as well as setting multiple target actions for one trigger.

Now we'll introduce triggers and target operations in it.

Trigger

The trigger acts as an event listener, when a specific event occurs in the trigger component, the target component will perform the corresponding action. In MapDashboard WebApp, there are seven types of triggers. Here we introduce these triggers and their usage scenarios.

• Feature Selection: Select a feature in the map and trigger the corresponding operation in other components, such as highlight the corresponding data in the chart.
• Click: Click the mouse and trigger the corresponding operation in other components. For example, if you click the text component, it can jump to another dashboard page.
• Bounds Change: Resize the display range of the map, and trigger the corresponding operation. For example, if you resize the map range, the chart will filter out data outside that range.
• Data Switch: Switch the data in the component, and trigger the corresponding operation in other components.  For example, switch the data in the data switcher component, it will switch the data source in the chart.
• Record Selection: Select a data item, and trigger the corresponding operation in other components. For example, select a data item in the chart, the corresponding feature will be highlighted in the map.
• Slider Switch: Switch the slide page, and trigger the corresponding operation in other components. For example, switching the slide page, and it will change the map range or the text content.
• Date Change: Change the date range, and trigger the corresponding operation in other components. For example, adjusting the start and end dates in the range picker component, it will change the time range of the data displaying in the chart.

Target Operation

When a specific event occurred in the trigger component, the target component will perform corresponding operation, and this operation can be called target operation. In MapDashboard, There are eight types of target operations. Here we introduce target operations and their usage scenarios.

• Highlight Feature: Highlights the specified feature in the map. For example, if you select a data item in the chart, the corresponding feature will be highlighted in the map.
• Add to Map: Add selected data item to the map. For example, if you select a data item in the chart, it can be displayed in the map. This operation does not change the data used in the map.
• Zoom to Map: Resize the map to a certain range or a selected feature. For example, if you select a data item in the chart, the map will zoom to the corresponding feature.
• Switch Data: Switch the data source used in the component. For example, if you switch the data item in the data switching component, the chart will switch to the corresponding data source.
• Append Data: Append data in the map that specifically used time data. For example, if you select a time node in the time line component, there will append corresponding time data to the map. This operation does not change the data used in the map.
• Display Data: Display data in a component. For example, if you select a data item in a chart, the item can be displayed in the text component.
• Filter Data: Filter data in a component. For example,  if you change the range of the map in the map component, the chart will filter out data outside the map range.
• Switch Href: Switch the link address in the text component, and the field of the target data must be hyperlink address. For example, if you select a data item in the chart, the link address can be changed in the text component. Thus you can jump to the new address by click the text.

 Interactive components

Here are the interactive components and interactive operations supported by MapDashboard.

Table 1 Interactive components and interactive operations supported by MapDashboard

Note: When you use map made in MapStudio WebApp in map component, the point layer using 3D Heat Map, OD, and Graph Map style does not support the following target operations: Highlight feature, Add to map, Zoom to map, Switch data, and Append data.