@syncfusion/ej2-maps 20.3.49 → 20.3.56

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.49
+*  version : 20.3.56
 *  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.3.47",
+  "_id": "@syncfusion/ej2-maps@20.3.49",
   "_inBundle": false,
-  "_integrity": "sha512-eM35NIkNhSwH73EarJVxZ5M1ED2F/t7BB23UD1Tgy9/ynEFhpFRlmRzT/YeiqlXgXJZLVW5DdwoUsc2w89TMBg==",
+  "_integrity": "sha512-6E8vnqs8aaMMU+TS8C7Gw+96rLQSKqZSKhX6Z61wZ45NoMjVid40BNsXSs5qrjsOMut8sTLuU59XgX54LYwUFg==",
   "_location": "/@syncfusion/ej2-maps",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-maps",
     "/@syncfusion/ej2-vue-maps"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-20.3.47.tgz",
-  "_shasum": "4368a4fe57801d7161bf61ac79f29fd3f05156ea",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-maps/-/ej2-maps-20.3.49.tgz",
+  "_shasum": "9e978cff12c0f29b51d2eddec927f0f1f7f94e85",
   "_spec": "@syncfusion/ej2-maps@*",
-  "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
+  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.49",
-    "@syncfusion/ej2-buttons": "~20.3.49",
-    "@syncfusion/ej2-compression": "~20.3.47",
-    "@syncfusion/ej2-data": "~20.3.47",
-    "@syncfusion/ej2-file-utils": "~20.3.47",
-    "@syncfusion/ej2-pdf-export": "~20.3.47",
-    "@syncfusion/ej2-svg-base": "~20.3.47"
+    "@syncfusion/ej2-base": "~20.3.56",
+    "@syncfusion/ej2-buttons": "~20.3.56",
+    "@syncfusion/ej2-compression": "~20.3.56",
+    "@syncfusion/ej2-data": "~20.3.56",
+    "@syncfusion/ej2-file-utils": "~20.3.56",
+    "@syncfusion/ej2-pdf-export": "~20.3.56",
+    "@syncfusion/ej2-svg-base": "~20.3.56"
   },
   "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",
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.3.49",
+  "version": "20.3.56",
   "sideEffects": false
 }

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

@@ -249,8 +249,14 @@ var DataLabel = /** @class */ (function () {
                         datasrcObj : shapeData['properties'], _this.maps, eventargs_1.template, _this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                     templateElement.innerHTML = !templateFn ? eventargs_1.template : '';
                     labelElement = convertElementFromLabel(templateElement, labelId, !isNullOrUndefined(datasrcObj) ? datasrcObj : shapeData['properties'], index, _this.maps);
-                    labelElement.style.left = ((Math.abs(_this.maps.baseMapRectBounds['min']['x'] - location['x'])) * scale) + labelArgs.offsetX + 'px';
-                    labelElement.style.top = ((Math.abs(_this.maps.baseMapRectBounds['min']['y'] - location['y'])) * scale) + labelArgs.offsetY + 'px';
+                    if (_this.maps.isTileMap) {
+                        labelElement.style.left = (((location['x'] + transPoint['x']) * scale) - (textSize['width'] / 2)) + 'px';
+                        labelElement.style.top = (((location['y'] + transPoint['y']) * scale) - textSize['height']) + 'px';
+                    }
+                    else {
+                        labelElement.style.left = ((Math.abs(_this.maps.baseMapRectBounds['min']['x'] - location['x'])) * scale) + labelArgs.offsetX + 'px';
+                        labelElement.style.top = ((Math.abs(_this.maps.baseMapRectBounds['min']['y'] - location['y'])) * scale) + labelArgs.offsetY + 'px';
+                    }
                     labelTemplateElement.appendChild(labelElement);
                 }
                 else {

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

@@ -35,10 +35,10 @@ var LayerPanel = /** @class */ (function () {
                 height: areaRect.height
             });
             var parentElement = createElement('div', {
-                id: this.mapObject.element.id + '_Tile_SVG_Parent', styles: 'position: absolute; height: ' +
-                    (areaRect.height) + 'px; width: '
-                    + (areaRect.width) + 'px;'
+                id: this.mapObject.element.id + '_Tile_SVG_Parent'
             });
+            parentElement.style.cssText = 'position: absolute; height: ' + (areaRect.height) + 'px; width: ' +
+                (areaRect.width) + 'px;';
             parentElement.appendChild(this.tileSvgObject);
             secondaryEle.appendChild(parentElement);
         }
@@ -92,13 +92,13 @@ var LayerPanel = /** @class */ (function () {
             (!isNullOrUndefined(panel.mapObject.tileZoomLevel) && panel.mapObject.tileZoomLevel !== 1)) ?
             false : true;
         if (isNullOrUndefined(panel.mapObject.previousCenterLatitude) &&
-            isNullOrUndefined(panel.mapObject.previousCenterLongitude)) {
+            isNullOrUndefined(panel.mapObject.previousCenterLongitude) && !panel.mapObject.isZoomByPosition) {
             panel.mapObject.previousCenterLatitude = panel.mapObject.centerPosition.latitude;
             panel.mapObject.previousCenterLongitude = panel.mapObject.centerPosition.longitude;
         }
-        else if (panel.mapObject.previousCenterLatitude !==
+        else if ((panel.mapObject.previousCenterLatitude !==
             panel.mapObject.centerPosition.latitude && panel.mapObject.previousCenterLongitude !==
-            panel.mapObject.centerPosition.longitude) {
+            panel.mapObject.centerPosition.longitude) || panel.mapObject.isZoomByPosition) {
             panel.mapObject.centerPositionChanged = true;
             panel.mapObject.previousCenterLatitude = panel.mapObject.centerPosition.latitude;
             panel.mapObject.previousCenterLongitude = panel.mapObject.centerPosition.longitude;
@@ -110,7 +110,8 @@ var LayerPanel = /** @class */ (function () {
         var centerTileMap = center;
         if ((this.mapObject.isTileMap && panel.mapObject.markerModule) && panel.mapObject.zoomSettings.enable) {
             panel.mapObject.markerModule.calculateZoomCenterPositionAndFactor(this.mapObject.layersCollection);
-            if (!isNullOrUndefined(this.mapObject.markerCenterLatitude) && !isNullOrUndefined(this.mapObject.markerCenterLongitude)) {
+            if (!isNullOrUndefined(this.mapObject.markerCenterLatitude) && !isNullOrUndefined(this.mapObject.markerCenterLongitude)
+                && !panel.mapObject.isZoomByPosition) {
                 centerTileMap = new Point(panel.mapObject.markerCenterLongitude, panel.mapObject.markerCenterLatitude);
             }
         }
@@ -126,7 +127,7 @@ var LayerPanel = /** @class */ (function () {
         else {
             center = { x: null, y: null };
         }
-        var zoomFactorValue = panel.mapObject.zoomSettings.shouldZoomInitially ?
+        var zoomFactorValue = (panel.mapObject.zoomSettings.shouldZoomInitially && !panel.mapObject.isZoomByPosition) ?
             isNullOrUndefined(panel.mapObject.markerZoomFactor) ? 1 :
                 panel.mapObject.markerZoomFactor : panel.mapObject.zoomSettings.zoomFactor;
         zoomFactorValue = (panel.mapObject.enablePersistence) ? ((isNullOrUndefined(panel.mapObject.mapScaleValue))
@@ -382,13 +383,13 @@ var LayerPanel = /** @class */ (function () {
         var colors = shapeSettings.palette.length > 1 ? shapeSettings.palette : getShapeColor(this.mapObject.theme);
         var labelTemplateEle = createElement('div', {
             id: this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_Label_Template_Group',
-            className: this.mapObject.element.id + '_template',
-            styles: 'pointer-events: none; overflow: hidden; position: absolute;' +
-                'top:' + this.mapObject.mapAreaRect.y + 'px;' +
-                'left:' + this.mapObject.mapAreaRect.x + 'px;' +
-                'height:' + this.mapObject.mapAreaRect.height + 'px;' +
-                'width:' + this.mapObject.mapAreaRect.width + 'px;'
+            className: this.mapObject.element.id + '_template'
         });
+        labelTemplateEle.style.cssText = 'pointer-events: none; overflow: hidden; position: absolute;' +
+            'top:' + this.mapObject.mapAreaRect.y + 'px;' +
+            'left:' + this.mapObject.mapAreaRect.x + 'px;' +
+            'height:' + this.mapObject.mapAreaRect.height + 'px;' +
+            'width:' + this.mapObject.mapAreaRect.width + 'px;';
         if (this.currentLayer.layerData.length !== 0) {
             var _loop_1 = function (i) {
                 var k = void 0;
@@ -623,10 +624,10 @@ var LayerPanel = /** @class */ (function () {
         }
         pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
             (currentShapeData['property'][properties]) : ''));
-        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + index + 3).toString());
+        pathEle.tabIndex = this.mapObject.tabIndex + index + 3;
         pathEle.setAttribute('role', '');
         if (drawingType === 'LineString' || drawingType === 'MultiLineString') {
-            pathEle.setAttribute('style', 'outline:none');
+            pathEle.style.cssText = 'outline:none';
         }
         maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
         if (this.mapObject.toggledShapeElementId) {
@@ -685,9 +686,9 @@ var LayerPanel = /** @class */ (function () {
             this.mapObject.markerModule.calculateZoomCenterPositionAndFactor(this.mapObject.layersCollection);
         }
         var group = (this.mapObject.renderer.createGroup({
-            id: this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_dataLableIndex_Group',
-            style: 'pointer-events: none;'
+            id: this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_dataLableIndex_Group'
         }));
+        group.style.pointerEvents = 'none';
         if (this.mapObject.dataLabelModule && this.currentLayer.dataLabelSettings.visible) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var intersect_1 = [];
@@ -1209,7 +1210,8 @@ var LayerPanel = /** @class */ (function () {
                 }
             }
         }
-        if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset) {
+        if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset || this.mapObject.isZoomByPosition
+            || this.mapObject.zoomNotApplied) {
             this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
         }
     };

package/src/maps/layers/legend.js

@@ -543,14 +543,14 @@ var Legend = /** @class */ (function () {
                         leftPageElement.appendChild(render.drawPath(leftPageOptions));
                         var leftRectPageOptions = new RectOption(map.element.id + '_Left_Page_Rect', 'transparent', {}, 1, new Rect(leftPageX - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
                         var pathEle = render.drawRectangle(leftRectPageOptions);
-                        pathEle.setAttribute('tabindex', ((page + 1) === 1 ? -1 : map.tabIndex + 1).toString());
+                        pathEle.tabIndex = (page + 1) === 1 ? -1 : (map.tabIndex + 1);
                         leftPageElement.appendChild(pathEle);
                         this.wireEvents(leftPageElement);
                         var rightPageOptions = new PathOption(map.element.id + '_Right_Page', '#a6a6a6', 0, '#a6a6a6', ((page + 1) === this.totalPages.length ? 0.5 : 1), 1, '', rightPath);
                         rightPageElement.appendChild(render.drawPath(rightPageOptions));
                         var rightRectPageOptions = new RectOption(map.element.id + '_Right_Page_Rect', 'transparent', {}, 1, new Rect(rightPageX - spacing - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
                         pathEle = render.drawRectangle(rightRectPageOptions);
-                        pathEle.setAttribute('tabindex', ((page + 1) === this.totalPages.length ? -1 : map.tabIndex + 2).toString());
+                        pathEle.tabIndex = (page + 1) === this.totalPages.length ? -1 : (map.tabIndex + 2);
                         rightPageElement.appendChild(pathEle);
                         this.wireEvents(rightPageElement);
                         pagingGroup.appendChild(leftPageElement);
@@ -571,7 +571,7 @@ var Legend = /** @class */ (function () {
                             'dominant-baseline': ''
                         };
                         var pagingTextElement = render.createText(pageTextOptions, pagingText);
-                        pagingTextElement.setAttribute('style', 'user-select: none;');
+                        pagingTextElement.style.cssText = 'user-select: none;';
                         pagingGroup.appendChild(pagingTextElement);
                         this.legendGroup.appendChild(pagingGroup);
                     }
@@ -705,11 +705,14 @@ var Legend = /** @class */ (function () {
                                     this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     var shapeItemCount = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
                                     var shapeOldFillColor = shapeElement.getAttribute('fill');
+                                    var shapeOldOpacity = shapeElement.getAttribute('fill-opacity');
                                     this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
+                                    this.legendHighlightCollection[length - 1]['shapeOldOpacity'] = shapeOldOpacity;
                                     var shapeOldColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount];
+                                    var shapeOldFillOpacity = this.legendHighlightCollection[length - 1]['shapeOldOpacity'];
                                     this.shapePreviousColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'];
-                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
-                                    this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendHighlightColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
+                                    this.setColor(shapeElement, !isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, isNullOrUndefined(module.opacity) ? shapeOldFillOpacity : module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
+                                    this.setColor(targetElement, !isNullOrUndefined(module.fill) ? module.fill : legendHighlightColor, isNullOrUndefined(module.opacity) ? shapeOldFillOpacity : module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                 }
                                 else if (value === 'selection') {
                                     this.legendHighlightCollection = [];
@@ -774,6 +777,7 @@ var Legend = /** @class */ (function () {
         var length = collection.length;
         collection[length - 1]['MapShapeCollection'] = { Elements: [] };
         collection[length - 1]['shapeOldFillColor'] = [];
+        collection[length - 1]['shapeOldOpacity'] = null;
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Legend.prototype.removeLegend = function (collection) {
@@ -785,7 +789,8 @@ var Legend = /** @class */ (function () {
             for (var j = 0; j < dataCount; j++) {
                 var shapeFillColor = item['legendOldFill'].indexOf('url') !== -1
                     ? item['shapeOldFillColor'][j] : item['legendOldFill'];
-                this.setColor(item['MapShapeCollection']['Elements'][j], shapeFillColor, item['shapeOpacity'], item['shapeOldBorderColor'], item['shapeOldBorderWidth'], 'highlight');
+                var shapeOpacity = !isNullOrUndefined(item['shapeOldOpacity']) ? item['shapeOldOpacity'] : item['shapeOpacity'];
+                this.setColor(item['MapShapeCollection']['Elements'][j], shapeFillColor, shapeOpacity, item['shapeOldBorderColor'], item['shapeOldBorderWidth'], 'highlight');
             }
         }
     };

package/src/maps/layers/marker.js

@@ -23,18 +23,18 @@ var Marker = /** @class */ (function () {
         var currentLayer = maps.layersCollection[layerIndex];
         this.markerSVGObject = maps.renderer.createGroup({
             id: maps.element.id + '_Markers_Group',
-            class: 'GroupElement',
-            style: 'pointer-events: auto;'
+            class: 'GroupElement'
         });
+        this.markerSVGObject.style.pointerEvents = 'auto';
         var markerTemplateEle = createElement('div', {
             id: maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
-            className: maps.element.id + '_template',
-            styles: 'overflow: hidden; position: absolute;pointer-events: none;' +
-                'top:' + maps.mapAreaRect.y + 'px;' +
-                'left:' + maps.mapAreaRect.x + 'px;' +
-                'height:' + maps.mapAreaRect.height + 'px;' +
-                'width:' + maps.mapAreaRect.width + 'px;'
+            className: maps.element.id + '_template'
         });
+        markerTemplateEle.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
+            'top:' + maps.mapAreaRect.y + 'px;' +
+            'left:' + maps.mapAreaRect.x + 'px;' +
+            'height:' + maps.mapAreaRect.height + 'px;' +
+            'width:' + maps.mapAreaRect.width + 'px;';
         currentLayer.markerSettings.map(function (markerSettings, markerIndex) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var markerData = markerSettings.dataSource;
@@ -254,7 +254,8 @@ var Marker = /** @class */ (function () {
             }
             if (this.maps.isTileMap && !this.maps.enablePersistence
                 && this.maps.mapScaleValue <= 1) {
-                this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? 1 : this.maps.mapScaleValue;
+                this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? (this.maps.isZoomByPosition ? this.maps.tileZoomLevel : 1)
+                    : this.maps.mapScaleValue;
                 if (this.maps.mapScaleValue === 1 && this.maps.markerZoomFactor === 1) {
                     this.maps.tileTranslatePoint.x = 0;
                     this.maps.tileTranslatePoint.y = 0;
@@ -402,7 +403,7 @@ var Marker = /** @class */ (function () {
         }
         var options = this.getMarker(targetId);
         if (this.maps.markerClusterExpand) {
-            e.target.setAttribute('style', 'cursor: pointer');
+            e.target.style.cursor = 'pointer';
         }
         if (isNullOrUndefined(options)) {
             return;

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

@@ -80,51 +80,49 @@ var NavigationLine = /** @class */ (function () {
                         direction = 0;
                     }
                 }
-                if (point[j]['x'] !== point[j + 1]['x']) {
-                    if (showArrow) {
-                        arrowColor = arrowSettings['properties']['color'];
-                        arrowSize = arrowSettings['properties']['size'];
-                        offSetValue = (arrowSettings['properties']['offSet'] === undefined) ? 0 : arrowSettings['properties']['offSet'];
-                        var divide = (Math.round(arrowSize / 2));
-                        arrowPosition = arrowSettings['properties']['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;
-                        var triId = this.maps.element.id + '_triangle';
-                        var defElement = this.maps.renderer.createDefs();
-                        defElement.innerHTML += '<marker id="' + 'triangle' + i + '"></marker>';
-                        var markerEle = 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');
-                        var d2 = '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);
+                if (showArrow) {
+                    arrowColor = arrowSettings['properties']['color'];
+                    arrowSize = arrowSettings['properties']['size'];
+                    offSetValue = (arrowSettings['properties']['offSet'] === undefined) ? 0 : arrowSettings['properties']['offSet'];
+                    var divide = (Math.round(arrowSize / 2));
+                    arrowPosition = arrowSettings['properties']['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);
                     }
-                    angle = Math.abs(angle);
-                    d = (angle === 0) ? 'M ' + point[j]['x'] + ',' + point[j]['y'] + 'L ' + point[j + 1]['x']
-                        + ',' + point[j + 1]['y'] + ' ' :
-                        'M ' + point[j]['x'] + ',' + point[j]['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);
+                    offSet = (isNullOrUndefined(offSet)) ? 0 : offSet;
+                    var triId = this.maps.element.id + '_triangle';
+                    var defElement = this.maps.renderer.createDefs();
+                    defElement.innerHTML += '<marker id="' + 'triangle' + i + '"></marker>';
+                    var markerEle = 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');
+                    var d2 = '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);
-                    if (!isNullOrUndefined(arrowPosition)) {
-                        var position = (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);
+                    markerEle.appendChild(navigationEle);
+                    defElement.appendChild(markerEle);
+                    navigationGroup.appendChild(defElement);
+                }
+                angle = Math.abs(angle);
+                d = (angle === 0) ? 'M ' + point[j]['x'] + ',' + point[j]['y'] + 'L ' + point[j + 1]['x']
+                    + ',' + point[j + 1]['y'] + ' ' :
+                    'M ' + point[j]['x'] + ',' + point[j]['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);
+                if (!isNullOrUndefined(arrowPosition)) {
+                    var position = (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 = [];
         }

package/src/maps/maps.d.ts

@@ -582,6 +582,8 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
     /** @private */
     tileZoomLevel: number;
     /** @private */
+    isZoomByPosition: boolean;
+    /** @private */
     tileZoomScale: number;
     /** @private */
     staticMapZoom: number;

package/src/maps/maps.js

@@ -37,10 +37,9 @@ import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotat
 import { Marker } from './layers/marker';
 import { load, click, onclick, loaded, doubleClick, resize, shapeSelected, zoomIn } from './model/constants';
 import { getThemeStyle, Theme } from './model/theme';
-import { BingMap } from './layers/bing-map';
 import { LayerPanel } from './layers/layer-panel';
 import { Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';
-import { findPosition, textTrim, TextOption, renderTextElement, convertGeoToPoint, calculateZoomLevel } from '../maps/utils/helper';
+import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel } from '../maps/utils/helper';
 import { Annotations } from '../maps/user-interaction/annotation';
 import { MarkerSettings } from './index';
 import { changeBorderWidth } from './index';
@@ -488,7 +487,9 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.zoomingChange();
-        this.trigger(loaded, { maps: this, isResized: this.isResize });
+        if (!this.isZoomByPosition && !this.zoomNotApplied) {
+            this.trigger(loaded, { maps: this, isResized: this.isResize });
+        }
         this.isResize = false;
     };
     /**
@@ -582,7 +583,7 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.addTabIndex = function () {
         this.element.setAttribute('aria-label', this.description || 'Maps Element');
         this.element.setAttribute('role', '');
-        this.element.setAttribute('tabindex', this.tabIndex.toString());
+        this.element.tabIndex = this.tabIndex;
     };
     // private setSecondaryElementPosition(): void {
     //     if (!this.isTileMap) {
@@ -645,7 +646,7 @@ var Maps = /** @class */ (function (_super) {
                     }
                 }
             }
-            if (this.zoomModule && (this.previousScale !== this.scale)) {
+            if (this.zoomModule && ((this.previousScale !== this.scale) || this.zoomNotApplied || this.isZoomByPosition)) {
                 this.zoomModule.applyTransform(this, true);
             }
         }
@@ -653,9 +654,9 @@ var Maps = /** @class */ (function (_super) {
     Maps.prototype.createSecondaryElement = function () {
         if (isNullOrUndefined(document.getElementById(this.element.id + '_Secondary_Element'))) {
             var secondaryElement = createElement('div', {
-                id: this.element.id + '_Secondary_Element',
-                styles: 'position: absolute;z-index:2;'
+                id: this.element.id + '_Secondary_Element'
             });
+            secondaryElement.style.cssText = 'position: absolute;z-index:2;';
             this.element.appendChild(secondaryElement);
         }
     };
@@ -709,18 +710,20 @@ var Maps = /** @class */ (function (_super) {
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
             var ele = createElement('div', {
-                id: this.element.id + '_tile_parent', styles: 'position: absolute; left: ' +
-                    (this.mapAreaRect.x) + 'px; right: ' + (this.margin.right) + 'px; top: '
-                    + (this.mapAreaRect.y + padding) + 'px; height: ' +
-                    (this.mapAreaRect.height) + 'px; width: '
-                    + (this.mapAreaRect.width) + 'px; overflow: hidden;'
+                id: this.element.id + '_tile_parent'
             });
+            ele.style.cssText = 'position: absolute; left: ' +
+                (this.mapAreaRect.x) + 'px; right: ' + (this.margin.right) + 'px; top: '
+                + (this.mapAreaRect.y + padding) + 'px; height: ' +
+                (this.mapAreaRect.height) + 'px; width: '
+                + (this.mapAreaRect.width) + 'px; overflow: hidden;';
             var ele1 = createElement('div', {
-                id: this.element.id + '_tiles', styles: 'position: absolute; left: ' +
-                    (this.mapAreaRect.x) + 'px;  right: ' + (this.margin.right) + 'px; top: '
-                    + (this.mapAreaRect.y + padding) + 'px; height: ' + (this.mapAreaRect.height) + 'px; width: '
-                    + (this.mapAreaRect.width) + 'px; overflow: hidden;'
+                id: this.element.id + '_tiles'
             });
+            ele1.style.cssText = 'position: absolute; left: ' +
+                (this.mapAreaRect.x) + 'px;  right: ' + (this.margin.right) + 'px; top: '
+                + (this.mapAreaRect.y + padding) + 'px; height: ' + (this.mapAreaRect.height) + 'px; width: '
+                + (this.mapAreaRect.width) + 'px; overflow: hidden;';
             this.element.appendChild(ele);
             this.element.appendChild(ele1);
         }
@@ -1208,9 +1211,6 @@ var Maps = /** @class */ (function (_super) {
             var markerModule = this.markerModule;
             if (element.id.indexOf('shapeIndex') > -1 || element.id.indexOf('Tile') > -1) {
                 this.mergeCluster();
-                if (element.id.indexOf('shapeIndex') > -1) {
-                    this.triggerShapeSelection(element);
-                }
             }
             if (markerModule) {
                 markerModule.markerClick(e);
@@ -1399,32 +1399,30 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.zoomByPosition = function (centerPosition, zoomFactor) {
-        var factor = this.mapLayerPanel.calculateFactor(this.layersCollection[0]);
-        var position;
-        var size = this.mapAreaRect;
+        this.zoomNotApplied = false;
+        var isRefresh = this.zoomSettings.zoomFactor == zoomFactor;
         if (!this.isTileMap && this.zoomModule) {
             if (!isNullOrUndefined(centerPosition)) {
-                position = convertGeoToPoint(centerPosition.latitude, centerPosition.longitude, factor, this.layersCollection[0], this);
-                var mapRect = document.getElementById(this.element.id + '_Layer_Collections').getBoundingClientRect();
-                var svgRect = this.svgObject.getBoundingClientRect();
-                var xDiff = Math.abs(mapRect.left - svgRect.left) / this.scale;
-                var yDiff = Math.abs(mapRect.top - svgRect.top) / this.scale;
-                var x = this.translatePoint.x + xDiff;
-                var y = this.translatePoint.y + yDiff;
-                this.scale = zoomFactor;
-                this.translatePoint.x = ((mapRect.left < svgRect.left ? x : 0) + (size.width / 2) - (position.x * zoomFactor)) / zoomFactor;
-                this.translatePoint.y = ((mapRect.top < svgRect.top ? y : 0) + (size.height / 2) - (position.y * zoomFactor)) / zoomFactor;
-                this.zoomModule.applyTransform(this);
+                this.zoomSettings.zoomFactor = zoomFactor;
+                isRefresh = this.centerPosition.latitude === centerPosition.latitude && this.centerPosition.longitude === centerPosition.longitude ? true : isRefresh;
+                this.centerPosition = centerPosition;
+                this.isZoomByPosition = true;
+                this.mapScaleValue = null;
             }
             else {
-                position = { x: size.width / 2, y: size.height / 2 };
-                this.zoomModule.performZooming(position, zoomFactor, zoomFactor > this.scale ? 'ZoomIn' : 'ZoomOut');
+                this.zoomSettings.zoomFactor = zoomFactor;
+                this.isZoomByPosition = true;
+                this.mapScaleValue = null;
             }
         }
         else if (this.zoomModule) {
-            this.tileZoomLevel = zoomFactor;
-            this.tileTranslatePoint = this.mapLayerPanel['panTileMap'](this.availableSize.width, this.availableSize.height, { x: centerPosition.longitude, y: centerPosition.latitude });
-            this.mapLayerPanel.generateTiles(zoomFactor, this.tileTranslatePoint, null, new BingMap(this));
+            this.tileZoomLevel = this.zoomSettings.zoomFactor = zoomFactor;
+            isRefresh = this.centerPosition.latitude === centerPosition.latitude && this.centerPosition.longitude === centerPosition.longitude ? true : isRefresh;
+            this.centerPosition = centerPosition;
+            this.isZoomByPosition = true;
+        }
+        if (isRefresh) {
+            this.refresh();
         }
     };
     /**
@@ -1617,6 +1615,11 @@ var Maps = /** @class */ (function (_super) {
         var centerLatitude;
         var centerLongtitude;
         var isTwoCoordinates = false;
+        this.centerPosition = {
+            latitude: null,
+            longitude: null
+        };
+        this.isZoomByPosition = false;
         if (isNullOrUndefined(maxLatitude) && isNullOrUndefined(maxLongitude)
             || isNullOrUndefined(minLatitude) && isNullOrUndefined(minLongitude)) {
             minLatitude = isNullOrUndefined(minLatitude) ? 0 : minLatitude;

package/src/maps/model/base.js

@@ -598,7 +598,7 @@ var ZoomSettings = /** @class */ (function (_super) {
         Property(false)
     ], ZoomSettings.prototype, "doubleClickZoom", void 0);
     __decorate([
-        Property(false)
+        Property(true)
     ], ZoomSettings.prototype, "pinchZooming", void 0);
     __decorate([
         Property(false)

package/src/maps/user-interaction/annotation.js

@@ -43,8 +43,9 @@ var Annotations = /** @class */ (function () {
         var availSize = map.availableSize;
         var id = map.element.id + '_Annotation_' + annotationIndex;
         var childElement = createElement('div', {
-            id: map.element.id + '_Annotation_' + annotationIndex, styles: 'position: absolute; z-index:' + annotation.zIndex + ';'
+            id: map.element.id + '_Annotation_' + annotationIndex
         });
+        childElement.style.cssText = 'position: absolute; z-index:' + annotation.zIndex + ';';
         var argsData = {
             cancel: false, name: annotationRendering, content: annotation.content,
             annotation: annotation