devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
213 lines (198 loc) • 11.5 kB
TypeScript
/**
* DevExtreme (viz/vector_map.d.ts)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import '../jquery_augmentation';
import {
dxElement
} from '../core/element';
import {
PaletteType
} from './palette';
import {
template
} from '../core/templates/template';
import DataSource, {
DataSourceOptions
} from '../data/data_source';
import {
event
} from '../events/index';
import {
BaseLegend,
BaseLegendItem
} from './common';
import BaseWidget, {
BaseWidgetOptions,
BaseWidgetTooltip,
Font
} from './core/base_widget';
import {
VectorMapProjectionConfig
} from './vector_map/projection';
/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface MapLayer {
/** Deselects all layer elements. */
clearSelection(): void;
/** The type of the layer elements. */
elementType?: string;
/** Returns the DataSource instance. */
getDataSource(): DataSource;
/** Gets all layer elements. */
getElements(): Array<MapLayerElement>;
/** The layer index in the layers array. */
index?: number;
/** The name of the layer. */
name?: string;
/** The layer type. Can be "area", "line" or "marker". */
type?: string;
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface MapLayerElement {
/** Applies the layer element settings and updates element appearance. */
applySettings(settings: any): void;
/** Gets the value of an attribute. */
attribute(name: string): any;
/** Sets the value of an attribute. */
attribute(name: string, value: any): void;
/** Gets the layer element coordinates. */
coordinates(): any;
/** The parent layer of the layer element. */
layer?: any;
/** Gets the selection state of the layer element. */
selected(): boolean;
/** Sets the selection state of the layer element. */
selected(state: boolean): void;
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface VectorMapLegendItem extends BaseLegendItem {
/** The color of the legend item's marker. */
color?: string;
/** The end value of the group that the legend item indicates. */
end?: number;
/** The diameter of the legend item's marker in pixels. */
size?: number;
/** The start value of the group that the legend item indicates. */
start?: number;
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface dxVectorMapOptions extends BaseWidgetOptions<dxVectorMap> {
/** Specifies the options for the map background. */
background?: { borderColor?: string, color?: string };
/** Specifies the positioning of a map in geographical coordinates. */
bounds?: Array<number>;
/** Specifies the geographical coordinates of the center for a map. */
center?: Array<number>;
/** Configures the control bar. */
controlBar?: { borderColor?: string, color?: string, enabled?: boolean, horizontalAlignment?: 'center' | 'left' | 'right', margin?: number, opacity?: number, verticalAlignment?: 'bottom' | 'top' };
/** Specifies options for VectorMap widget layers. */
layers?: Array<{ borderColor?: string, borderWidth?: number, color?: string, colorGroupingField?: string, colorGroups?: Array<number>, customize?: ((elements: Array<MapLayerElement>) => any), dataField?: string, dataSource?: any | 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<string> | PaletteType, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: 'multiple' | 'none' | 'single', size?: number, sizeGroupingField?: string, sizeGroups?: Array<number>, type?: 'area' | 'line' | 'marker' }> | { borderColor?: string, borderWidth?: number, color?: string, colorGroupingField?: string, colorGroups?: Array<number>, customize?: ((elements: Array<MapLayerElement>) => any), dataField?: string, dataSource?: any | 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<string> | PaletteType, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: 'multiple' | 'none' | 'single', size?: number, sizeGroupingField?: string, sizeGroups?: Array<number>, type?: 'area' | 'line' | 'marker' };
/** Configures map legends. */
legends?: Array<dxVectorMapLegends>;
/** Specifies a map's maximum zoom factor. */
maxZoomFactor?: number;
/** A function that is executed each time the center coordinates are changed. */
onCenterChanged?: ((e: { component?: dxVectorMap, element?: dxElement, model?: any, center?: Array<number> }) => any);
/** A function that is executed when any location on the map is clicked or tapped. */
onClick?: ((e: { component?: dxVectorMap, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event, target?: MapLayerElement }) => any) | string;
/** A function that is executed when a layer element is selected or selection is canceled. */
onSelectionChanged?: ((e: { component?: dxVectorMap, element?: dxElement, model?: any, target?: MapLayerElement }) => any);
/** A function that is executed when a tooltip becomes hidden. */
onTooltipHidden?: ((e: { component?: dxVectorMap, element?: dxElement, model?: any, target?: MapLayerElement }) => any);
/** A function that is executed when a tooltip appears. */
onTooltipShown?: ((e: { component?: dxVectorMap, element?: dxElement, model?: any, target?: MapLayerElement }) => any);
/** A function that is executed each time the zoom factor is changed. */
onZoomFactorChanged?: ((e: { component?: dxVectorMap, element?: dxElement, model?: any, zoomFactor?: number }) => any);
/** Disables the panning capability. */
panningEnabled?: boolean;
/** Specifies the map projection. */
projection?: 'equirectangular' | 'lambert' | 'mercator' | 'miller' | VectorMapProjectionConfig | string | any;
/** Configures tooltips. */
tooltip?: dxVectorMapTooltip;
/** Specifies whether the map should respond to touch gestures. */
touchEnabled?: boolean;
/** Specifies whether or not the map should respond when a user rolls the mouse wheel. */
wheelEnabled?: boolean;
/** Specifies a number that is used to zoom a map initially. */
zoomFactor?: number;
/** Disables the zooming capability. */
zoomingEnabled?: boolean;
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface dxVectorMapLegends extends BaseLegend {
/** Specifies text for a hint that appears when a user hovers the mouse pointer over the text of a legend item. */
customizeHint?: ((itemInfo: { start?: number, end?: number, index?: number, color?: string, size?: number }) => string);
/** Allows you to change the order and visibility of legend items. */
customizeItems?: ((items: Array<VectorMapLegendItem>) => Array<VectorMapLegendItem>);
/** Specifies text for legend items. */
customizeText?: ((itemInfo: { start?: number, end?: number, index?: number, color?: string, size?: number }) => string);
/** Specifies the legend items' font options. */
font?: Font;
/** Specifies the color of item markers in the legend. The specified color applied only when the legend uses 'size' source. */
markerColor?: string;
/** Specifies the shape of item markers. */
markerShape?: 'circle' | 'square';
/** Specifies the marker's size in a legend item in pixels. */
markerSize?: number;
/** Specifies an SVG element that serves as a custom legend item marker. */
markerTemplate?: template | ((legendItem: VectorMapLegendItem, element: SVGGElement) => string | SVGElement | JQuery);
/** Specifies the source of data for the legend. */
source?: { grouping?: string, layer?: string };
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface dxVectorMapTooltip extends BaseWidgetTooltip {
/** Specifies a custom template for a tooltip. */
contentTemplate?: template | ((info: MapLayerElement, element: dxElement) => string | Element | JQuery);
/** Specifies text and appearance of a set of tooltips. */
customizeTooltip?: ((info: MapLayerElement) => any);
}
/** The VectorMap is a widget that visualizes geographical locations. This widget 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 default class dxVectorMap extends BaseWidget {
constructor(element: Element, options?: dxVectorMapOptions)
constructor(element: JQuery, options?: dxVectorMapOptions)
/** Gets the current map center coordinates. */
center(): Array<number>;
/** Sets the map center coordinates. */
center(centerCoordinates: Array<number>): void;
/** Deselects all the selected area and markers on a map at once. The areas and markers are displayed in their initial style after. */
clearSelection(): void;
/** @deprecated Use convertToGeo instead. */
/** Converts client area coordinates into map coordinates. */
convertCoordinates(x: number, y: number): Array<number>;
/** Converts coordinates from pixels to the dataSource coordinate system. */
convertToGeo(x: number, y: number): Array<number>;
/** Converts coordinates from the dataSource coordinate system to pixels. */
convertToXY(longitude: number, latitude: number): Array<number>;
/** Gets a layer with a specific index. */
getLayerByIndex(index: number): MapLayer;
/** Gets a layer with a specific name. */
getLayerByName(name: string): MapLayer;
/** Gets all layers. */
getLayers(): Array<MapLayer>;
/** Gets the current map viewport coordinates. */
viewport(): Array<number>;
/** Sets the map viewport coordinates. */
viewport(viewportCoordinates: Array<number>): void;
/** Gets the current zoom factor value. */
zoomFactor(): number;
/** Sets the zoom factor value. */
zoomFactor(zoomFactor: number): void;
}
declare global {
interface JQuery {
dxVectorMap(): JQuery;
dxVectorMap(options: "instance"): dxVectorMap;
dxVectorMap(options: string): any;
dxVectorMap(options: string, ...params: any[]): any;
dxVectorMap(options: dxVectorMapOptions): JQuery;
}
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
export type Options = dxVectorMapOptions;
/** @deprecated use Options instead */
/** Warning! This type is used for internal purposes. Do not import it directly. */
export type IOptions = dxVectorMapOptions;