/** * DevExtreme (viz/vector_map.d.ts) * Version: 21.1.7 * Build date: Thu Aug 07 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import { UserDefinedElement, DxElement, } from '../core/element'; import { PaletteType, } from './palette'; import { template, } from '../core/templates/template'; import DataSource, { DataSourceOptions, } from '../data/data_source'; import Store from '../data/abstract_store'; import { EventInfo, NativeEventInfo, InitializedEventInfo, ChangedOptionInfo, } from '../events/index'; import { format, } from '../ui/widget/ui.widget'; import { BaseLegend, BaseLegendItem, } from './common'; import BaseWidget, { BaseWidgetMargin, BaseWidgetOptions, BaseWidgetTooltip, Font, BaseWidgetAnnotationConfig, FileSavingEventInfo, ExportInfo, IncidentInfo, } from './core/base_widget'; import { VectorMapProjectionConfig, } from './vector_map/projection'; export interface TooltipInfo { target?: MapLayerElement | dxVectorMapAnnotationConfig; } /** @public */ export type CenterChangedEvent = EventInfo & { readonly center: Array; }; /** @public */ export type ClickEvent = NativeEventInfo & { readonly target: MapLayerElement; }; /** @public */ export type DisposingEvent = EventInfo; /** @public */ export type DrawnEvent = EventInfo; /** @public */ export type ExportedEvent = EventInfo; /** @public */ export type ExportingEvent = EventInfo & ExportInfo; /** @public */ export type FileSavingEvent = FileSavingEventInfo; /** @public */ export type IncidentOccurredEvent = EventInfo & IncidentInfo; /** @public */ export type InitializedEvent = InitializedEventInfo; /** @public */ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; /** @public */ export type SelectionChangedEvent = EventInfo & { readonly target: MapLayerElement; }; /** @public */ export type TooltipHiddenEvent = EventInfo & TooltipInfo; /** @public */ export type TooltipShownEvent = EventInfo & TooltipInfo; /** @public */ export type ZoomFactorChangedEvent = EventInfo & { readonly zoomFactor: number; }; /** * @docid * @publicName Layer * @namespace DevExpress.viz */ export interface MapLayer { /** * @docid * @publicName clearSelection() * @public */ clearSelection(): void; /** * @docid * @public */ elementType?: string; /** * @docid * @publicName getDataSource() * @public */ getDataSource(): DataSource; /** * @docid * @publicName getElements() * @public */ getElements(): Array; /** * @docid * @public */ index?: number; /** * @docid * @public */ name?: string; /** * @docid * @public */ type?: string; } /** * @docid * @publicName Layer Element * @namespace DevExpress.viz */ export interface MapLayerElement { /** * @docid * @publicName applySettings(settings) * @param1 settings:object * @public */ applySettings(settings: any): void; /** * @docid * @publicName attribute(name) * @public */ attribute(name: string): any; /** * @docid * @publicName attribute(name, value) * @public */ attribute(name: string, value: any): void; /** * @docid * @publicName coordinates() * @return object * @public */ coordinates(): any; /** * @docid * @public */ layer?: any; /** * @docid * @publicName selected() * @public */ selected(): boolean; /** * @docid * @publicName selected(state) * @public */ selected(state: boolean): void; } /** * @public * @namespace DevExpress.viz.dxVectorMap */ export type LegendItem = VectorMapLegendItem; /** * @deprecated Use LegendItem instead * @namespace DevExpress.viz */ export interface VectorMapLegendItem extends BaseLegendItem { /** * @docid * @public */ color?: string; /** * @docid * @public */ end?: number; /** * @docid * @public */ size?: number; /** * @docid * @public */ start?: number; } /** * @deprecated use Properties instead * @namespace DevExpress.viz */ export interface dxVectorMapOptions extends BaseWidgetOptions { /** * @docid * @public */ background?: { /** * @docid * @default '#cacaca' */ borderColor?: string; /** * @docid * @default '#ffffff' */ color?: string; }; /** * @docid * @default undefined * @notUsedInTheme * @public */ bounds?: Array; /** * @docid * @default [0, 0] * @notUsedInTheme * @public */ center?: Array; /** * @docid * @public */ controlBar?: { /** * @docid * @default '#5d5d5d' */ borderColor?: string; /** * @docid * @default '#ffffff' */ color?: string; /** * @docid * @default true */ enabled?: boolean; /** * @docid * @type Enums.HorizontalAlignment * @default 'left' */ horizontalAlignment?: 'center' | 'left' | 'right'; /** * @docid * @default 20 */ margin?: number; /** * @docid * @default 0.3 */ opacity?: number; /** * @docid * @type Enums.VerticalEdge * @default 'top' */ verticalAlignment?: 'bottom' | 'top'; }; /** * @docid * @default undefined * @notUsedInTheme * @public */ layers?: Array<{ /** * @docid * @default '#9d9d9d' */ borderColor?: string; /** * @docid * @default 1 */ borderWidth?: number; /** * @docid * @default '#d2d2d2' */ color?: string; /** * @docid * @default undefined */ colorGroupingField?: string; /** * @docid * @default undefined */ colorGroups?: Array; /** * @docid * @notUsedInTheme */ customize?: ((elements: Array) => void); /** * @docid * @default undefined */ dataField?: string; /** * @docid * @type object|Store|DataSource|DataSourceOptions|string|Array * @notUsedInTheme */ dataSource?: any | Store | DataSource | DataSourceOptions | string; /** * @docid * @type Enums.VectorMapMarkerType * @notUsedInTheme */ elementType?: 'bubble' | 'dot' | 'image' | 'pie'; /** * @docid * @default true */ hoverEnabled?: boolean; /** * @docid * @default '#303030' */ hoveredBorderColor?: string; /** * @docid * @default 1 */ hoveredBorderWidth?: number; /** * @docid * @default '#d2d2d2' */ hoveredColor?: string; /** * @docid */ label?: { /** * @docid */ dataField?: string; /** * @docid * @default true for markers; false for areas */ enabled?: boolean; /** * @docid * @default '#2b2b2b' &prop(color) */ font?: Font; }; /** * @docid * @default 50 */ maxSize?: number; /** * @docid * @default 20 */ minSize?: number; /** * @docid * @notUsedInTheme */ name?: string; /** * @docid * @default 1 */ opacity?: number; /** * @docid * @default "Material" * @type Array|Enums.VizPalette */ palette?: Array | PaletteType; /** * @docid * @default 0 */ paletteSize?: number; /** * @docid */ paletteIndex?: number; /** * @docid * @default '#303030' */ selectedBorderColor?: string; /** * @docid * @default 2 */ selectedBorderWidth?: number; /** * @docid * @default '#d2d2d2' */ selectedColor?: string; /** * @docid * @type Enums.SelectionMode * @default 'single' */ selectionMode?: 'multiple' | 'none' | 'single'; /** * @docid * @default 8 */ size?: number; /** * @docid * @default undefined */ sizeGroupingField?: string; /** * @docid * @default undefined */ sizeGroups?: Array; /** * @docid * @type Enums.VectorMapLayerType * @notUsedInTheme */ type?: 'area' | 'line' | 'marker'; }> | { borderColor?: string; borderWidth?: number; color?: string; colorGroupingField?: string; colorGroups?: Array; customize?: ((elements: Array) => any); dataField?: string; dataSource?: any | Store | DataSource | DataSourceOptions | string; elementType?: 'bubble' | 'dot' | 'image' | 'pie'; hoverEnabled?: boolean; hoveredBorderColor?: string; hoveredBorderWidth?: number; hoveredColor?: string; label?: { dataField?: string; enabled?: boolean; font?: Font }; maxSize?: number; minSize?: number; name?: string; opacity?: number; palette?: Array | PaletteType; paletteSize?: number; selectedBorderColor?: string; selectedBorderWidth?: number; selectedColor?: string; selectionMode?: 'multiple' | 'none' | 'single'; size?: number; sizeGroupingField?: string; sizeGroups?: Array; type?: 'area' | 'line' | 'marker' }; /** * @docid * @type Array * @inherits BaseLegend * @default undefined * @public */ legends?: Array; /** * @docid * @type object * @hidden */ margin?: BaseWidgetMargin; /** * @docid * @default 256 * @notUsedInTheme * @public */ maxZoomFactor?: number; /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxVectorMap * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 center:Array * @notUsedInTheme * @action * @public */ onCenterChanged?: ((e: CenterChangedEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxVectorMap * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 event:event * @type_function_param1_field5 target:MapLayerElement * @notUsedInTheme * @action * @public */ onClick?: ((e: ClickEvent) => void) | string; /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxVectorMap * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 target:MapLayerElement * @notUsedInTheme * @action * @public */ onSelectionChanged?: ((e: SelectionChangedEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxVectorMap * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 target:MapLayerElement | dxVectorMapAnnotationConfig * @notUsedInTheme * @action * @public */ onTooltipHidden?: ((e: TooltipHiddenEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxVectorMap * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 target:MapLayerElement | dxVectorMapAnnotationConfig * @notUsedInTheme * @action * @public */ onTooltipShown?: ((e: TooltipShownEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxVectorMap * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 zoomFactor:number * @notUsedInTheme * @action * @public */ onZoomFactorChanged?: ((e: ZoomFactorChangedEvent) => void); /** * @docid * @default true * @public */ panningEnabled?: boolean; /** * @docid * @type Enums.VectorMapProjection|VectorMapProjectionConfig|string|object * @default "mercator" * @notUsedInTheme * @public */ projection?: 'equirectangular' | 'lambert' | 'mercator' | 'miller' | VectorMapProjectionConfig | string | any; /** * @docid * @type object * @public */ tooltip?: dxVectorMapTooltip; /** * @docid * @default true * @public */ touchEnabled?: boolean; /** * @docid * @default true * @public */ wheelEnabled?: boolean; /** * @docid * @default 1 * @notUsedInTheme * @public */ zoomFactor?: number; /** * @docid * @default true * @public */ zoomingEnabled?: boolean; /** * @docid * @public */ commonAnnotationSettings?: dxVectorMapCommonAnnotationConfig; /** * @docid * @inherits dxVectorMapOptions.commonAnnotationSettings * @public */ annotations?: Array; /** * @docid * @default undefined * @notUsedInTheme * @public */ customizeAnnotation?: ((annotation: dxVectorMapAnnotationConfig | any) => dxVectorMapAnnotationConfig); } /** * @docid * @inherits dxVectorMapCommonAnnotationConfig * @type object * @namespace DevExpress.viz */ export interface dxVectorMapAnnotationConfig extends dxVectorMapCommonAnnotationConfig { /** * @docid * @default undefined * @public */ name?: string; } /** * @docid * @inherits BaseWidgetAnnotationConfig * @type object * @namespace DevExpress.viz */ export interface dxVectorMapCommonAnnotationConfig extends BaseWidgetAnnotationConfig { /** * @docid * @default undefined * @public */ coordinates?: Array; /** * @docid * @type_function_return object * @default undefined * @notUsedInTheme * @public */ customizeTooltip?: ((annotation: dxVectorMapAnnotationConfig | any) => any); /** * @docid * @default undefined * @type_function_return string|SVGElement|jQuery * @public */ template?: template | ((annotation: dxVectorMapAnnotationConfig | any, element: SVGGElement) => string | UserDefinedElement); /** * @docid * @type_function_return string|Element|jQuery * @default undefined * @public */ tooltipTemplate?: template | ((annotation: dxVectorMapAnnotationConfig | any, element: DxElement) => string | UserDefinedElement); } /** @namespace DevExpress.viz */ export interface dxVectorMapLegends extends BaseLegend { /** * @docid dxVectorMapOptions.legends.customizeHint * @notUsedInTheme * @public */ customizeHint?: ((itemInfo: { start?: number; end?: number; index?: number; color?: string; size?: number }) => string); /** * @docid dxVectorMapOptions.legends.customizeItems * @type_function_param1 items:Array * @type_function_return Array * @public */ customizeItems?: ((items: Array) => Array); /** * @docid dxVectorMapOptions.legends.customizeText * @notUsedInTheme * @public */ customizeText?: ((itemInfo: { start?: number; end?: number; index?: number; color?: string; size?: number }) => string); /** * @docid dxVectorMapOptions.legends.font * @default '#2b2b2b' &prop(color) * @public */ font?: Font; /** * @docid dxVectorMapOptions.legends.markerColor * @default undefined * @public */ markerColor?: string; /** * @docid dxVectorMapOptions.legends.markerShape * @type Enums.VectorMapMarkerShape * @default "square" * @public */ markerShape?: 'circle' | 'square'; /** * @docid dxVectorMapOptions.legends.markerSize * @default 12 * @public */ markerSize?: number; /** * @docid dxVectorMapOptions.legends.markerTemplate * @default undefined * @type_function_param1 legendItem:VectorMapLegendItem * @type_function_return string|SVGElement|jQuery * @public */ markerTemplate?: template | ((legendItem: LegendItem, element: SVGGElement) => string | UserDefinedElement); /** * @docid dxVectorMapOptions.legends.source * @notUsedInTheme * @public */ source?: { /** * @docid dxVectorMapOptions.legends.source.grouping * @notUsedInTheme */ grouping?: string; /** * @docid dxVectorMapOptions.legends.source.layer * @notUsedInTheme */ layer?: string; }; } /** @namespace DevExpress.viz */ export interface dxVectorMapTooltip extends BaseWidgetTooltip { /** * @docid dxVectorMapOptions.tooltip.contentTemplate * @type_function_return string|Element|jQuery * @default undefined * @public */ contentTemplate?: template | ((info: MapLayerElement, element: DxElement) => string | UserDefinedElement); /** * @docid dxVectorMapOptions.tooltip.customizeTooltip * @type_function_return object * @default undefined * @notUsedInTheme * @public */ customizeTooltip?: ((info: MapLayerElement) => any); /** * @docid dxVectorMapOptions.tooltip.format * @hidden */ format?: format; } /** * @docid * @inherits BaseWidget * @namespace DevExpress.viz * @public */ export default class dxVectorMap extends BaseWidget { constructor(element: UserDefinedElement, options?: dxVectorMapOptions) /** * @docid * @publicName center() * @public */ center(): Array; /** * @docid * @publicName center(centerCoordinates) * @public */ center(centerCoordinates: Array): void; /** * @docid * @publicName clearSelection() * @public */ clearSelection(): void; /** * @docid * @publicName convertCoordinates(x, y) * @deprecated dxVectorMap.convertToGeo * @public */ convertCoordinates(x: number, y: number): Array; /** * @docid * @publicName convertToGeo(x, y) * @public */ convertToGeo(x: number, y: number): Array; /** * @docid * @publicName convertToXY(longitude, latitude) * @public */ convertToXY(longitude: number, latitude: number): Array; /** * @docid * @publicName getLayerByIndex(index) * @public */ getLayerByIndex(index: number): MapLayer; /** * @docid * @publicName getLayerByName(name) * @public */ getLayerByName(name: string): MapLayer; /** * @docid * @publicName getLayers() * @public */ getLayers(): Array; /** * @docid * @publicName viewport() * @public */ viewport(): Array; /** * @docid * @publicName viewport(viewportCoordinates) * @public */ viewport(viewportCoordinates: Array): void; /** * @docid * @publicName zoomFactor() * @public */ zoomFactor(): number; /** * @docid * @publicName zoomFactor(zoomFactor) * @public */ zoomFactor(zoomFactor: number): void; } /** @public */ export type Properties = dxVectorMapOptions; /** @deprecated use Properties instead */ export type Options = dxVectorMapOptions; /** @deprecated use Properties instead */ export type IOptions = dxVectorMapOptions;