@syncfusion/ej2-maps 20.4.54 → 21.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.54
+*  version : 21.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-maps@*",
-  "_id": "@syncfusion/ej2-maps@20.4.49",
+  "_id": "@syncfusion/ej2-maps@21.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-mDTTSc12RWppsfjXlF9qEA7MK7jvYKRM5sGrgLLq9Cww4zk45QTUmcWxU3rKvDgzp9DtVRVYmGBKaCu3t88UzQ==",
+  "_integrity": "sha512-WufF1xB1A5FsIbAx3qZgmVdkX/ODPpprThHEejipaxPfBWQ14Fg1r32ugaadGMo+YY7KU6DSei6/Eqr6lUdr1A==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-20.4.49.tgz",
-  "_shasum": "55ff71b4c167a3be8af6a298f611c794e2b026c8",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-21.1.35.tgz",
+  "_shasum": "ac531b479c7bbaeffd248dfae5da90655e9c163d",
   "_spec": "@syncfusion/ej2-maps@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.51",
-    "@syncfusion/ej2-buttons": "~20.4.53",
-    "@syncfusion/ej2-compression": "~20.4.48",
-    "@syncfusion/ej2-data": "~20.4.48",
-    "@syncfusion/ej2-file-utils": "~20.4.48",
-    "@syncfusion/ej2-pdf-export": "~20.4.48",
-    "@syncfusion/ej2-svg-base": "~20.4.53"
+    "@syncfusion/ej2-base": "~21.1.37",
+    "@syncfusion/ej2-buttons": "~21.1.37",
+    "@syncfusion/ej2-compression": "~21.1.37",
+    "@syncfusion/ej2-data": "~21.1.37",
+    "@syncfusion/ej2-file-utils": "~21.1.37",
+    "@syncfusion/ej2-pdf-export": "~21.1.37",
+    "@syncfusion/ej2-svg-base": "~21.1.37"
   },
   "deprecated": false,
   "description": "The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options",
@@ -93,6 +93,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.54",
+  "version": "21.1.37",
   "sideEffects": false
 }

package/src/maps/layers/bubble.d.ts

@@ -6,9 +6,11 @@ import { LayerSettings } from '../index';
  */
 export declare class Bubble {
     private maps;
+    /** @private */
     bubbleCollection: any[];
     /**
      * Bubble Id for current layer
+     * @private
      */
     id: string;
     constructor(maps: Maps);

package/src/maps/layers/bubble.js

@@ -10,6 +10,7 @@ var Bubble = /** @class */ (function () {
     function Bubble(maps) {
         /**
          * Bubble Id for current layer
+         * @private
          */
         this.id = '';
         this.maps = maps;
@@ -161,7 +162,7 @@ var Bubble = /** @class */ (function () {
                 var bubbleDataSource = bubbleSettings.dataSource;
                 var scale = translate['scale'];
                 var transPoint = translate['location'];
-                var position = new MapLocation((_this.maps.isTileMap ? (eventArgs.cx) : ((eventArgs.cx + transPoint.x) * scale)), (_this.maps.isTileMap ? (eventArgs.cy) : ((eventArgs.cy + transPoint.y) * scale)));
+                var position = new MapLocation((_this.maps.isTileMap ? ((eventArgs.cx + _this.maps.translatePoint.x) * _this.maps.tileZoomLevel) : ((eventArgs.cx + transPoint.x) * scale)), (_this.maps.isTileMap ? ((eventArgs.cy + _this.maps.translatePoint.y) * _this.maps.tileZoomLevel) : ((eventArgs.cy + transPoint.y) * scale)));
                 bubbleElement.setAttribute('transform', 'translate( ' + (position.x) + ' ' + (position.y) + ' )');
                 var bubble = (bubbleDataSource.length - 1) === dataIndex ? 'bubble' : null;
                 if (bubbleSettings.bubbleType === 'Square') {

package/src/maps/layers/color-mapping.d.ts

@@ -23,6 +23,7 @@ export declare class ColorMapping {
      * @param {number} colorValue - Specifies the color value
      * @param {string} equalValue - Specifies the equal value.
      * @returns {any} - Returns the color mapping values.
+     * @private
      */
     getColorByValue(colorMapping: ColorMappingSettingsModel[], colorValue: number, equalValue: string): any;
     deSaturationColor(colorMapping: ColorMappingSettingsModel, color: string, rangeValue: number, equalValue: string): number;

package/src/maps/layers/color-mapping.js

@@ -34,6 +34,7 @@ var ColorMapping = /** @class */ (function () {
      * @param {number} colorValue - Specifies the color value
      * @param {string} equalValue - Specifies the equal value.
      * @returns {any} - Returns the color mapping values.
+     * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ColorMapping.prototype.getColorByValue = function (colorMapping, colorValue, equalValue) {

package/src/maps/layers/data-label.d.ts

@@ -26,6 +26,7 @@ export declare class DataLabel {
      * @param {number} index - Specifies the index number.
      * @param {any[]} intersect - Specifies the intersect.
      * @returns {void}
+     * @private
      */
     renderLabel(layer: LayerSettings, layerIndex: number, shape: any, layerData: any[], group: Element, labelTemplateElement: HTMLElement, index: number, intersect: any[]): void;
     private getPoint;

package/src/maps/layers/data-label.js

@@ -42,6 +42,7 @@ var DataLabel = /** @class */ (function () {
      * @param {number} index - Specifies the index number.
      * @param {any[]} intersect - Specifies the intersect.
      * @returns {void}
+     * @private
      */
     DataLabel.prototype.renderLabel = function (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/maps/layers/layer-panel.js

@@ -672,6 +672,7 @@ var LayerPanel = /** @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var bubbleDataSource = bubble_1.dataSource;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this_2.mapObject.bubbleModule.bubbleCollection = [];
                 bubbleDataSource.map(function (bubbleData, i) {
                     _this.renderBubble(_this.currentLayer, bubbleData, colors[i % colors.length], range, j, i, bubbleG, layerIndex, bubble_1);
                 });

package/src/maps/layers/legend.d.ts

@@ -79,6 +79,7 @@ export declare class Legend {
      * To calculate legend bounds and draw the legend shape and text.
      *
      * @returns {void}
+     * @private
      */
     renderLegend(): void;
     calculateLegendBounds(): void;
@@ -99,6 +100,7 @@ export declare class Legend {
     private legendTextTrim;
     /**
      * To draw the legend shape and text.
+     * @private
      */
     drawLegend(): void;
     /**

package/src/maps/layers/legend.js

@@ -64,6 +64,7 @@ var Legend = /** @class */ (function () {
      * To calculate legend bounds and draw the legend shape and text.
      *
      * @returns {void}
+     * @private
      */
     Legend.prototype.renderLegend = function () {
         this.legendRenderingCollections = [];
@@ -408,6 +409,7 @@ var Legend = /** @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To draw the legend shape and text.
+     * @private
      */
     Legend.prototype.drawLegend = function () {
         var map = this.maps;

package/src/maps/layers/marker.d.ts

@@ -28,18 +28,21 @@ export declare class Marker {
      *
      * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
      * @returns {void}
+     * @private
      */
     calculateZoomCenterPositionAndFactor(layersCollection: LayerSettings[]): void;
     /**
      * To check and trigger marker click event
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     markerClick(e: PointerEvent): void;
     /**
      * To check and trigger Cluster click event
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     markerClusterClick(e: PointerEvent): void;
     /**
@@ -54,6 +57,7 @@ export declare class Marker {
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     markerMove(e: PointerEvent): void;
     /**
@@ -61,6 +65,7 @@ export declare class Marker {
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     markerClusterMouseMove(e: PointerEvent): void;
     /**

package/src/maps/layers/marker.js

@@ -1,4 +1,4 @@
-import { markerRendering, convertTileLatLongToPoint, MapLocation } from '../index';
+import { markerRendering, convertTileLatLongToPoint, MapLocation, markerDragStart } from '../index';
 import { markerClick, markerMouseMove, markerClusterClick, markerClusterMouseMove } from '../index';
 import { isNullOrUndefined, createElement } from '@syncfusion/ej2-base';
 import { getTranslate, convertGeoToPoint, clusterTemplate, marker, markerTemplate, getZoomTranslate } from '../utils/helper';
@@ -146,6 +146,7 @@ var Marker = /** @class */ (function () {
      *
      * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
      * @returns {void}
+     * @private
      */
     Marker.prototype.calculateZoomCenterPositionAndFactor = function (layersCollection) {
         if (!isNullOrUndefined(this.maps)) {
@@ -274,6 +275,7 @@ var Marker = /** @class */ (function () {
      * To check and trigger marker click event
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     Marker.prototype.markerClick = function (e) {
         var target = e.target.id;
@@ -284,6 +286,9 @@ var Marker = /** @class */ (function () {
         if (isNullOrUndefined(options)) {
             return;
         }
+        if (options.marker.enableDrag) {
+            document.getElementById(this.maps.element.id + "_svg").style.cursor = 'grabbing';
+        }
         var eventArgs = {
             cancel: false, name: markerClick, data: options.data, maps: this.maps,
             marker: options.marker, target: target, x: e.clientX, y: e.clientY,
@@ -292,11 +297,39 @@ var Marker = /** @class */ (function () {
             value: options.data['name']
         };
         this.maps.trigger(markerClick, eventArgs);
+        if (options.marker.enableDrag) {
+            var isCluster = false;
+            var layerIndex = parseInt(target.split('_LayerIndex_')[1].split('_')[0], 10);
+            var markerIndex = parseInt(target.split('_MarkerIndex_')[1].split('_')[0], 10);
+            var dataIndex_1 = parseInt(target.split('_dataIndex_')[1].split('_')[0], 10);
+            var marker_1 = this.maps.layers[layerIndex].markerSettings[markerIndex];
+            if (this.sameMarkerData.length > 0) {
+                isCluster = (this.sameMarkerData[0].data.filter(function (el) { return (el['index'] == dataIndex_1); })).length > 0 &&
+                    this.sameMarkerData[0].layerIndex === layerIndex && this.sameMarkerData[0].markerIndex === markerIndex;
+            }
+            if (!isCluster) {
+                var dragEventArgs = {
+                    name: markerDragStart, x: e.clientX, y: e.clientY,
+                    latitude: options.data['latitude'] || options.data['Latitude'],
+                    longitude: options.data['longitude'] || options.data['Longitude'],
+                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex_1
+                };
+                this.maps.trigger(markerDragStart, dragEventArgs);
+                this.maps.markerDragArgument = {
+                    targetId: target, x: e.clientX, y: e.clientY,
+                    latitude: options.data['latitude'] || options.data['Latitude'],
+                    longitude: options.data['longitude'] || options.data['Longitude'],
+                    shape: isNullOrUndefined(marker_1.shapeValuePath) ? marker_1.shape : marker_1.dataSource[dataIndex_1][marker_1.shapeValuePath],
+                    layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex_1
+                };
+            }
+        }
     };
     /**
      * To check and trigger Cluster click event
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     Marker.prototype.markerClusterClick = function (e) {
         var target = e.target.id;
@@ -367,7 +400,7 @@ var Marker = /** @class */ (function () {
                 if ((target.indexOf('_cluster_') > -1)) {
                     var isClusterSame = false;
                     var clusterElement = document.getElementById(target.indexOf('_datalabel_') > -1 ? layer.markerClusterSettings.shape === 'Balloon' ? target.split('_datalabel_')[0] + '_Group' : target.split('_datalabel_')[0] : layer.markerClusterSettings.shape === 'Balloon' ? target + '_Group' : target);
-                    var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerHTML.split(',').map(Number) : clusterElement.innerHTML.split(',').map(Number);
+                    var indexes = layer.markerClusterSettings.shape === 'Balloon' ? clusterElement.children[0].innerText.split(',').map(Number) : clusterElement.innerText.split(',').map(Number);
                     collection_1 = [];
                     for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {
                         var i = indexes_1[_i];
@@ -391,6 +424,7 @@ var Marker = /** @class */ (function () {
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     Marker.prototype.markerMove = function (e) {
         var targetId = e.target.id;
@@ -401,6 +435,10 @@ var Marker = /** @class */ (function () {
         if (isNullOrUndefined(options)) {
             return;
         }
+        if (options.marker.enableDrag) {
+            document.getElementById(this.maps.element.id + "_svg").style.cursor = isNullOrUndefined(this.maps.markerDragArgument) ?
+                'pointer' : 'grabbing';
+        }
         var eventArgs = {
             cancel: false, name: markerMouseMove, data: options.data,
             maps: this.maps, target: targetId, x: e.clientX, y: e.clientY
@@ -412,6 +450,7 @@ var Marker = /** @class */ (function () {
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     Marker.prototype.markerClusterMouseMove = function (e) {
         var targetId = e.target.id;

package/src/maps/layers/navigation-selected-line.d.ts

@@ -13,6 +13,7 @@ export declare class NavigationLine {
      * @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
      */
     renderNavigation(layer: LayerSettings, factor: number, layerIndex: number): Element;
     private convertRadius;

package/src/maps/layers/navigation-selected-line.js

@@ -15,6 +15,7 @@ var NavigationLine = /** @class */ (function () {
      * @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
      */
     NavigationLine.prototype.renderNavigation = function (layer, factor, layerIndex) {
         var group;

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

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Ajax } 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 } 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 } 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, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { ILoadEventArgs, ILoadedEventArgs, IMouseEventArgs, 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 } from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';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 { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Ajax } 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 } 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 } 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, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { ILoadEventArgs, ILoadedEventArgs, IMouseEventArgs, 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 } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';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';
 
 /**
@@ -7,7 +7,7 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface MapsModel extends ComponentModel{
 
     /**
-     * Sets and gets the background color of the maps container.
+     * Gets or sets the background color of the maps container.
      *
      * @default null
      */
@@ -21,28 +21,28 @@ export interface MapsModel extends ComponentModel{
     useGroupingSeparator?: boolean;
 
     /**
-     * Sets and gets the format in which the text in the maps are to be rendered.
+     * Gets or sets the format to apply internationalization for the text in the maps.
      *
      * @default null
      */
     format?: string;
 
     /**
-     * Sets and gets the width in which the maps is to be rendered.
+     * Gets or sets the width in which the maps is to be rendered.
      *
      * @default null
      */
     width?: string;
 
     /**
-     * Sets and gets the height in which the maps is to be rendered.
+     * Gets or sets the height in which the maps is to be rendered.
      *
      * @default null
      */
     height?: string;
 
     /**
-     * Sets and gets the mode in which the tooltip is to be displayed.
+     * 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.
      *
@@ -51,108 +51,108 @@ export interface MapsModel extends ComponentModel{
     tooltipDisplayMode?: TooltipGesture;
 
     /**
-     * Enables or disables the print functionality in map.
+     * Enables or disables the print functionality in maps.
      *
      * @default false
      */
     allowPrint?: boolean;
 
     /**
-     * Enables or disables the export to image functionality in map.
+     * Enables or disables the export to image functionality in maps.
      *
      * @default false
      */
     allowImageExport?: boolean;
 
     /**
-     * Enables or disables the export to PDF functionality in map.
+     * Enables or disables the export to PDF functionality in maps.
      *
      * @default false
      */
     allowPdfExport?: boolean;
 
     /**
-     * Sets and gets the title to be displayed for maps.
+     * Gets or sets the options to customize the title of the maps.
      */
     titleSettings?: TitleSettingsModel;
 
     /**
-     * Sets and gets the options to customize the zooming operations in maps.
+     * Gets or sets the options to customize the zooming operations in maps.
      */
     zoomSettings?: ZoomSettingsModel;
 
     /**
-     * Sets and gets the options to customize the legend of the maps.
+     * Gets or sets the options to customize the legend of the maps.
      */
     legendSettings?: LegendSettingsModel;
 
     /**
-     * Sets and gets the options to customize the layers of the maps.
+     * Gets or sets the options to customize the layers of the maps.
      */
     layers?: LayerSettingsModel[];
 
     /**
-     * Sets and gets the options for customizing the annotation of maps.
+     * Gets or sets the options for customizing the annotations in the maps.
      */
     annotations?: AnnotationModel[];
 
     /**
-     * Sets and gets the options to customize the margins of the maps.
+     * Gets or sets the options to customize the margin of the maps.
      */
     margin?: MarginModel;
 
     /**
-     * Sets and gets the options for customizing the color and width of the maps border.
+     * Gets or sets the options for customizing the style properties of the maps border.
      */
     border?: BorderModel;
 
     /**
-     * Set and gets the theme supported for the maps.
+     * 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;
 
     /**
-     * Sets and gets the projection type for the maps.
+     * 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;
 
     /**
-     * Sets and gets the base map index of maps. It provides the option to select which layer to be visible in the maps.
+     * 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;
 
     /**
-     * Sets and gets the description for maps.
+     * Gets or sets the description of the maps for assistive technology.
      *
      * @default null
      */
     description?: string;
 
     /**
-     * Sets and gets the tab index value for the maps.
+     * Gets or sets the tab index value for the maps.
      *
      * @default 1
      */
     tabIndex?: number;
 
     /**
-     * Sets and gets the center position of the maps.
+     * Gets or sets the center position of the maps.
      */
     centerPosition?: CenterPositionModel;
 
     /**
-     * Sets and gets the options to customize the area around the map.
+     * Gets or sets the options to customize the area around the map.
      */
     mapsArea?: MapsAreaSettingsModel;
 
     /**
-     * Triggers when the map is on load.
+     * Triggers before the maps gets rendered.
      *
      * @event load
      */
@@ -202,7 +202,7 @@ export interface MapsModel extends ComponentModel{
     rightClick?: EmitType<IMouseEventArgs>;
 
     /**
-     * Triggers when resizing the maps.
+     * Triggers to notify the resize of the maps when the window is resized.
      *
      * @event resize
      */
@@ -232,28 +232,28 @@ export interface MapsModel extends ComponentModel{
     tooltipRenderComplete?: EmitType<ITooltipRenderCompleteEventArgs>;
 
     /**
-     * Triggers when clicking a shape in maps.
+     * Triggers when a shape is selected in the maps.
      *
      * @event shapeSelected
      */
     shapeSelected?: EmitType<IShapeSelectedEventArgs>;
 
     /**
-     * Triggers when clicking the shape on maps and before the selection is applied.
+     * Triggers before the shape, bubble or marker gets selected.
      *
      * @event itemSelection
      */
     itemSelection?: EmitType<ISelectionEventArgs>;
 
     /**
-     * Trigger when mouse move on the shape in maps and before the shape gets highlighted.
+     * Trigger before the shape, bubble or marker gets highlighted.
      *
      * @event itemHighlight
      */
     itemHighlight?: EmitType<ISelectionEventArgs>;
 
     /**
-     * Triggers when mouse move on the shape in maps and before the shape gets highlighted.
+     * Triggers before the shape gets highlighted.
      *
      * @event shapeHighlight
      */
@@ -288,12 +288,26 @@ export interface MapsModel extends ComponentModel{
     markerClusterRendering?: EmitType<IMarkerClusterRenderingEventArgs>;
 
     /**
-     * Triggers when clicking on the maps marker element.
+     * 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.
      *
@@ -344,21 +358,21 @@ export interface MapsModel extends ComponentModel{
     bubbleMouseMove?: EmitType<IBubbleMoveEventArgs>;
 
     /**
-     * Triggers after the animation completed in the maps component.
+     * Triggers after the animation is completed in the maps.
      *
      * @event animationComplete
      */
     animationComplete?: EmitType<IAnimationCompleteEventArgs>;
 
     /**
-     * Triggers before rendering the annotation in maps.
+     * Triggers before rendering an annotation in the maps.
      *
      * @event annotationRendering
      */
     annotationRendering?: EmitType<IAnnotationRenderingEventArgs>;
 
     /**
-     * Triggers before the zoom operations in the maps such as zoom in and zoom out.
+     * Triggers before the zoom operations such as zoom in and zoom out in the maps.
      *
      * @event zoom
      */