MapView
The MapView is a component that renders a map with various geospatial data
layers.
Import
import { MapView } from '@dynatrace/strato-geo';
Use cases
The minimal representation of a MapView component is a base layer that
contains a world map.
The height of the MapView component must be set explicitly using the height
prop. The width of the MapView component will be determined by the width of
the parent container.
Learn more about the MapView props here.
Formatter
There are two other options in the formatter that allow for greater
customization. The first option enables you to prepend the unit to the value,
while the second option enables you to ignore the original unit and append a
custom string instead. Additionally, there is a custom formatter option
available to allow you to change the input unit to one of your choice, e.g.: if
the input unit is bits, you are able to switch and display the unit as
bytes, correctly formatted. The formatted value is applied in the tooltip and
the legend.
Truncation mode
The purpose of truncation is to gracefully handle extra long tooltips or legends
within data visualization components. By changing the value of this property,
you have control over where truncation is applied within charts. By default, the
truncation is applied to the middle value with the use of an ellipsis.
Truncation can, however be changed to instead be applied at the start or end
of data visualization component elements.
Controlled and uncontrolled states
The MapView component can be used in both controlled and uncontrolled states.
In the uncontrolled state it's possible to configure the initial longitude,
latitude and zoom level of the map using initialViewState prop. By default,
the map will be centered on the equator and zoomed out to show the whole world.
In the controlled state, user can attach state handlers to the MapView
component using the onViewStateChange prop, as well as dynamically change the
longitude, latitude and zoom level of the map.
Data layers
The MapView component supports rendering of data layers on the map using the
different subcomponents. Multiple data layers of the same type can be rendered.
The order of the data layers is determined by the order of the subcomponents of
the MapView component.
For detailed documentation about each data layer, please refer to the respective docs pages.