@syncfusion/ej2-maps 30.2.4 → 31.1.17

package/dist/ts/maps/layers/navigation-selected-line.ts

@@ -0,0 +1,171 @@
+import { Maps } from '../../index';
+import { LayerSettings, convertTileLatLongToPoint  } from '../index';
+import { convertGeoToPoint, Point, PathOption, maintainSelection } from '../utils/helper';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+/**
+ * navigation-selected-line
+ */
+export class NavigationLine {
+    private maps: Maps;
+    constructor(maps: Maps) {
+        this.maps = maps;
+    }
+    /**
+     * To render navigation line for maps.
+     *
+     * @param {LayerSettings} layer - Specifies the layer instance to which the navigation line is to be rendered.
+     * @param {number} factor - Specifies the current zoom factor of the Maps.
+     * @param {number} layerIndex -Specifies the index of current layer.
+     * @returns {Element} - Returns the navigation line element.
+     * @private
+     */
+    public renderNavigation(layer: LayerSettings, factor: number, layerIndex: number): Element {
+        let group: Element;
+        if (!isNullOrUndefined(this.maps)) {
+            let navigationEle: Element;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const navigation: any[] = layer.navigationLineSettings;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let longitude: any;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let point: any[] = [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let latitude: any;
+            let visible: boolean;
+            let angle: number;
+            let width: number;
+            let color: string;
+            let dashArray: string;
+            let pathOption: PathOption;
+            let direction: number;
+            let showArrow: boolean;
+            let arrowColor: string;
+            let arrowSize: number;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let arrowSettings: any;
+            let arrowPosition: string;
+            let startArrow: string;
+            let endArrow: string;
+            let offSet: number;
+            let offSetValue: number;
+            let navigationGroup: Element;
+            let d: string;
+            group = (this.maps.renderer.createGroup({
+                id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
+            }));
+            for (let i: number = 0; i < navigation.length; i++) {
+                latitude = navigation[i as number].latitude;
+                longitude = navigation[i as number].longitude;
+                visible = !isNullOrUndefined(navigation[i as number].visible) ? navigation[i as number].visible : false;
+                angle = !isNullOrUndefined(navigation[i as number].angle) ? navigation[i as number].angle : 0;
+                width = navigation[i as number].width || 1;
+                color = navigation[i as number].color;
+                dashArray = navigation[i as number].dashArray;
+                arrowSettings = navigation[i as number].arrowSettings;
+                showArrow = !isNullOrUndefined(arrowSettings) ? arrowSettings.showArrow : false;
+                if (!isNullOrUndefined(longitude) && !isNullOrUndefined(latitude) && longitude.length === latitude.length && visible) {
+                    for (let i: number = 0; i < longitude.length; i++) {
+                        const location: Point = (this.maps.isTileMap) ? convertTileLatLongToPoint(
+                            new Point(longitude[i as number], latitude[i as number]), factor, this.maps.tileTranslatePoint, true
+                        ) : convertGeoToPoint(latitude[i as number], longitude[i as number], factor, layer, this.maps);
+                        point.push(location);
+                    }
+                }
+                navigationGroup = (this.maps.renderer.createGroup({
+                    id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
+                }));
+                for (let j: number = 0; j < point.length - 1; j++) {
+                    angle = (-1 > angle) ? -1 : angle;
+                    angle = (1 < angle) ? 1 : angle;
+                    const arcId: string = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
+                    const radius: number = this.convertRadius(point[j as number], point[j + 1]);
+                    if (angle <= 1 && angle > 0) {
+                        direction = 0;
+                        if (point[j as number]['x'] > point[j + 1]['x']) {
+                            direction = 1;
+                        }
+                    }
+                    if (angle >= -1 && angle < 0) {
+                        direction = 1;
+                        if (point[j as number]['x'] > point[j + 1]['x']) {
+                            direction = 0;
+                        }
+                    }
+                    if (showArrow) {
+                        arrowColor = arrowSettings.color;
+                        arrowSize = !isNullOrUndefined(arrowSettings.size) ? arrowSettings.size : 0;
+                        offSetValue = !isNullOrUndefined(arrowSettings.offSet) ? arrowSettings.offSet : 0;
+                        const divide: number = (Math.round(arrowSize / 2));
+                        arrowPosition = arrowSettings.position;
+                        startArrow = (arrowPosition === 'Start') ? 'url(#triangle' + i + ')' : null;
+                        endArrow = (arrowPosition === 'End') ? 'url(#triangle' + i + ')' : null;
+                        if (offSet !== 0 && angle === 0) {
+                            offSet = (arrowPosition === 'Start') ? offSetValue : -(offSetValue);
+                        }
+                        offSet = (isNullOrUndefined(offSet)) ? 0 : offSet;
+                        const triId: string = this.maps.element.id + '_triangle';
+                        const defElement: Element = this.maps.renderer.createDefs();
+                        defElement.innerHTML += '<marker id="' + 'triangle' + i + '"></marker>';
+                        const markerEle: Element = defElement.querySelector('#' + 'triangle' + i);
+                        markerEle.setAttribute('markerWidth', (arrowSize.toString()));
+                        markerEle.setAttribute('markerHeight', (arrowSize.toString()));
+                        markerEle.setAttribute('refX', (divide - offSet).toString());
+                        markerEle.setAttribute('refY', divide.toString());
+                        markerEle.setAttribute('orient', 'auto');
+                        const d2: string = 'M 0,0  L 0,' + arrowSize + ' L ' + divide + ', ' + divide + ' Z';
+                        pathOption = new PathOption(triId, arrowColor, width, color, 1, 1, dashArray, d2);
+                        navigationEle = this.maps.renderer.drawPath(pathOption);
+                        markerEle.appendChild(navigationEle);
+                        defElement.appendChild(markerEle);
+                        navigationGroup.appendChild(defElement);
+                    }
+                    angle = Math.abs(angle);
+                    d = (angle === 0) ? 'M ' + point[j as number]['x'] + ',' + point[j as number]['y'] + 'L ' + point[j + 1]['x']
+                        + ',' + point[j + 1]['y'] + ' ' :
+                        'M ' + point[j as number]['x'] + ',' + point[j as number]['y'] + ' A ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) +
+                        ' ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) + ' ' + 0 + ',' + 0 + ','
+                        + direction + ' , ' + point[j + 1]['x'] + ',' + point[j + 1]['y'] + ' ';
+                    pathOption = new PathOption(arcId, 'none', width, color, 1, 1, dashArray, d);
+                    navigationEle = this.maps.renderer.drawPath(pathOption) as SVGLineElement;
+                    if (!isNullOrUndefined(arrowPosition)) {
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        const position: void = (arrowPosition === 'Start') ? navigationEle.setAttribute('marker-start', startArrow)
+                            : navigationEle.setAttribute('marker-end', endArrow);
+                    }
+                    maintainSelection(this.maps.selectedNavigationElementId, this.maps.navigationSelectionClass, navigationEle,
+                                      'navigationlineselectionMapStyle');
+                    navigationGroup.appendChild(navigationEle);
+                    group.appendChild(navigationGroup);
+                }
+                point = [];
+            }
+        }
+        return group;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private convertRadius(point1: any, point2: any): number {
+        const value1: number = point2['x'] - point1['x'];
+        const value2: number = point2['y'] - point1['y'];
+        const value: number = Math.sqrt((Math.pow(value1, 2) + Math.pow(value2, 2)));
+        return value;
+    }
+
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name
+     */
+    protected getModuleName(): string {
+        return 'NavigationLine';
+    }
+
+    /**
+     * To destroy the layers.
+     *
+     * @returns {void}
+     * @private
+     */
+    public destroy(): void {
+        this.maps = null;
+    }
+}

package/dist/ts/maps/layers/polygon.d.ts

@@ -0,0 +1,30 @@
+import { Maps } from '../../index';
+/**
+ * When injected, this module will be used to render polygon shapes over the Maps.
+ */
+export declare class Polygon {
+    constructor(maps: Maps);
+    /**
+     * To render polygon for maps.
+     *
+     * @param {Maps} maps - Specifies the layer instance to which the polygon is to be rendered.
+     * @param {number} layerIndex -Specifies the index of current layer.
+     * @param {number} factor - Specifies the current zoom factor of the Maps.
+     * @returns {Element} - Returns the polygon element.
+     * @private
+     */
+    polygonRender(maps: Maps, layerIndex: number, factor: number): Element;
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name
+     */
+    protected getModuleName(): string;
+    /**
+     * To destroy the layers.
+     *
+     * @returns {void}
+     * @private
+     */
+    destroy(): void;
+}

package/dist/ts/maps/layers/polygon.ts

@@ -0,0 +1,68 @@
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Maps, PolygonSettingModel } from '../../index';
+import { Coordinate, LayerSettings} from '../index';
+import { PathOption, calculatePolygonPath, maintainSelection } from '../utils/helper';
+/**
+ * When injected, this module will be used to render polygon shapes over the Maps.
+ */
+export class Polygon {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    /* eslint-disable @typescript-eslint/no-empty-function */
+    constructor(maps: Maps) {
+    }
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    /* eslint-enable @typescript-eslint/no-empty-function */
+    /**
+     * To render polygon for maps.
+     *
+     * @param {Maps} maps - Specifies the layer instance to which the polygon is to be rendered.
+     * @param {number} layerIndex -Specifies the index of current layer.
+     * @param {number} factor - Specifies the current zoom factor of the Maps.
+     * @returns {Element} - Returns the polygon element.
+     * @private
+     */
+    public polygonRender(maps: Maps, layerIndex: number, factor: number): Element {
+        const currentLayer: LayerSettings = <LayerSettings>maps.layersCollection[layerIndex as number];
+        const polygonsSVGObject: Element = maps.renderer.createGroup({
+            id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group'
+        });
+        currentLayer.polygonSettings.polygons.map((polygonSetting: PolygonSettingModel, polygonIndex: number) => {
+            const polygonSVGObject: Element = maps.renderer.createGroup({
+                id: maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group_' + polygonIndex
+            });
+            const polygonData: Coordinate[] = polygonSetting.points;
+            if (!isNullOrUndefined(polygonSetting.points) && polygonSetting.points.length > 0) {
+                const path: string = calculatePolygonPath(maps, factor, currentLayer, polygonData);
+                const pathOptions: PathOption = new PathOption(
+                    maps.element.id + '_LayerIndex_' + layerIndex + '_PolygonIndex_' + polygonIndex,
+                    polygonSetting.fill, (polygonSetting.borderWidth / factor), polygonSetting.borderColor,
+                    polygonSetting.opacity, polygonSetting.borderOpacity, '', path);
+                const polygonEle: Element = maps.renderer.drawPath(pathOptions) as SVGPathElement;
+                maintainSelection(maps.selectedPolygonElementId, maps.polygonSelectionClass, polygonEle,
+                                  'PolygonselectionMapStyle');
+                polygonSVGObject.appendChild(polygonEle);
+                polygonsSVGObject.appendChild(polygonSVGObject);
+            }
+        });
+        return polygonsSVGObject;
+    }
+
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name
+     */
+    protected getModuleName(): string {
+        return 'Polygon';
+    }
+
+    /**
+     * To destroy the layers.
+     *
+     * @returns {void}
+     * @private
+     */
+    //eslint-disable-next-line @typescript-eslint/no-empty-function
+    public destroy(): void {
+    }
+}

package/dist/ts/maps/maps-model.d.ts

@@ -0,0 +1,409 @@
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Fetch } from '@syncfusion/ej2-base';import { EventHandler, Browser, EmitType, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';import { ModuleDeclaration } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle, querySelector } from './utils/helper';import { createStyle, getProcessedMarginValue } from './utils/helper';import { ZoomSettings, LegendSettings } from './model/base';import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';import { ZoomSettingsModel, LegendSettingsModel, LayerSettingsModel, BubbleSettingsModel, PolygonSettingsModel } from './model/base-model';import { MarkerSettingsModel, SelectionSettingsModel, InitialMarkerSelectionSettingsModel } from './model/base-model';import { TitleSettingsModel, BorderModel, MarginModel, CenterPositionModel, InitialShapeSelectionSettingsModel } from './model/base-model';import { MapsAreaSettingsModel, AnnotationModel } from './model/base-model';import { Bubble } from './layers/bubble';import { Legend } from './layers/legend';import { Marker } from './layers/marker';import { Highlight } from './user-interaction/highlight';import { Selection } from './user-interaction/selection';import { MapsTooltip } from './user-interaction/tooltip';import { Zoom } from './user-interaction/zoom';import { load, click, onclick, rightClick, doubleClick, resize, shapeSelected, zoomIn, mouseMove } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { ILoadEventArgs, ILoadedEventArgs, IMinMaxLatitudeLongitude, IMouseEventArgs, IMouseMoveEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';import { IMarkerClusterClickEventArgs, IMarkerClusterMoveEventArgs, IMarkerClusterRenderingEventArgs } from './model/interface';import { ISelectionEventArgs, IShapeSelectedEventArgs, IMapPanEventArgs, IMapZoomEventArgs } from './model/interface';import { IBubbleRenderingEventArgs, IAnimationCompleteEventArgs, IPrintEventArgs, IThemeStyle } from './model/interface';import { LayerPanel } from './layers/layer-panel';import { GeoLocation, Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel, convertTileLatLongToPoint, convertGeoToPoint} from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs, IMarkerDragEventArgs, BingMap } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { Polygon } from './layers/polygon';import { DataManager, Query } from '@syncfusion/ej2-data';import { ExportType } from '../maps/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Print } from './model/print';import { PdfExport } from './model/export-pdf';import { ImageExport } from './model/export-image';
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class Maps
+ */
+export interface MapsModel extends ComponentModel{
+
+    /**
+     * Gets or sets the background color of the maps container.
+     *
+     * @default null
+     */
+    background?: string;
+
+    /**
+     * Enables or disables the visibility state of the separator for grouping.
+     *
+     * @default false
+     */
+    useGroupingSeparator?: boolean;
+
+    /**
+     * Gets or sets the format to apply internationalization for the text in the maps.
+     *
+     * @default null
+     */
+    format?: string;
+
+    /**
+     * Gets or sets the width in which the maps is to be rendered.
+     *
+     * @default null
+     */
+    width?: string;
+
+    /**
+     * Gets or sets the height in which the maps is to be rendered.
+     *
+     * @default null
+     */
+    height?: string;
+
+    /**
+     * Gets or sets the mode in which the tooltip is to be displayed.
+     * The tooltip can be rendered on mouse move, click or double clicking on the
+     * element on the map.
+     *
+     * @default 'MouseMove'
+     */
+    tooltipDisplayMode?: TooltipGesture;
+
+    /**
+     * Enables or disables the print functionality in maps.
+     *
+     * @default false
+     */
+    allowPrint?: boolean;
+
+    /**
+     * Enables or disables the export to image functionality in maps.
+     *
+     * @default false
+     */
+    allowImageExport?: boolean;
+
+    /**
+     * Enables or disables the export to PDF functionality in maps.
+     *
+     * @default false
+     */
+    allowPdfExport?: boolean;
+
+    /**
+     * Gets or sets the options to customize the title of the maps.
+     */
+    titleSettings?: TitleSettingsModel;
+
+    /**
+     * Gets or sets the options to customize the zooming operations in maps.
+     */
+    zoomSettings?: ZoomSettingsModel;
+
+    /**
+     * Gets or sets the options to customize the legend of the maps.
+     */
+    legendSettings?: LegendSettingsModel;
+
+    /**
+     * Gets or sets the options to customize the layers of the maps.
+     */
+    layers?: LayerSettingsModel[];
+
+    /**
+     * Gets or sets the options for customizing the annotations in the maps.
+     */
+    annotations?: AnnotationModel[];
+
+    /**
+     * Gets or sets the options to customize the margin of the maps.
+     */
+    margin?: MarginModel;
+
+    /**
+     * Gets or sets the options for customizing the style properties of the maps border.
+     */
+    border?: BorderModel;
+
+    /**
+     * Gets or sets the theme styles supported for maps. When the theme is set, the styles associated with the theme will be set in the maps.
+     *
+     * @default Material
+     */
+    theme?: MapsTheme;
+
+    /**
+     * Gets or sets the projection with which the maps will be rendered to show the two-dimensional curved surface of a globe on a plane.
+     *
+     * @default Mercator
+     */
+    projectionType?: ProjectionType;
+
+    /**
+     * Gets or sets the index of the layer of maps which will be the base layer. It provides the option to select which layer to be visible in the maps.
+     *
+     * @default 0
+     */
+    baseLayerIndex?: number;
+
+    /**
+     * Gets or sets the description of the maps for assistive technology.
+     *
+     * @default null
+     */
+    description?: string;
+
+    /**
+     * Gets or sets the tab index value for the maps.
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+
+    /**
+     * Gets or sets the center position of the maps.
+     */
+    centerPosition?: CenterPositionModel;
+
+    /**
+     * Gets or sets the options to customize the area around the map.
+     */
+    mapsArea?: MapsAreaSettingsModel;
+
+    /**
+     * Triggers before the maps gets rendered.
+     *
+     * @event load
+     */
+    load?: EmitType<ILoadEventArgs>;
+
+    /**
+     * Triggers before the print gets started.
+     *
+     * @event beforePrint
+     */
+    beforePrint?: EmitType<IPrintEventArgs>;
+
+    /**
+     * Triggers after the maps gets rendered.
+     *
+     * @event loaded
+     */
+    loaded?: EmitType<ILoadedEventArgs>;
+
+    /**
+     * Triggers when a user clicks on an element in Maps.
+     *
+     * @event click
+     * @deprecated
+     */
+    click?: EmitType<IMouseEventArgs>;
+
+    /**
+     * Triggers when a user clicks on an element in Maps.
+     *
+     * @event onclick
+     */
+    onclick?: EmitType<IMouseEventArgs>;
+
+    /**
+     * Triggers when performing the double click operation on an element in maps.
+     *
+     * @event doubleClick
+     */
+    doubleClick?: EmitType<IMouseEventArgs>;
+
+    /**
+     * Triggers when performing the right click operation on an element in maps.
+     *
+     * @event rightClick
+     */
+    rightClick?: EmitType<IMouseEventArgs>;
+
+    /**
+     * Triggers to notify the resize of the maps when the window is resized.
+     *
+     * @event resize
+     */
+    resize?: EmitType<IResizeEventArgs>;
+
+    /**
+     * Triggers before the maps tooltip gets rendered.
+     *
+     * @event tooltipRender
+     */
+    tooltipRender?: EmitType<ITooltipRenderEventArgs>;
+
+    /**
+     * Triggers before the legend gets rendered.
+     *
+     * @event legendRendering
+     * @deprecated
+     */
+    legendRendering?: EmitType<ILegendRenderingEventArgs>;
+
+    /**
+     * Triggers after the maps tooltip gets rendered.
+     *
+     * @deprecated
+     * @event tooltipRenderComplete
+     */
+    tooltipRenderComplete?: EmitType<ITooltipRenderCompleteEventArgs>;
+
+    /**
+     * Triggers when a shape is selected in the maps.
+     *
+     * @event shapeSelected
+     */
+    shapeSelected?: EmitType<IShapeSelectedEventArgs>;
+
+    /**
+     * Triggers before the shape, bubble or marker gets selected.
+     *
+     * @event itemSelection
+     */
+    itemSelection?: EmitType<ISelectionEventArgs>;
+
+    /**
+     * Trigger before the shape, bubble or marker gets highlighted.
+     *
+     * @event itemHighlight
+     */
+    itemHighlight?: EmitType<ISelectionEventArgs>;
+
+    /**
+     * Triggers before the shape gets highlighted.
+     *
+     * @event shapeHighlight
+     */
+    shapeHighlight?: EmitType<IShapeSelectedEventArgs>;
+
+    /**
+     * Triggers before the maps layer gets rendered.
+     *
+     * @event layerRendering
+     */
+    layerRendering?: EmitType<ILayerRenderingEventArgs>;
+
+    /**
+     * Triggers before the maps shape gets rendered.
+     *
+     * @event shapeRendering
+     */
+    shapeRendering?: EmitType<IShapeRenderingEventArgs>;
+
+    /**
+     * Triggers before the maps marker gets rendered.
+     *
+     * @event markerRendering
+     */
+    markerRendering?: EmitType<IMarkerRenderingEventArgs>;
+
+    /**
+     * Triggers before the maps marker cluster gets rendered.
+     *
+     * @event markerClusterRendering
+     */
+    markerClusterRendering?: EmitType<IMarkerClusterRenderingEventArgs>;
+
+    /**
+     * Triggers when clicking on a marker element.
+     *
+     * @event markerClick
+     */
+    markerClick?: EmitType<IMarkerClickEventArgs>;
+
+    /**
+     * When the marker begins to drag on the map, this event is triggered.
+     *
+     * @event markerDragStart
+     */
+    markerDragStart?: EmitType<IMarkerDragEventArgs>;
+
+    /**
+     * When the marker has stopped dragging on the map, this event is triggered.
+     *
+     * @event markerDragEnd
+     */
+    markerDragEnd?: EmitType<IMarkerDragEventArgs>;
+
+    /**
+     * Triggers when clicking the marker cluster in maps.
+     *
+     * @event markerClusterClick
+     */
+    markerClusterClick?: EmitType<IMarkerClusterClickEventArgs>;
+
+    /**
+     * Triggers when moving the mouse over the marker cluster element in maps.
+     *
+     * @event markerClusterMouseMove
+     */
+    markerClusterMouseMove?: EmitType<IMarkerClusterMoveEventArgs>;
+
+    /**
+     * Triggers when moving the mouse over the marker element in maps.
+     *
+     * @event markerMouseMove
+     */
+    markerMouseMove?: EmitType<IMarkerMoveEventArgs>;
+
+    /**
+     * This event is triggered when the mouse pointer moves over the map.
+     *
+     * @event mouseMove
+     */
+    mouseMove?: EmitType<IMouseMoveEventArgs>;
+
+    /**
+     * Triggers before the data-label gets rendered.
+     *
+     * @event dataLabelRendering
+     */
+    dataLabelRendering?: EmitType<ILabelRenderingEventArgs>;
+
+    /**
+     * Triggers before the bubble element gets rendered on the map.
+     *
+     * @event bubbleRendering
+     */
+    bubbleRendering?: EmitType<IBubbleRenderingEventArgs>;
+
+    /**
+     * Triggers when performing the click operation on the bubble element in maps.
+     *
+     * @event bubbleClick
+     */
+    bubbleClick?: EmitType<IBubbleClickEventArgs>;
+
+    /**
+     * Triggers when hovering the mouse on the bubble element in maps.
+     *
+     * @event bubbleMouseMove
+     */
+    bubbleMouseMove?: EmitType<IBubbleMoveEventArgs>;
+
+    /**
+     * Triggers after the animation is completed in the maps.
+     *
+     * @event animationComplete
+     */
+    animationComplete?: EmitType<IAnimationCompleteEventArgs>;
+
+    /**
+     * Triggers before rendering an annotation in the maps.
+     *
+     * @event annotationRendering
+     */
+    annotationRendering?: EmitType<IAnnotationRenderingEventArgs>;
+
+    /**
+     * Triggers before the zoom operations such as zoom in and zoom out in the maps.
+     *
+     * @event zoom
+     */
+    zoom?: EmitType<IMapZoomEventArgs>;
+
+    /**
+     * Triggers before performing the panning operation.
+     *
+     * @event pan
+     */
+    pan?: EmitType<IMapPanEventArgs>;
+
+    /**
+     * This event is triggered after performing the panning action.
+     *
+     * @event panComplete
+     */
+    panComplete?: EmitType<IMapPanEventArgs>;
+
+    /**
+     * This event is triggered after the zooming operation is completed.
+     *
+     * @event zoomComplete
+     */
+    zoomComplete?: EmitType<IMapPanEventArgs>;
+
+}