MapDashboard provides rich interactive capabilities, supporting linkages between components, data, and pages, enabling users to explore and analyze data from multiple dimensions and dynamically.
The interaction flow consists of four core elements: trigger component, trigger, target, and target operation. Its working flow can be summarized as: users performs an operation on the trigger component (activating the trigger), which then drives the target to perform the corresponding target operation.
- Trigger Component: The component that initiates the interactive behavior and is the object directly operated by the user (e.g., a clicked map, a filtered chart).
- Trigger: The condition or event that triggers the interaction. When a specific event (such as a click, selection, etc.) occurs on the trigger component, the trigger is activated, thereby driving the target to complete the corresponding target operation.
- Target: The object that receives the interactive instruction and responds accordingly. It can be the trigger component itself, other components, data, or the current page, enabling various linkage effects:
- Component: Enables linkage between a single component and another single component, such as clicking on a map to highlight in a chart. Note: The trigger component and the target component must contain the same data or their data must be linked through a common field.
- Data: Enables data-driven updates, such as filtering data in a chart, which causes all components bound to that data to be filtered accordingly.
- Page: Enables page switching or resetting interactions on the current page, such as clicking on a text element to clear all triggered interactive states in the current page.
- Target Operation: The specific behavior that the target will perform after a particular event occurs on the trigger component (e.g., highlighting map features, filtering data, etc.).
Here are the complete interaction flow examples:
- Changing the map display extent (trigger) in a map component (trigger component) will cause a chart component (target component) to filter and display data within the current map extent (target operation).
- Clicking (trigger) a data item in a chart component (trigger component) will filter and display that data item (target operation) in all other chart components that use the same data source (target data).
- Clicking (trigger) a text component (trigger component) will clear all triggered interaction states (target operation) on the current page (target page).
It also supports adding multiple different types of triggers to the same component, allowing users to interact with the same component in various ways. For example:
- In a map component, clicking to select a feature (trigger 1) can highlight that feature, while dragging to change the map display extent (trigger 2) can trigger the re‑filtering of data within the new extent.
Furthermore, the same trigger can be configured with multiple target operations, enabling simultaneous responses across different components. For instance, after changing the map display extent in a map component, the following can be triggered at once:
- A bar chart (target component 1) immediately filters and displays statistical data within the current map extent (target operation 1).
- A text list (target component 2) immediately filters and lists detailed entries within the current map extent (target operation 2).
Interaction Configuration
Follow these steps to configure triggers in a trigger component and enable interaction between components:
- Add a Trigger: Select the trigger component, then go to the Interaction Settings panel on the right. Click 'Add Trigger' to add an interactive event, such as Select Feature or Change Extent.
- Configure the Trigger: In the added trigger, click 'Add Operation' and configure the following:
-
Target: Select the component, data source, or page that will receive and respond to the trigger behavior.
- When selecting a component, only that component will execute the target operation. You also need to select the specific data source bound to that component under 'Target Data' to clarify which data source participates in the interaction.
- When selecting a data source, the target operation will be applied to that data source itself, meaning all components using that data source will execute the target operation, enabling batch business responses.
- When selecting a page, the target operation will be applied to the current dashboard page.
-
Target Operation: Choose the specific operation that the target component, data, or page will perform in response to the trigger, such as Highlight Feature or Switch Data.
-
Trigger Data / Trigger Layer:
- Trigger Layer: Used when the trigger component is a map; typically select a layer from the map source of the map component.
- Trigger Data: Used when the trigger component is not a map; typically select the data source of the trigger component.
-
- Establish Data Association: When the data source selected in 'Target' or 'Target data' in the target component does not match the 'Trigger Data / Trigger Layer', you need to set the following 'Association Fields' to establish a data link between the trigger component and the target component. The values in the two fields must be consistent:
- Field from Trigger Data / Trigger Layer: Select the field from the trigger component's data source used for association.
- Field from Target Data: Select the field from the target component's data source used for association.
Finally, click 'OK' to complete the component interaction setup. Once configured, clicking or interacting with elements in the trigger component will cause the target component to respond accordingly based on the settings.
Trigger
In MapDashboard, there are 7 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
In MapDashboard, There are 10 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, and it supports to configure the zoom level of the map. For example, if you select a data item in the chart, the map will zoom to the corresponding feature.
- Zoom to Scene: Zoom the scene to a specific scene range. For example, after changing the map range, the scene will zoom to the corresponding map range.
- 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.
- Switch Map:Switch the map displayed by the map component. For example, clicking on a text will switch the current map to another map.
- 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.
- Hide: Hides the target component. For example, clicking a text will hide the targent component.
- Show: When the target of this operation is a page, it will switch to display another page in the current dashboard. When the target is a component, it will set the component's visibility state to visible. For example, clicking on a text can either switch to another page in the current dashboard, or show a hidden component. If the target is a page, this action navigates to target page within the current dashboard. For example, clicking text on Page 1 switches to Page 2. If the target is a component, it displays a component that was previously hidden.
- Toggle Visibility: Reverses the current visibility state of the component. For example, clicking a text element will hide a visible component or show a hidden one.
-
Rest All: Clear all currently triggered interaction states on the page and restore the initial interaction state. This action is only available when the target is set to a page. For example, clicking a text component will clear all highlighted or selected elements in charts in the page.
Interactive objects
Here are the interactive objects and interactive operations supported by MapDashboard.
Table 1 Triggers and target operations supported by MapDashboard
| Interactive Object | As Trigger Component | Supported Triggers | As Target Component | Supported Target Operations | ||
|
Component |
Map |
Map |
√ |
After feature selection After extent change |
√ |
Highlight features, Switch data, Add to map, Zoom to map, Append data, Switch map, Toggle Visibility, Show, Hide |
| Scene |
√ |
After extent change |
√ |
Zoom to scene, Toggle Visibility, Show, Hide |
||
|
Charts |
Histogram |
√ |
After record selection |
√ |
Filter data, Highlight features, Switch data, Toggle Visibility, Show, Hide |
|
|
Bar |
√ |
After record selection |
√ |
Filter data, Highlight features, Switch data, Toggle Visibility, Show, Hide |
||
|
Pie |
√ |
After record selection |
√ |
Filter data, Highlight features, Switch data, Toggle Visibility, Show, Hide |
||
|
Scatter |
√ |
After record selection |
√ |
Filter data, Highlight features, Switch data, Toggle Visibility, Show, Hide |
||
|
Line |
√ |
After record selection |
√ |
Filter data, Highlight features, Switch data, Toggle Visibility, Show, Hide |
||
|
Radar |
√ |
After record selection |
√ |
Filter data, Highlight features, Switch data, Toggle Visibility, Show, Hide |
||
|
Gauge |
- |
- |
√ |
Display data, Switch data, Toggle Visibility, Show, Hide |
||
|
Liquid Fill |
- |
- |
√ |
Display data, Switch data, Toggle Visibility, Show, Hide |
||
|
Progress Bar |
- |
- |
√ |
Display data, Switch data, Toggle Visibility, Show, Hide |
||
|
Ring Progress Bar |
- |
- |
√ |
Display data, Switch data, Toggle Visibility, Show, Hide |
||
| Basic | Text |
√ |
After mouse click |
√ |
Display data, Switch hyperlink, Switch data, Toggle Visibility, Show, Hide |
|
| Text List |
√ |
After record selection |
√ |
Filter data, Highlight features, Switch data, Toggle Visibility, Show, Hide |
||
| Indicator |
√ |
After mouse click |
√ |
Display data Switch data Toggle Visibility Show Hide |
||
| Image |
√ |
After mouse click |
√ |
Display data Toggle Visibility Show Hide |
||
| Icon |
√ |
After mouse click |
√ |
Toggle Visibility, Show, Hide |
||
| Slideshow |
√ |
After slide switch |
√ |
Switch slide, Toggle Visibility, Show, Hide |
||
| Cascader |
√ |
After record selection |
√ |
Toggle Visibility, Show, Hide |
||
| Data | Range Picker |
√ |
After date range change |
√ |
Toggle Visibility, Show, Hide |
|
| Data Switcher |
√ |
After data switch |
√ |
Toggle Visibility, Show, Hide |
||
| Data Filter |
√ |
After data switch |
√ |
Toggle Visibility, Show, Hide |
||
| Time Range |
√ |
After data switch |
√ |
Toggle Visibility, Show, Hide |
||
| Time Point |
√ |
After data switch |
√ |
Toggle Visibility, Show, Hide |
||
| Time Player |
√ |
After data switch |
√ |
Toggle Visibility, Show, Hide |
||
| Data |
- |
- |
√ |
Filter data, Highlight features |
||
| Page |
- |
- |
√ |
Show, Reset |
||
Note:
- To prevent table redundancy, the operations of toggle visibility, show, and hide are universally supported by all components and have been omitted from the individual rows.
- 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.