Chart interactions

The MapView chart interaction provide flexible and intuitive way to explore your data. The chart interaction can then either be triggered using keyboard shortcuts, mouse interactions, programmatically, or through the optional chart toolbar. Enabled by default, the toolbar, can be configured by adding a MapView.Toolbar subcomponent to the MapView. The initial position of the toolbar can be set using the placement prop and it can be disabled using the hidden prop.

Zoom and pan

There is a number of zoom interactions available that can be enabled bt adding the MapView.Zoom subcomponent to the MapView component.

You can zoom in and out using a scroll wheel, pinching, double click on the left mouse button, or by clicking the left mouse button and holding Shift while dragging the cursor. To reset the zoom to the initial state, click the reset button in the toolbar.

The toolbar also provides a zoom-to-fit button that, when clicked, will zoom the map to fit all the data points from all the data layers.

A zoom level determines how much of the world is visible on a map. There are 23 zoom levels in total supported, with 0 being the lowest zoom level (fully zoomed out) and 22 being the highest (fully zoomed in).

Zoom level breakdown by what is visible on the map:

0: The whole world
3: A continent
4: Large islands
6: Large rivers
10: Large rivers
15: Buildings

To pan a map, click and hold the left button and drag the cursor.

Download data as CSV

All the data from data layers can be download in CSV format using a toolbar button. To enable this feature, a MapView.DownloadCSV subcomponent must be provided. The CSV file will contain at least two columns: latitude and longitude. Depending on the shape of the data point, all additional properties will be added as columns to the CSV file.

It's also possible to programmatically trigger the download of the CSV file by calling the downloadData method on the MapView instance reference.

Disputed borders and disabled state

The MapView component, when used in the Dynatrace infrastructure, supports rendering of disputed borders. Read permissions should be set for fetching disputed borders and map’s disabled state, there is more information about permission scopes. Depending on country code provided in the tenant configurations, relevant disputed borders (if any) for that country will be rendered, if not the default map will be shown.

The MapView component has an automatic disabled state. When set the respective setting is configured in the client environment, the MapView component will display a predefined message about the disabled state instead of the map.

Updating map display

By changing the include/exclude props the map display will be updated.

Zoom in and zoom out to see Spain with or without regions.

There can be also conditional layers rendering inside of map, zoom in and zoom out to see ChoroplethLayer or DotLayer

Still have questions?

Find answers in the Dynatrace Community