@syncfusion/ej2-maps 20.3.49 → 20.3.56

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

@@ -1,4 +1,4 @@
-import { itemHighlight } from '../index';
+import { itemHighlight, shapeHighlight } from '../index';
 import { Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getElementsByClassName, getElement, removeClass, createStyle, customizeStyle, getTargetElement } from '../utils/helper';
 /**
@@ -158,16 +158,34 @@ var Highlight = /** @class */ (function () {
             var marker = parseInt(targetEle.id.split('_MarkerIndex_')[1].split('_')[0], 10);
             isMarkerSelect = this.maps.layers[layerIndex].markerSettings[marker].highlightSettings.enable;
         }
-        var 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
-        };
+        var borderColor = (targetEle.parentElement.id.indexOf('LineString') === -1) ? this.highlightSettings.border.color : (this.highlightSettings.fill || this.highlightSettings.border.color);
+        var borderWidth = (targetEle.parentElement.id.indexOf('LineString') === -1) ? (this.highlightSettings.border.width / (isMarkerSelect ? 1 : this.maps.scale)) : (this.highlightSettings.border.width / this.maps.scale);
+        var borderOpacity = isNullOrUndefined(this.highlightSettings.border.opacity) ? this.highlightSettings.opacity : this.highlightSettings.border.opacity;
         var 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
+        };
+        var 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, function () { });
+        }
+        var itemEventArgs = {
+            opacity: eventArgs.opacity,
+            fill: eventArgs.fill,
+            border: { color: borderColor, width: borderWidth, opacity: borderOpacity },
             name: itemHighlight,
             target: targetEle.id,
             cancel: false,
@@ -175,15 +193,20 @@ var Highlight = /** @class */ (function () {
             data: data,
             maps: this.maps
         };
-        this.maps.trigger(itemHighlight, eventArgs, function () {
-            eventArgs.border.opacity = isNullOrUndefined(_this.highlightSettings.border.opacity) ? _this.highlightSettings.opacity : _this.highlightSettings.border.opacity;
-            _this.highlightMap(targetEle, eventArgs);
+        this.maps.trigger(itemHighlight, itemEventArgs, function () {
+            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);
         });
     };
     Highlight.prototype.highlightMap = function (targetEle, eventArgs) {
         var parentElement;
         var children;
-        if (targetEle.getAttribute('class') === 'highlightMapStyle') {
+        if (targetEle.getAttribute('class') === 'highlightMapStyle' || eventArgs.cancel) {
             return;
         }
         else {

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

@@ -161,9 +161,9 @@ var MapsTooltip = /** @class */ (function () {
             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) {
@@ -241,7 +241,7 @@ var MapsTooltip = /** @class */ (function () {
                         && tooltipTemplateElement.innerHTML.indexOf('</a>') !== -1) {
                         var templateStyle = tooltipTemplateElement.getAttribute('style');
                         templateStyle = templateStyle.replace('pointer-events: none;', 'position-events:all;');
-                        tooltipTemplateElement.setAttribute('style', templateStyle);
+                        tooltipTemplateElement.style.cssText = templateStyle;
                     }
                 }
                 else {

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

@@ -455,7 +455,7 @@ var Zoom = /** @class */ (function () {
                                         }
                                         else {
                                             markerStyle = 'visibility:hidden';
-                                            currentEle.setAttribute('style', markerStyle);
+                                            currentEle.style.cssText = markerStyle;
                                         }
                                     }
                                 }
@@ -573,22 +573,22 @@ var Zoom = /** @class */ (function () {
         var layerIndex = parseInt((element ? element : layerElement).id.split('_LayerIndex_')[1].split('_')[0], 10);
         var 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);
         }
         var mapsAreaRect = this.maps.mapAreaRect;
         var 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);
         }
@@ -720,16 +720,26 @@ var Zoom = /** @class */ (function () {
                 var labelX = label['location']['x'];
                 var labelY = label['location']['y'];
                 if (type === 'Template') {
-                    var 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);
-                    var templateOffset = element.getBoundingClientRect();
-                    var layerOffset = layerEle.getBoundingClientRect();
-                    var elementOffset = element.parentElement.getBoundingClientRect();
-                    var x_3 = ((labelX) + (layerOffset.left - elementOffset.left) - (templateOffset.width / 2));
-                    var y_2 = ((labelY) + (layerOffset.top - elementOffset.top) - (templateOffset.height / 2));
-                    element.style.left = x_3 + 'px';
-                    element.style.top = y_2 + 'px';
+                    var locationX = 0;
+                    var 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 {
+                        var 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);
+                        var templateOffset = element.getBoundingClientRect();
+                        var layerOffset = layerEle.getBoundingClientRect();
+                        var 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);
@@ -861,10 +871,10 @@ var Zoom = /** @class */ (function () {
                         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';
                             }
                         }
                     }
@@ -1001,7 +1011,6 @@ var Zoom = /** @class */ (function () {
         }
         map.zoomTranslatePoint = map.translatePoint;
         this.mouseDownPoints = this.mouseMovePoints;
-        this.maps.zoomNotApplied = false;
         this.isSingleClick = false;
     };
     Zoom.prototype.toAlignSublayer = function () {
@@ -1352,7 +1361,8 @@ var Zoom = /** @class */ (function () {
     Zoom.prototype.alignToolBar = function () {
         var map = this.maps;
         var padding = 10;
-        var element = createElement('div', { id: map.element.id + '_ToolBar', styles: 'position:absolute;z-index:2' });
+        var element = createElement('div', { id: map.element.id + '_ToolBar' });
+        element.style.cssText = 'position:absolute;z-index:2';
         var rectSVGObject = map.renderer.createSvg({
             id: map.element.id + '_Zooming_ToolBar', width: 10, height: 10
         });

package/src/maps/utils/helper.js

@@ -684,9 +684,9 @@ export function renderTextElement(option, style, color, parent, isMinus) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function convertElement(element, markerId, data, index, mapObj) {
     var childElement = createElement('div', {
-        id: markerId,
-        styles: 'position: absolute;pointer-events: auto;'
+        id: markerId
     });
+    childElement.style.cssText = 'position: absolute;pointer-events: auto;';
     var elementLength = element.length;
     while (elementLength > 0) {
         childElement.appendChild(element[0]);
@@ -773,11 +773,12 @@ export 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', {
+    var templateEle = createElement('div', {
         id: labelId,
-        innerHTML: templateHtml,
-        styles: 'position: absolute'
+        innerHTML: templateHtml
     });
+    templateEle.style.position = 'absolute';
+    return templateEle;
 }
 /**
  *
@@ -2180,7 +2181,7 @@ export 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;
@@ -2214,6 +2215,10 @@ export 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;
@@ -2422,7 +2427,7 @@ export function triggerShapeEvent(targetId, selection, maps, eventName) {
         target: targetId,
         maps: maps
     };
-    maps.trigger(eventName, eventArgs, function (observedArgs) {
+    maps.trigger(eventName, eventArgs, function () {
         eventArgs.border.opacity = isNullOrUndefined(eventArgs.border.opacity) ? eventArgs.opacity : eventArgs.border.opacity;
     });
     return eventArgs;
@@ -2651,11 +2656,11 @@ export function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element
     }
     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
@@ -2753,13 +2758,14 @@ export 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;
     }
 }
 /**
@@ -3157,7 +3163,7 @@ export function animate(element, delay, duration, process, end) {
             end.call(_this, { element: element });
             if (element.id.indexOf('Marker') > -1) {
                 var markerElement = getElementByID(element.id.split('_Layer')[0] + '_Markers_Group');
-                markerElement.setAttribute('style', markerStyle);
+                markerElement.style.cssText = markerStyle;
             }
         }
     };