@syncfusion/ej2-maps 20.3.49 → 20.3.56

package/dist/es6/ej2-maps.es2015.js

@@ -614,9 +614,9 @@ function renderTextElement(option, style, color, parent, isMinus = false) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function convertElement(element, markerId, data, index, mapObj) {
     const childElement = createElement('div', {
-        id: markerId,
-        styles: 'position: absolute;pointer-events: auto;'
+        id: markerId
     });
+    childElement.style.cssText = 'position: absolute;pointer-events: auto;';
     let elementLength = element.length;
     while (elementLength > 0) {
         childElement.appendChild(element[0]);
@@ -702,11 +702,12 @@ function convertElementFromLabel(element, labelId, data, index, mapObj) {
         // eslint-disable-next-line @typescript-eslint/ban-types
         templateHtml = templateHtml.replace(new RegExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
     }
-    return createElement('div', {
+    let templateEle = createElement('div', {
         id: labelId,
-        innerHTML: templateHtml,
-        styles: 'position: absolute'
+        innerHTML: templateHtml
     });
+    templateEle.style.position = 'absolute';
+    return templateEle;
 }
 /**
  *
@@ -2104,7 +2105,7 @@ function getZoomTranslate(mapObject, layer, animate) {
         mapObject.zoomSettings.zoomFactor ===
             mapObject.mapScaleValue ? mapObject.zoomSettings.zoomFactor :
         mapObject.zoomSettings.zoomFactor !== mapObject.mapScaleValue && !mapObject.centerPositionChanged ? mapObject.mapScaleValue : mapObject.zoomSettings.zoomFactor;
-    if (mapObject.zoomSettings.shouldZoomInitially) {
+    if (mapObject.zoomSettings.shouldZoomInitially && !mapObject.isZoomByPosition) {
         mapObject.mapScaleValue = zoomFactorValue = scaleFactor = ((mapObject.enablePersistence || mapObject.zoomSettings.shouldZoomInitially) && mapObject.scale === 1)
             ? mapObject.scale : (isNullOrUndefined(mapObject.markerZoomFactor)) ? mapObject.mapScaleValue : mapObject.markerZoomFactor;
         zoomFactorValue = mapObject.mapScaleValue;
@@ -2138,6 +2139,10 @@ function getZoomTranslate(mapObject, layer, animate) {
                 y = -point.y + topPosition;
             }
             else {
+                if (mapObject.isZoomByPosition) {
+                    mapObject.zoomTranslatePoint.x = -point.x + leftPosition;
+                    mapObject.zoomTranslatePoint.y = -point.y + topPosition;
+                }
                 x = mapObject.zoomTranslatePoint.x;
                 y = mapObject.zoomTranslatePoint.y;
                 zoomFactorValue = zoomFactor;
@@ -2345,7 +2350,7 @@ function triggerShapeEvent(targetId, selection, maps, eventName) {
         target: targetId,
         maps: maps
     };
-    maps.trigger(eventName, eventArgs, (observedArgs) => {
+    maps.trigger(eventName, eventArgs, () => {
         eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? eventArgs.opacity : eventArgs.border.opacity;
     });
     return eventArgs;
@@ -2572,11 +2577,11 @@ function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element, isTou
     }
     if (!tooltip) {
         tooltip = createElement('div', {
-            id: id,
-            styles: 'background-color: rgb(255, 255, 255) !important; color:black !important; ' +
-                'position:absolute;border:1px solid rgb(0, 0, 0); padding-left:5px;' +
-                'font-size:12px; font-family: "Segoe UI"; text-align:center'
+            id: id
         });
+        tooltip.style.cssText = 'background-color: rgb(255, 255, 255) !important; color:black !important; ' +
+            'position:absolute;border:1px solid rgb(0, 0, 0); padding-left:5px;' +
+            'font-size:12px; font-family: "Segoe UI"; text-align:center';
     }
     if (x < (areaWidth - width)) {
         // eslint-disable-next-line no-self-assign
@@ -2674,13 +2679,14 @@ function createTooltip(id, text, top, left, fontSize) {
         'position:absolute;border:1px solid #707070;font-size:' + fontSize + ';border-radius:2px;';
     if (!tooltip) {
         tooltip = createElement('div', {
-            id: id, innerHTML: '&nbsp;' + text + '&nbsp;', styles: style
+            id: id, innerHTML: '&nbsp;' + text + '&nbsp;'
         });
+        tooltip.style.cssText = style;
         document.body.appendChild(tooltip);
     }
     else {
-        tooltip.setAttribute('innerHTML', '&nbsp;' + text + '&nbsp;');
-        tooltip.setAttribute('styles', style);
+        tooltip.innerHTML = '&nbsp;' + text + '&nbsp;';
+        tooltip.style.cssText = style;
     }
 }
 /**
@@ -3076,7 +3082,7 @@ function animate(element, delay, duration, process, end) {
             end.call(this, { element: element });
             if (element.id.indexOf('Marker') > -1) {
                 let markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
-                markerElement.setAttribute('style', markerStyle);
+                markerElement.style.cssText = markerStyle;
             }
         }
     };
@@ -4230,7 +4236,7 @@ __decorate$1([
     Property(false)
 ], ZoomSettings.prototype, "doubleClickZoom", void 0);
 __decorate$1([
-    Property(false)
+    Property(true)
 ], ZoomSettings.prototype, "pinchZooming", void 0);
 __decorate$1([
     Property(false)
@@ -4662,18 +4668,18 @@ class Marker {
         const 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';
         const 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((markerSettings, markerIndex) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const markerData = markerSettings.dataSource;
@@ -4890,7 +4896,8 @@ class Marker {
             }
             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;
@@ -5037,7 +5044,7 @@ class Marker {
         }
         const options = this.getMarker(targetId);
         if (this.maps.markerClusterExpand) {
-            e.target.setAttribute('style', 'cursor: pointer');
+            e.target.style.cursor = 'pointer';
         }
         if (isNullOrUndefined(options)) {
             return;
@@ -5553,10 +5560,10 @@ class LayerPanel {
                 height: areaRect.height
             });
             const 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);
         }
@@ -5610,13 +5617,13 @@ class LayerPanel {
             (!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;
@@ -5628,7 +5635,8 @@ class LayerPanel {
         let 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);
             }
         }
@@ -5644,7 +5652,7 @@ class LayerPanel {
         else {
             center = { x: null, y: null };
         }
-        let zoomFactorValue = panel.mapObject.zoomSettings.shouldZoomInitially ?
+        let 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))
@@ -5898,13 +5906,13 @@ class LayerPanel {
         const colors = shapeSettings.palette.length > 1 ? shapeSettings.palette : getShapeColor(this.mapObject.theme);
         const 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) {
             for (let i = 0; i < this.currentLayer.layerData.length; i++) {
                 let k;
@@ -6132,10 +6140,10 @@ class LayerPanel {
         }
         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) {
@@ -6189,9 +6197,9 @@ class LayerPanel {
             this.mapObject.markerModule.calculateZoomCenterPositionAndFactor(this.mapObject.layersCollection);
         }
         const 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
             const intersect = [];
@@ -6707,7 +6715,8 @@ class LayerPanel {
                 }
             }
         }
-        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);
         }
     }
@@ -6987,8 +6996,9 @@ class Annotations {
         const availSize = map.availableSize;
         const id = map.element.id + '_Annotation_' + annotationIndex;
         const 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 + ';';
         const argsData = {
             cancel: false, name: annotationRendering, content: annotation.content,
             annotation: annotation
@@ -7505,7 +7515,9 @@ let Maps = class Maps extends Component {
             }
         }
         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;
     }
     /**
@@ -7599,7 +7611,7 @@ let Maps = class Maps extends Component {
     addTabIndex() {
         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) {
@@ -7662,7 +7674,7 @@ let Maps = class Maps extends Component {
                     }
                 }
             }
-            if (this.zoomModule && (this.previousScale !== this.scale)) {
+            if (this.zoomModule && ((this.previousScale !== this.scale) || this.zoomNotApplied || this.isZoomByPosition)) {
                 this.zoomModule.applyTransform(this, true);
             }
         }
@@ -7670,9 +7682,9 @@ let Maps = class Maps extends Component {
     createSecondaryElement() {
         if (isNullOrUndefined(document.getElementById(this.element.id + '_Secondary_Element'))) {
             const 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);
         }
     }
@@ -7726,18 +7738,20 @@ let Maps = class Maps extends Component {
             removeElement(this.element.id + '_tiles');
             removeElement('animated_tiles');
             const 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;';
             const 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);
         }
@@ -8219,9 +8233,6 @@ let Maps = class Maps extends Component {
             const 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);
@@ -8401,32 +8412,30 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     zoomByPosition(centerPosition, zoomFactor) {
-        const factor = this.mapLayerPanel.calculateFactor(this.layersCollection[0]);
-        let position;
-        const size = this.mapAreaRect;
+        this.zoomNotApplied = false;
+        let isRefresh = this.zoomSettings.zoomFactor == zoomFactor;
         if (!this.isTileMap && this.zoomModule) {
             if (!isNullOrUndefined(centerPosition)) {
-                position = convertGeoToPoint(centerPosition.latitude, centerPosition.longitude, factor, this.layersCollection[0], this);
-                const mapRect = document.getElementById(this.element.id + '_Layer_Collections').getBoundingClientRect();
-                const svgRect = this.svgObject.getBoundingClientRect();
-                const xDiff = Math.abs(mapRect.left - svgRect.left) / this.scale;
-                const yDiff = Math.abs(mapRect.top - svgRect.top) / this.scale;
-                const x = this.translatePoint.x + xDiff;
-                const 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();
         }
     }
     /**
@@ -8617,6 +8626,11 @@ let Maps = class Maps extends Component {
         let centerLatitude;
         let centerLongtitude;
         let 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;
@@ -9893,8 +9907,14 @@ class DataLabel {
                         datasrcObj : shapeData['properties'], this.maps, eventargs.template, this.maps.element.id + '_LabelTemplate', false) : document.createElement('div');
                     templateElement.innerHTML = !templateFn ? eventargs.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 {
@@ -10134,51 +10154,49 @@ class NavigationLine {
                         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'];
-                        const 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;
-                        const triId = this.maps.element.id + '_triangle';
-                        const defElement = this.maps.renderer.createDefs();
-                        defElement.innerHTML += '<marker id="' + 'triangle' + i + '"></marker>';
-                        const 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');
-                        const 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);
-                    }
-                    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);
+                if (showArrow) {
+                    arrowColor = arrowSettings['properties']['color'];
+                    arrowSize = arrowSettings['properties']['size'];
+                    offSetValue = (arrowSettings['properties']['offSet'] === undefined) ? 0 : arrowSettings['properties']['offSet'];
+                    const 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;
+                    const triId = this.maps.element.id + '_triangle';
+                    const defElement = this.maps.renderer.createDefs();
+                    defElement.innerHTML += '<marker id="' + 'triangle' + i + '"></marker>';
+                    const 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');
+                    const 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)) {
-                        const 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)) {
+                    const 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 = [];
         }
@@ -10744,14 +10762,14 @@ class Legend {
                         leftPageElement.appendChild(render.drawPath(leftPageOptions));
                         const 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, '', '');
                         let 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);
                         const 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));
                         const 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);
@@ -10772,7 +10790,7 @@ class Legend {
                             'dominant-baseline': ''
                         };
                         let pagingTextElement = render.createText(pageTextOptions, pagingText);
-                        pagingTextElement.setAttribute('style', 'user-select: none;');
+                        pagingTextElement.style.cssText = 'user-select: none;';
                         pagingGroup.appendChild(pagingTextElement);
                         this.legendGroup.appendChild(pagingGroup);
                     }
@@ -10906,11 +10924,14 @@ class Legend {
                                     this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                     const shapeItemCount = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
                                     const shapeOldFillColor = shapeElement.getAttribute('fill');
+                                    const shapeOldOpacity = shapeElement.getAttribute('fill-opacity');
                                     this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
+                                    this.legendHighlightCollection[length - 1]['shapeOldOpacity'] = shapeOldOpacity;
                                     const shapeOldColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount];
+                                    const 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 = [];
@@ -10975,6 +10996,7 @@ class Legend {
         const 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
     removeLegend(collection) {
@@ -10986,7 +11008,8 @@ class Legend {
             for (let j = 0; j < dataCount; j++) {
                 const 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');
+                const shapeOpacity = !isNullOrUndefined(item['shapeOldOpacity']) ? item['shapeOldOpacity'] : item['shapeOpacity'];
+                this.setColor(item['MapShapeCollection']['Elements'][j], shapeFillColor, shapeOpacity, item['shapeOldBorderColor'], item['shapeOldBorderWidth'], 'highlight');
             }
         }
     }
@@ -12516,16 +12539,34 @@ class Highlight {
             const marker$$1 = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker$$1].highlightSettings.enable;
         }
-        const border = {
-            color: (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color),
-            width: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale),
-            opacity: this.highlightSettings.border.opacity
-        };
+        const borderColor = (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color);
+        const borderWidth = (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale);
+        const borderOpacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity : this.highlightSettings.border.opacity;
         const eventArgs = {
             opacity: this.highlightSettings.opacity,
             fill: (targetEle.parentElement.id.indexOf('LineString') === -1) ? (targetEle.id.indexOf('NavigationIndex') === -1 ? !isNullOrUndefined(this.highlightSettings.fill)
                 ? this.highlightSettings.fill : targetEle.getAttribute('fill') : 'none') : 'transparent',
-            border: border,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
+            cancel: false
+        };
+        const shapeEventArgs = {
+            opacity: eventArgs.opacity,
+            fill: eventArgs.fill,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
+            name: shapeHighlight,
+            target: targetEle.id,
+            cancel: false,
+            shapeData: shapeData,
+            data: data,
+            maps: this.maps
+        };
+        if (targetEle.id.indexOf('shapeIndex') > -1) {
+            this.maps.trigger(shapeHighlight, shapeEventArgs, () => { });
+        }
+        const itemEventArgs = {
+            opacity: eventArgs.opacity,
+            fill: eventArgs.fill,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
             name: itemHighlight,
             target: targetEle.id,
             cancel: false,
@@ -12533,13 +12574,18 @@ class Highlight {
             data: data,
             maps: this.maps
         };
-        this.maps.trigger(itemHighlight, eventArgs, () => {
-            eventArgs.border.opacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity : this.highlightSettings.border.opacity;
-            this.highlightMap(targetEle, eventArgs);
+        this.maps.trigger(itemHighlight, itemEventArgs, () => {
+            itemEventArgs.cancel = eventArgs.cancel !== itemEventArgs.cancel ? itemEventArgs.cancel : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.cancel : eventArgs.cancel;
+            itemEventArgs.fill = eventArgs.fill !== itemEventArgs.fill ? itemEventArgs.fill : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.fill : eventArgs.fill;
+            itemEventArgs.opacity = eventArgs.opacity !== itemEventArgs.opacity ? itemEventArgs.opacity : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.opacity : eventArgs.opacity;
+            itemEventArgs.border.color = eventArgs.border.color !== itemEventArgs.border.color ? itemEventArgs.border.color : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.color : eventArgs.border.color;
+            itemEventArgs.border.width = eventArgs.border.width !== itemEventArgs.border.width ? itemEventArgs.border.width : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.width : eventArgs.border.width;
+            itemEventArgs.border.opacity = eventArgs.border.opacity !== itemEventArgs.border.opacity ? itemEventArgs.border.opacity : targetEle.id.indexOf('shapeIndex') > -1 ? shapeEventArgs.border.opacity : eventArgs.border.opacity;
+            this.highlightMap(targetEle, itemEventArgs);
         });
     }
     highlightMap(targetEle, eventArgs) {
-        if (targetEle.getAttribute('class') === 'highlightMapStyle') {
+        if (targetEle.getAttribute('class') === 'highlightMapStyle' || eventArgs.cancel) {
             return;
         }
         else {
@@ -13041,9 +13087,9 @@ class MapsTooltip {
             else {
                 tooltipEle = createElement('div', {
                     id: this.maps.element.id + '_mapsTooltip',
-                    className: 'EJ2-maps-Tooltip',
-                    styles: 'position: absolute;pointer-events:none;'
+                    className: 'EJ2-maps-Tooltip'
                 });
+                tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
                 document.getElementById(this.maps.element.id + '_Secondary_Element').appendChild(tooltipEle);
             }
             if (option.template !== null && Object.keys(typeof option.template === 'object' ? option.template : {}).length === 1) {
@@ -13121,7 +13167,7 @@ class MapsTooltip {
                         && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
                         let templateStyle = tooltipTemplateElement.getAttribute('style');
                         templateStyle = templateStyle.replace('pointer-events: none;', 'position-events:all;');
-                        tooltipTemplateElement.setAttribute('style', templateStyle);
+                        tooltipTemplateElement.style.cssText = templateStyle;
                     }
                 }
                 else {
@@ -13709,7 +13755,7 @@ class Zoom {
                                         }
                                         else {
                                             markerStyle = 'visibility:hidden';
-                                            currentEle.setAttribute('style', markerStyle);
+                                            currentEle.style.cssText = markerStyle;
                                         }
                                     }
                                 }
@@ -13825,22 +13871,22 @@ class Zoom {
         const layerIndex = parseInt((element ? element : layerElement).id.split('_LayerIndex_')[1].split('_')[0], 10);
         const markerSVGObject = this.maps.renderer.createGroup({
             id: this.maps.element.id + '_Markers_Group',
-            class: 'GroupElement',
-            style: 'pointer-events: auto;'
+            class: 'GroupElement'
         });
+        markerSVGObject.style.pointerEvents = 'auto';
         if (document.getElementById(markerSVGObject.id)) {
             removeElement(markerSVGObject.id);
         }
         const mapsAreaRect = this.maps.mapAreaRect;
         const markerTemplateElements = createElement('div', {
             id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
-            className: 'template',
-            styles: 'overflow: hidden; position: absolute;pointer-events: none;' +
-                'top:' + mapsAreaRect.y + 'px;' +
-                'left:' + mapsAreaRect.x + 'px;' +
-                'height:' + mapsAreaRect.height + 'px;' +
-                'width:' + mapsAreaRect.width + 'px;'
+            className: 'template'
         });
+        markerTemplateElements.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
+            'top:' + mapsAreaRect.y + 'px;' +
+            'left:' + mapsAreaRect.x + 'px;' +
+            'height:' + mapsAreaRect.height + 'px;' +
+            'width:' + mapsAreaRect.width + 'px;';
         if (document.getElementById(markerTemplateElements.id)) {
             removeElement(markerTemplateElements.id);
         }
@@ -13971,16 +14017,26 @@ class Zoom {
                 let labelX = label['location']['x'];
                 let labelY = label['location']['y'];
                 if (type === 'Template') {
-                    const layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
-                    labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
-                    labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
-                    const templateOffset = element.getBoundingClientRect();
-                    const layerOffset = layerEle.getBoundingClientRect();
-                    const elementOffset = element.parentElement.getBoundingClientRect();
-                    const x = ((labelX) + (layerOffset.left - elementOffset.left) - (templateOffset.width / 2));
-                    const y = ((labelY) + (layerOffset.top - elementOffset.top) - (templateOffset.height / 2));
-                    element.style.left = x + 'px';
-                    element.style.top = y + 'px';
+                    let locationX = 0;
+                    let locationY = 0;
+                    if (this.maps.isTileMap) {
+                        zoomtext = label['dataLabelText'];
+                        zoomtextSize = measureText(zoomtext, style);
+                        locationX = ((labelX + x) * scale) - (zoomtextSize['width'] / 2);
+                        locationY = ((labelY + y) * scale) - (zoomtextSize['height']);
+                    }
+                    else {
+                        const layerEle = getElementByID(this.maps.element.id + '_Layer_Collections');
+                        labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
+                        labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
+                        const templateOffset = element.getBoundingClientRect();
+                        const layerOffset = layerEle.getBoundingClientRect();
+                        const elementOffset = element.parentElement.getBoundingClientRect();
+                        locationX = ((labelX) + (layerOffset.left - elementOffset.left));
+                        locationY = ((labelY) + (layerOffset.top - elementOffset.top));
+                    }
+                    element.style.left = locationX + 'px';
+                    element.style.top = locationY + 'px';
                 }
                 else {
                     labelX = ((labelX + x) * scale);
@@ -14111,10 +14167,10 @@ class Zoom {
                         if (element['style']['display'] !== 'none') {
                             if ((staticMapOffset['x'] > templateOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < templateOffset['x'] + templateOffset['width'])
                                 && (staticMapOffset['y'] > templateOffset['y'] || staticMapOffset['y'] + staticMapOffset['height'] < templateOffset['y'] + templateOffset['height'])) {
-                                element['style']['display'] = 'none';
+                                element.style.display = 'none';
                             }
                             else if ((staticMapOffset['x'] > templateOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < templateOffset['x'] + templateOffset['width'])) {
-                                element['style']['display'] = 'none';
+                                element.style.display = 'none';
                             }
                         }
                     }
@@ -14251,7 +14307,6 @@ class Zoom {
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
-        this.maps.zoomNotApplied = false;
         this.isSingleClick = false;
     }
     toAlignSublayer() {
@@ -14591,7 +14646,8 @@ class Zoom {
     alignToolBar() {
         const map = this.maps;
         const padding = 10;
-        const element = createElement('div', { id: map.element.id + '_ToolBar', styles: 'position:absolute;z-index:2' });
+        const element = createElement('div', { id: map.element.id + '_ToolBar' });
+        element.style.cssText = 'position:absolute;z-index:2';
         const rectSVGObject = map.renderer.createSvg({
             id: map.element.id + '_Zooming_ToolBar', width: 10, height: 10
         });