Using maps on a dashboard allows us to visually identify data using a picture instead of a table/chart, for example to analyze which regions of an area are doing poorly versus which regions are doing well. As you can see by looking at the following map of Canada, users are able to visually distinguish between each province:
- Select a map component from the Maps section. In our example, we will use Canada.
- In the map's properties, bind the region keys as shown in the following screenshot.
- Next, bind the Display Data, which will be the key/value pair. The key comes from the key that you used in step 2 and the value can be any value associated with that key.
- Now bind the Source Data. Make sure that the first column of the Source Data contains the matching key value from step 2.
- Bind the Destination to the cells D3:E3.
- Now, drag a Spreadsheet Table component onto the canvas and bind the Display Data to cells D3:E3. This will change according to the province you click on during runtime.
The map component works by using a key/value pair that is assigned to each map section. It is important that the order of items bound to the Region section is in alphabetical order. Otherwise, the wrong keys will be bound. For example, in the following screenshot, Yukon and Nova Scotia are in the wrong alphabetical order. Thus, the key/value pair will be incorrect.
The Display Data section in step 3 is used to show what will be displayed as a user hovers the mouse over a region. There are two columns that can be shown (key/value). The key must match the key that was bound to the Region data; otherwise it, will not show up.
Finally, we have our Source Data, and again we must have a matching key in the first column in order to match the correct row.
To make the visualization even better for a map component, it is common to use alert coloring to show how the provinces are doing. To accomplish this, please read the Displaying alerts on a map recipe in Chapter 5, Using Alerts.