Skip to main content

    MapView

    The MapView is a component that renders a map with various geospatial data layers.

    MapView

    MapViewProps

    Signature:

    export declare type MapViewProps = & ( | );

    MapViewBaseProps

    NameTypeDefaultDescription
    style?
    -

    CSS styles to override the inline styles of main container of the component

    mapStyle?
    -

    Styles of maplibre to be overridden

    onViewStateChange?
    (viewState: ) =>
    -

    Callback to listen for the changes in the ViewState

    loading?
    false

    Set whether map is loading

    height?
    |
    400px

    The height of the chart. If a number is passed, it will be treated as px

    className?
    -

    CSS class to append to the class list of the main container of the component

    truncationMode?
    'middle'

    The truncation mode to be used as start, middle or end in the long legend labels

    formatter?
    | <, >
    -

    Map View formatter options

    MapViewControlledProps

    extends

    MapViewUncontrolledProps

    extends<>
    NameTypeDefaultDescription
    initialViewState?
    -

    The initial state of the Map.

    ViewState

    NameTypeDefaultDescription
    longitude?
    -

    Longitude at map center

    latitude?
    -

    Latitude at map center

    zoom?
    -

    Map zoom level

    MapView Ref

    MapViewRef

    NameTypeDefaultDescription
    element
    |
    -

    The map component root element

    downloadData
    () =>
    -

    Downloads map raw data .

    zoomIn
    () =>
    -

    Performs zoom in action on the domain

    zoomOut
    () =>
    -

    Performs zoom out action on the domain

    zoomToFit
    () =>
    -

    Performs zoom to fit action on the domain

    reset
    () =>
    -

    Reset the domain to the default

    Sequential legend

    SequentialLegendProps

    extends
    NameTypeDefaultDescription
    min?
    -

    The min boundary

    max?
    -

    The max boundary

    colorPalette?
    [] |
    -

    The color palette to apply to the legend

    BaseLegendProps

    Signature:

    export declare type Base = <, >;

    LegendPosition

    Signature:

    export declare type LegendPosition = (typeof )[];

    ColorPalette

    Signature:

    export declare type ColorPalette = (typeof )[];

    Threshold legend

    ThresholdLegendProps

    extends
    NameTypeDefaultDescription
    ranges
    []
    -

    Ranges of the threshold legend

    BaseLegendProps

    Signature:

    export declare type Base = <, >;

    LegendPosition

    Signature:

    export declare type LegendPosition = (typeof )[];

    ColorPalette

    Signature:

    export declare type ColorPalette = (typeof )[];

    ColoredRange

    NameTypeDefaultDescription
    from
    -

    Range starting point

    to
    -

    Range ending point

    color?
    -

    The color to use in this range

    Categorical legend

    CategoricalLegendProps

    extends
    NameTypeDefaultDescription
    categories?
    []
    -

    Available categories to be shown in the legend

    colorPalette
    [] | | { [key: ]: ; }
    -

    The color palette to apply to the legend

    BaseLegendProps

    Signature:

    export declare type Base = <, >;

    LegendPosition

    Signature:

    export declare type LegendPosition = (typeof )[];

    ColorPalette

    Signature:

    export declare type ColorPalette = (typeof )[];

    Legend shared props

    BaseLegendProps

    Signature:

    export declare type Base = <, >;

    Interactions

    ChartInteractionsProps

    NameTypeDefaultDescription
    onZoomChange?
    -

    Callback called when any zoom event has been performed affecting the data timeframe

    ZoomChangeHandler

    Signature:

    export declare type ZoomChangeHandler = (newStart: | , newEnd: | , type: ) => ;

    Toolbar

    ChartToolbarProps

    NameTypeDefaultDescription
    placement?
    'top-right'

    Initial placement for the toolbar

    ToolbarPlacement

    Signature:

    export declare type ToolbarPlacement = | | | ;
    Still have questions?
    Find answers in the Dynatrace Community