/*! * devextreme-angular * Version: 25.2.6 * Build date: Mon Mar 30 2026 * * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/DevExtreme */ import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core'; import DataSource from 'devextreme/data/data_source'; import { dxVectorMapAnnotationConfig, dxVectorMapCommonAnnotationConfig, MapLayerElement, VectorMapMarkerType, VectorMapLayerType, VectorMapLegendItem, VectorMapMarkerShape, CenterChangedEvent, ClickEvent, DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, OptionChangedEvent, SelectionChangedEvent, TooltipHiddenEvent, TooltipShownEvent, ZoomFactorChangedEvent } from 'devextreme/viz/vector_map'; import { HorizontalAlignment, VerticalEdge, ExportFormat, SingleMultipleOrNone, Position, Orientation } from 'devextreme/common'; import { DataSourceOptions } from 'devextreme/data/data_source'; import { Store } from 'devextreme/data/store'; import { Font, Palette, DashStyle, Theme, TextOverflow, WordWrap } from 'devextreme/common/charts'; import { VectorMapProjection, VectorMapProjectionConfig } from 'devextreme/viz/vector_map/projection'; import DxVectorMap from 'devextreme/viz/vector_map'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper, CollectionNestedOption } from 'devextreme-angular/core'; import type * as DxVectorMapTypes from "devextreme/viz/vector_map_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/vector-map/nested"; import * as i3 from "devextreme-angular/core"; /** * The VectorMap is a UI component that visualizes geographical locations. This UI component represents a geographical map that contains areas and markers. Areas embody continents and countries. Markers flag specific points on the map, for example, towns, cities or capitals. */ export declare class DxVectorMapComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { private _watcherHelper; private _idh; set _annotationsContentChildren(value: QueryList); set _layersContentChildren(value: QueryList); set _legendsContentChildren(value: QueryList); instance: DxVectorMap; /** * Specifies the annotation collection. */ get annotations(): Array; set annotations(value: Array); /** * Specifies the properties for the map background. */ get background(): { borderColor?: string; color?: string; }; set background(value: { borderColor?: string; color?: string; }); /** * Specifies the positioning of a map in geographical coordinates. */ get bounds(): Array; set bounds(value: Array); /** * Specifies the geographical coordinates of the center for a map. */ get center(): Array; set center(value: Array); /** * Specifies settings common for all annotations in the VectorMap. */ get commonAnnotationSettings(): dxVectorMapCommonAnnotationConfig; set commonAnnotationSettings(value: dxVectorMapCommonAnnotationConfig); /** * Configures the control bar. */ get controlBar(): { borderColor?: string; color?: string; enabled?: boolean; horizontalAlignment?: HorizontalAlignment; margin?: number; opacity?: number; panVisible?: boolean; verticalAlignment?: VerticalEdge; zoomVisible?: boolean; }; set controlBar(value: { borderColor?: string; color?: string; enabled?: boolean; horizontalAlignment?: HorizontalAlignment; margin?: number; opacity?: number; panVisible?: boolean; verticalAlignment?: VerticalEdge; zoomVisible?: boolean; }); /** * Customizes an individual annotation. */ get customizeAnnotation(): ((annotation: dxVectorMapAnnotationConfig | any) => dxVectorMapAnnotationConfig) | undefined; set customizeAnnotation(value: ((annotation: dxVectorMapAnnotationConfig | any) => dxVectorMapAnnotationConfig) | undefined); /** * Specifies whether the UI component responds to user interaction. */ get disabled(): boolean; set disabled(value: boolean); /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr(): Record; set elementAttr(value: Record); /** * Configures the exporting and printing features. */ get export(): { backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }; set export(value: { backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }); /** * Specifies properties for VectorMap UI component layers. */ get layers(): { borderColor?: string; borderWidth?: number; color?: string; colorGroupingField?: string | undefined; colorGroups?: Array; customize?: ((elements: Array) => void); dataField?: string | undefined; dataSource?: Array | DataSource | DataSourceOptions | null | Record | Store | string; elementType?: VectorMapMarkerType; hoveredBorderColor?: string; hoveredBorderWidth?: number; hoveredColor?: string; hoverEnabled?: boolean; label?: { dataField?: string; enabled?: boolean; font?: Font; }; maxSize?: number; minSize?: number; name?: string; opacity?: number; palette?: Array | Palette; paletteIndex?: number; paletteSize?: number; selectedBorderColor?: string; selectedBorderWidth?: number; selectedColor?: string; selectionMode?: SingleMultipleOrNone; size?: number; sizeGroupingField?: string | undefined; sizeGroups?: Array; type?: VectorMapLayerType; }[]; set layers(value: { borderColor?: string; borderWidth?: number; color?: string; colorGroupingField?: string | undefined; colorGroups?: Array; customize?: ((elements: Array) => void); dataField?: string | undefined; dataSource?: Array | DataSource | DataSourceOptions | null | Record | Store | string; elementType?: VectorMapMarkerType; hoveredBorderColor?: string; hoveredBorderWidth?: number; hoveredColor?: string; hoverEnabled?: boolean; label?: { dataField?: string; enabled?: boolean; font?: Font; }; maxSize?: number; minSize?: number; name?: string; opacity?: number; palette?: Array | Palette; paletteIndex?: number; paletteSize?: number; selectedBorderColor?: string; selectedBorderWidth?: number; selectedColor?: string; selectionMode?: SingleMultipleOrNone; size?: number; sizeGroupingField?: string | undefined; sizeGroups?: Array; type?: VectorMapLayerType; }[]); /** * Configures map legends. */ get legends(): { backgroundColor?: string | undefined; border?: { color?: string; cornerRadius?: number; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; columnCount?: number; columnItemSpacing?: number; customizeHint?: ((itemInfo: { color: string; end: number; index: number; size: number; start: number; }) => string); customizeItems?: ((items: Array) => Array); customizeText?: ((itemInfo: { color: string; end: number; index: number; size: number; start: number; }) => string); font?: Font; horizontalAlignment?: HorizontalAlignment; itemsAlignment?: HorizontalAlignment | undefined; itemTextPosition?: Position | undefined; margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }; markerColor?: string | undefined; markerShape?: VectorMapMarkerShape; markerSize?: number; markerTemplate?: any; orientation?: Orientation | undefined; paddingLeftRight?: number; paddingTopBottom?: number; rowCount?: number; rowItemSpacing?: number; source?: { grouping?: string; layer?: string; }; title?: string | { font?: Font; horizontalAlignment?: HorizontalAlignment | undefined; margin?: { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: string | { font?: Font; offset?: number; text?: string; }; text?: string; verticalAlignment?: VerticalEdge; }; verticalAlignment?: VerticalEdge; visible?: boolean; }[]; set legends(value: { backgroundColor?: string | undefined; border?: { color?: string; cornerRadius?: number; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; columnCount?: number; columnItemSpacing?: number; customizeHint?: ((itemInfo: { color: string; end: number; index: number; size: number; start: number; }) => string); customizeItems?: ((items: Array) => Array); customizeText?: ((itemInfo: { color: string; end: number; index: number; size: number; start: number; }) => string); font?: Font; horizontalAlignment?: HorizontalAlignment; itemsAlignment?: HorizontalAlignment | undefined; itemTextPosition?: Position | undefined; margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }; markerColor?: string | undefined; markerShape?: VectorMapMarkerShape; markerSize?: number; markerTemplate?: any; orientation?: Orientation | undefined; paddingLeftRight?: number; paddingTopBottom?: number; rowCount?: number; rowItemSpacing?: number; source?: { grouping?: string; layer?: string; }; title?: string | { font?: Font; horizontalAlignment?: HorizontalAlignment | undefined; margin?: { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: string | { font?: Font; offset?: number; text?: string; }; text?: string; verticalAlignment?: VerticalEdge; }; verticalAlignment?: VerticalEdge; visible?: boolean; }[]); /** * Configures the loading indicator. */ get loadingIndicator(): { backgroundColor?: string; enabled?: boolean; font?: Font; show?: boolean; text?: string; }; set loadingIndicator(value: { backgroundColor?: string; enabled?: boolean; font?: Font; show?: boolean; text?: string; }); /** * Specifies a map's maximum zoom factor. */ get maxZoomFactor(): number; set maxZoomFactor(value: number); /** * Disables the panning capability. */ get panningEnabled(): boolean; set panningEnabled(value: boolean); /** * Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path. */ get pathModified(): boolean; set pathModified(value: boolean); /** * Specifies the map projection. */ get projection(): Record | string | VectorMapProjection | VectorMapProjectionConfig; set projection(value: Record | string | VectorMapProjection | VectorMapProjectionConfig); /** * Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates. */ get redrawOnResize(): boolean; set redrawOnResize(value: boolean); /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled(): boolean; set rtlEnabled(value: boolean); /** * Specifies the UI component's size in pixels. */ get size(): { height?: number | undefined; width?: number | undefined; }; set size(value: { height?: number | undefined; width?: number | undefined; }); /** * Sets the name of the theme the UI component uses. */ get theme(): Theme; set theme(value: Theme); /** * Configures the UI component's title. */ get title(): string | { font?: Font; horizontalAlignment?: HorizontalAlignment; margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: string | { font?: Font; offset?: number; text?: string; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; text?: string; textOverflow?: TextOverflow; verticalAlignment?: VerticalEdge; wordWrap?: WordWrap; }; set title(value: string | { font?: Font; horizontalAlignment?: HorizontalAlignment; margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: string | { font?: Font; offset?: number; text?: string; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; text?: string; textOverflow?: TextOverflow; verticalAlignment?: VerticalEdge; wordWrap?: WordWrap; }); /** * Configures tooltips. */ get tooltip(): { arrowLength?: number; border?: { color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; color?: string; container?: any | string | undefined; contentTemplate?: any; cornerRadius?: number; customizeTooltip?: ((info: MapLayerElement) => Record) | undefined; enabled?: boolean; font?: Font; opacity?: number | undefined; paddingLeftRight?: number; paddingTopBottom?: number; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; zIndex?: number | undefined; }; set tooltip(value: { arrowLength?: number; border?: { color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; color?: string; container?: any | string | undefined; contentTemplate?: any; cornerRadius?: number; customizeTooltip?: ((info: MapLayerElement) => Record) | undefined; enabled?: boolean; font?: Font; opacity?: number | undefined; paddingLeftRight?: number; paddingTopBottom?: number; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; zIndex?: number | undefined; }); /** * Specifies whether the map should respond to touch gestures. */ get touchEnabled(): boolean; set touchEnabled(value: boolean); /** * Specifies whether or not the map should respond when a user rolls the mouse wheel. */ get wheelEnabled(): boolean; set wheelEnabled(value: boolean); /** * Specifies a number that is used to zoom a map initially. */ get zoomFactor(): number; set zoomFactor(value: number); /** * Disables the zooming capability. */ get zoomingEnabled(): boolean; set zoomingEnabled(value: boolean); /** * A function that is executed each time the center coordinates are changed. */ onCenterChanged: EventEmitter; /** * A function that is executed when any location on the map is clicked or tapped. */ onClick: EventEmitter; /** * A function that is executed before the UI component is disposed of. */ onDisposing: EventEmitter; /** * A function that is executed when the UI component's rendering has finished. */ onDrawn: EventEmitter; /** * A function that is executed after the UI component is exported. */ onExported: EventEmitter; /** * A function that is executed before the UI component is exported. */ onExporting: EventEmitter; /** * A function that is executed before a file with exported UI component is saved to the user's local storage. */ onFileSaving: EventEmitter; /** * A function that is executed when an error or warning occurs. */ onIncidentOccurred: EventEmitter; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized: EventEmitter; /** * A function that is executed after a UI component property is changed. */ onOptionChanged: EventEmitter; /** * A function that is executed when a layer element is selected or selection is canceled. */ onSelectionChanged: EventEmitter; /** * A function that is executed when a tooltip becomes hidden. */ onTooltipHidden: EventEmitter; /** * A function that is executed when a tooltip appears. */ onTooltipShown: EventEmitter; /** * A function that is executed each time the zoom factor is changed. */ onZoomFactorChanged: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ annotationsChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ backgroundChange: EventEmitter<{ borderColor?: string; color?: string; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ boundsChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ centerChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ commonAnnotationSettingsChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ controlBarChange: EventEmitter<{ borderColor?: string; color?: string; enabled?: boolean; horizontalAlignment?: HorizontalAlignment; margin?: number; opacity?: number; panVisible?: boolean; verticalAlignment?: VerticalEdge; zoomVisible?: boolean; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ customizeAnnotationChange: EventEmitter<((annotation: dxVectorMapAnnotationConfig | any) => dxVectorMapAnnotationConfig) | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ exportChange: EventEmitter<{ backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ layersChange: EventEmitter<{ borderColor?: string; borderWidth?: number; color?: string; colorGroupingField?: string | undefined; colorGroups?: Array; customize?: ((elements: Array) => void); dataField?: string | undefined; dataSource?: Array | DataSource | DataSourceOptions | null | Record | Store | string; elementType?: VectorMapMarkerType; hoveredBorderColor?: string; hoveredBorderWidth?: number; hoveredColor?: string; hoverEnabled?: boolean; label?: { dataField?: string; enabled?: boolean; font?: Font; }; maxSize?: number; minSize?: number; name?: string; opacity?: number; palette?: Array | Palette; paletteIndex?: number; paletteSize?: number; selectedBorderColor?: string; selectedBorderWidth?: number; selectedColor?: string; selectionMode?: SingleMultipleOrNone; size?: number; sizeGroupingField?: string | undefined; sizeGroups?: Array; type?: VectorMapLayerType; }[]>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ legendsChange: EventEmitter<{ backgroundColor?: string | undefined; border?: { color?: string; cornerRadius?: number; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; columnCount?: number; columnItemSpacing?: number; customizeHint?: ((itemInfo: { color: string; end: number; index: number; size: number; start: number; }) => string); customizeItems?: ((items: Array) => Array); customizeText?: ((itemInfo: { color: string; end: number; index: number; size: number; start: number; }) => string); font?: Font; horizontalAlignment?: HorizontalAlignment; itemsAlignment?: HorizontalAlignment | undefined; itemTextPosition?: Position | undefined; margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }; markerColor?: string | undefined; markerShape?: VectorMapMarkerShape; markerSize?: number; markerTemplate?: any; orientation?: Orientation | undefined; paddingLeftRight?: number; paddingTopBottom?: number; rowCount?: number; rowItemSpacing?: number; source?: { grouping?: string; layer?: string; }; title?: string | { font?: Font; horizontalAlignment?: HorizontalAlignment | undefined; margin?: { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: string | { font?: Font; offset?: number; text?: string; }; text?: string; verticalAlignment?: VerticalEdge; }; verticalAlignment?: VerticalEdge; visible?: boolean; }[]>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ loadingIndicatorChange: EventEmitter<{ backgroundColor?: string; enabled?: boolean; font?: Font; show?: boolean; text?: string; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ maxZoomFactorChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ panningEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ pathModifiedChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ projectionChange: EventEmitter | string | VectorMapProjection | VectorMapProjectionConfig>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ redrawOnResizeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ sizeChange: EventEmitter<{ height?: number | undefined; width?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ themeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ titleChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tooltipChange: EventEmitter<{ arrowLength?: number; border?: { color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; color?: string; container?: any | string | undefined; contentTemplate?: any; cornerRadius?: number; customizeTooltip?: ((info: MapLayerElement) => Record) | undefined; enabled?: boolean; font?: Font; opacity?: number | undefined; paddingLeftRight?: number; paddingTopBottom?: number; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; zIndex?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ touchEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ wheelEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ zoomFactorChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ zoomingEnabledChange: EventEmitter; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any); protected _createInstance(element: any, options: any): DxVectorMap; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; setupChanges(prop: string, changes: SimpleChanges): void; ngDoCheck(): void; _setOption(name: string, value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export declare class DxVectorMapModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export * from 'devextreme-angular/ui/vector-map/nested'; export { DxVectorMapTypes };