@syncfusion/ej2-maps 20.2.38 → 20.2.43

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

@@ -1007,8 +1007,8 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                             shapeCustom['borderWidth'] = eventArg.border.width;
                             shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters_1.opacity : eventArg.border.opacity;
                         }
-                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : ((location_1.x + transPoint.x + eventArg.width) * maps.mapScaleValue);
-                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : ((location_1.y + transPoint.y + (eventArg.height / 2)) * maps.mapScaleValue);
+                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : tempX + postionY - (eventArg.width / 2);
+                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : tempY - (eventArg.height / 2);
                         if (maps.isTileMap && !maps.zoomSettings.enable) {
                             tempX = location_1.x;
                             tempY = location_1.y;
@@ -1087,7 +1087,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
             layerElement.appendChild(markerCollection);
         }
-        var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_0_markerCluster');
+        var markerCluster = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster');
         if (!isNullOrUndefined(markerCluster)) {
             markerCluster.remove();
         }
@@ -2235,6 +2235,8 @@ function getZoomTranslate(mapObject, layer, animate) {
         }
     }
     scaleFactor = (mapObject.enablePersistence) ? (mapObject.mapScaleValue === 0 ? 1 : mapObject.mapScaleValue) : scaleFactor;
+    mapObject.widthBeforeRefresh = mapObject.availableSize.width;
+    mapObject.heightBeforeRefresh = mapObject.availableSize.height;
     return { scale: animate ? 1 : scaleFactor, location: new Point(x, y) };
 }
 /**
@@ -3117,7 +3119,11 @@ function animate(element, delay, duration, process, end) {
         else {
             window.cancelAnimationFrame(clearAnimation);
             end.call(_this, { element: element });
-            element.setAttribute('style', markerStyle);
+            if (element.id.indexOf('Marker') > -1) {
+                console.log(element);
+                var markerElement = getElementByID(element.id.split('_')[0] + '_Markers_Group');
+                markerElement.setAttribute('style', markerStyle);
+            }
         }
     };
     clearAnimation = window.requestAnimationFrame(startAnimation);
@@ -5294,6 +5300,12 @@ var loaded = 'loaded';
  * @private
  */
 var click = 'click';
+/**
+ * Specifies the maps onclick event name.
+ *
+ * @private
+ */
+var onclick = 'onclick';
 /**
  * Specifies the maps right click event name.
  *
@@ -6952,7 +6964,7 @@ var LayerPanel = /** @__PURE__ @class */ (function () {
                 else {
                     if (type !== 'Pan' && element1 && element) {
                         element1.appendChild(element.children[0]);
-                        if (!isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
+                        if (!_this.mapObject.isAddLayer && !isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
                             document.getElementById(_this.mapObject.element.id + '_animated_tiles').id =
                                 _this.mapObject.element.id + '_animated_tiles_old';
                         }
@@ -7481,6 +7493,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
         this.renderArea();
         this.processRequestJsonData();
         this.renderComplete();
+        this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
     };
     /**
      * To Initialize the control rendering.
@@ -8285,24 +8298,35 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 latitude: latitude, longitude: longitude,
                 isShapeSelected: this.SelectedElement(targetEle)
             };
-            this.trigger('click', eventArgs_1, function (mouseArgs) {
-                if (targetEle.id.indexOf('shapeIndex') > -1) {
-                    _this.mergeCluster();
-                    if (getElement(_this.element.id + '_mapsTooltip') &&
-                        _this.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_') > -1) {
-                        removeElement(_this.element.id + '_mapsTooltip');
-                    }
-                }
-                if (_this.markerModule) {
-                    _this.markerModule.markerClusterClick(e);
-                }
-                if (!eventArgs_1.cancel) {
-                    _this.notify(click, targetEle);
-                }
-                if (!eventArgs_1.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
-                    _this.triggerShapeSelection(targetEle);
-                }
-            });
+            if (this.onclick) {
+                eventArgs_1.name = onclick;
+                this.trigger('onclick', eventArgs_1, function (mouseArgs) {
+                    _this.clickHandler(e, eventArgs_1, targetEle);
+                });
+            }
+            else {
+                this.trigger('click', eventArgs_1, function (mouseArgs) {
+                    _this.clickHandler(e, eventArgs_1, targetEle);
+                });
+            }
+        }
+    };
+    Maps.prototype.clickHandler = function (e, eventArgs, targetEle) {
+        if (targetEle.id.indexOf('shapeIndex') > -1) {
+            this.mergeCluster();
+            if (getElement(this.element.id + '_mapsTooltip') &&
+                this.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_') > -1) {
+                removeElement(this.element.id + '_mapsTooltip');
+            }
+        }
+        if (this.markerModule) {
+            this.markerModule.markerClusterClick(e);
+        }
+        if (!eventArgs.cancel) {
+            this.notify(click, targetEle);
+        }
+        if (!eventArgs.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
+            this.triggerShapeSelection(targetEle);
         }
     };
     Maps.prototype.triggerShapeSelection = function (targetEle) {
@@ -8402,13 +8426,6 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     latitude = latLongValue.latitude;
                     longitude = latLongValue.longitude;
                 }
-                var eventArgs = {
-                    cancel: false, name: click, target: targetId, x: e.clientX, y: e.clientY,
-                    latitude: latitude, longitude: longitude, isShapeSelected: this.SelectedElement(targetEle)
-                };
-                // eslint-disable-next-line @typescript-eslint/no-empty-function
-                this.trigger('click', eventArgs, function (mouseArgs) {
-                });
             }
             this.titleTooltip(e, pageX, pageY, true);
             if (!isNullOrUndefined(this.legendModule)) {
@@ -8682,8 +8699,10 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @param {Object} layer - Specifies the layer for the maps.
      */
     Maps.prototype.addLayer = function (layer) {
-        this.layers.push(new LayerSettings(this.layers[0], 'layers', layer));
-        this.refresh();
+        var mapsLayer = this.layers;
+        mapsLayer.push(layer);
+        this.isAddLayer = true;
+        this.layers = mapsLayer;
     };
     /**
      * This method is used to remove a layer from map.
@@ -8692,8 +8711,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.removeLayer = function (index) {
-        this.layers.splice(index, 1);
-        this.refresh();
+        var mapsLayer = this.layers;
+        mapsLayer.splice(index, 1);
+        this.layers = mapsLayer;
     };
     /**
      * This method is used to add markers dynamically in the maps.
@@ -8978,6 +8998,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     Maps.prototype.onPropertyChanged = function (newProp, oldProp) {
         var render = false;
         var isMarker = false;
+        var isLayer = false;
         var isStaticMapType = false;
         var layerEle;
         if (newProp['layers']) {
@@ -8998,6 +9019,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                 case 'legendSettings':
                 case 'baseLayerIndex':
                     if (prop === 'layers') {
+                        isLayer = true;
                         var layerPropLength = Object.keys(newProp.layers).length;
                         for (var x = 0; x < layerPropLength; x++) {
                             if (!isNullOrUndefined(newProp.layers[x])) {
@@ -9022,7 +9044,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'zoomSettings':
                     if (!isNullOrUndefined(oldProp.zoomSettings)) {
-                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor) {
+                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor && !isLayer) {
                             render = false;
                         }
                         else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
@@ -9518,6 +9540,9 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Event()
     ], Maps.prototype, "click", void 0);
+    __decorate([
+        Event()
+    ], Maps.prototype, "onclick", void 0);
     __decorate([
         Event()
     ], Maps.prototype, "doubleClick", void 0);
@@ -9749,7 +9774,7 @@ var Bubble = /** @__PURE__ @class */ (function () {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var translate;
                 var animate$$1 = layer.animationDuration !== 0 || isNullOrUndefined(_this.maps.zoomModule);
-                if (_this.maps.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(_this.maps.zoomModule)) {
+                if (_this.maps.zoomSettings.zoomFactor > 1 && !isNullOrUndefined(_this.maps.zoomModule) && !_this.maps.isTileMap) {
                     translate = getZoomTranslate(_this.maps, layer, animate$$1);
                 }
                 else {
@@ -9972,7 +9997,7 @@ var DataLabel = /** @__PURE__ @class */ (function () {
         var shapeWidth;
         var scaleZoomValue = !isNullOrUndefined(this.maps.scale) ? Math.floor(this.maps.scale) : 1;
         var zoomLabelsPosition = this.maps.zoomSettings.enable ? !isNullOrUndefined(this.maps.zoomShapeCollection) &&
-            this.maps.zoomShapeCollection.length > 0 : this.maps.zoomSettings.enable;
+            this.maps.zoomShapeCollection.length > 0 && !this.maps.isAddLayer : this.maps.zoomSettings.enable;
         this.maps.translateType = 'labels';
         for (var j = 0; j < properties.length; j++) {
             if (shapeProperties[properties[j]]) {
@@ -12834,7 +12859,6 @@ var Selection = /** @__PURE__ @class */ (function () {
     Selection.prototype.addEventListener = function () {
         if (!this.maps.isDestroyed) {
             this.maps.on(click, this.mouseClick, this);
-            this.maps.on(Browser.touchEndEvent, this.mouseClick, this);
         }
     };
     /**
@@ -12847,7 +12871,6 @@ var Selection = /** @__PURE__ @class */ (function () {
             return;
         }
         this.maps.off(click, this.mouseClick);
-        this.maps.off(Browser.touchEndEvent, this.mouseClick);
     };
     Selection.prototype.mouseClick = function (targetElement) {
         if (!isNullOrUndefined(targetElement['type']) && targetElement['type'].indexOf('touch') !== -1 &&
@@ -13306,7 +13329,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                 options: tooltipOption,
                 fill: option.fill,
                 maps: this.maps,
-                element: target, eventArgs: e
+                element: target, eventArgs: e, content: !isNullOrUndefined(currentData) ? currentData.toString() : ''
             };
             this.maps.trigger(tooltipRender, tooltipArgs, function (args) {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
@@ -13324,7 +13347,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             header: '',
                             data: option['data'],
                             template: option['template'],
-                            content: [currentData.toString()],
+                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
                             shapes: [],
                             location: option['location'],
                             palette: [markerFill],
@@ -13340,7 +13363,7 @@ var MapsTooltip = /** @__PURE__ @class */ (function () {
                             header: '',
                             data: tooltipArgs.options['data'],
                             template: tooltipArgs.options['template'],
-                            content: [currentData.toString()],
+                            content: tooltipArgs.content.toString() != currentData.toString() ? [tooltipArgs.content.toString()] : [currentData.toString()],
                             shapes: [],
                             location: tooltipArgs.options['location'],
                             palette: [markerFill],
@@ -13906,7 +13929,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                             if (this.maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
                                 currentEle.remove();
                                 if (layerElement.children.length > 0 && layerElement.children[0]) {
-                                    layerElement.insertBefore(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index), layerElement.children[0]);
+                                    layerElement.insertBefore(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index), layerElement.children[1]);
                                 }
                                 else {
                                     layerElement.appendChild(this.maps.navigationLineModule.renderNavigation(this.currentLayer, this.maps.tileZoomLevel, this.index));
@@ -14015,16 +14038,17 @@ var Zoom = /** @__PURE__ @class */ (function () {
                                 }
                             }
                         }
-                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1) {
+                        else if (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !isNullOrUndefined(this.maps.layers[this.index])) {
                             this.intersect = [];
                             this.maps.zoomLabelPositions = [];
                             this.maps.zoomLabelPositions = this.maps.dataLabelModule.dataLabelCollections;
+                            var labelAnimate = !this.maps.isTileMap && animate$$1;
                             for (var k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
                                     this.zoomshapewidth = currentEle.childNodes[k].getBoundingClientRect();
                                     this.maps.zoomShapeCollection.push(this.zoomshapewidth);
-                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', animate$$1);
+                                    this.dataLabelTranslate(currentEle.childNodes[k], factor, x, y, scale, 'DataLabel', labelAnimate);
                                     var dataLabel = this.maps.layers[this.index].dataLabelSettings;
                                     var border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
@@ -14602,6 +14626,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
                         if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
                             document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                         }
+                        _this.maps.isAddLayer = false;
                     }, animationDuration);
                 }
             }
@@ -15657,5 +15682,5 @@ var PdfExport = /** @__PURE__ @class */ (function () {
  * exporting all modules from maps index
  */
 
-export { Maps, load, loaded, click, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
+export { Maps, load, loaded, click, onclick, rightClick, doubleClick, resize, tooltipRender, shapeSelected, shapeHighlight, mousemove, mouseup, mousedown, layerRendering, shapeRendering, markerRendering, markerClusterRendering, markerClick, markerClusterClick, markerMouseMove, markerClusterMouseMove, dataLabelRendering, bubbleRendering, bubbleClick, bubbleMouseMove, animationComplete, legendRendering, annotationRendering, itemSelection, itemHighlight, beforePrint, zoomIn, zoomOut, pan, Annotation, Arrow, Font, Border, CenterPosition, TooltipSettings, Margin, ConnectorLineSettings, MarkerClusterSettings, MarkerClusterData, ColorMappingSettings, InitialMarkerSelectionSettings, InitialShapeSelectionSettings, SelectionSettings, HighlightSettings, NavigationLineSettings, BubbleSettings, CommonTitleSettings, SubTitleSettings, TitleSettings, ZoomSettings, ToggleLegendSettings, LegendSettings, DataLabelSettings, ShapeSettings, MarkerBase, MarkerSettings, LayerSettings, Tile, MapsAreaSettings, Size, stringToNumber, calculateSize, createSvg, getMousePosition, degreesToRadians, radiansToDegrees, convertGeoToPoint, convertTileLatLongToPoint, xToCoordinate, yToCoordinate, aitoff, roundTo, sinci, acos, calculateBound, triggerDownload, Point, MinMax, GeoLocation, measureText, TextOption, PathOption, ColorValue, RectOption, CircleOption, PolygonOption, PolylineOption, LineOption, Line, MapLocation, Rect, PatternOptions, renderTextElement, convertElement, formatValue, convertStringToValue, convertElementFromLabel, drawSymbols, getValueFromObject, markerColorChoose, markerShapeChoose, clusterTemplate, mergeSeparateCluster, clusterSeparate, marker, markerTemplate, maintainSelection, maintainStyleClass, appendShape, drawCircle, drawRectangle, drawPath, drawPolygon, drawPolyline, drawLine, calculateShapes, drawDiamond, drawTriangle, drawCross, drawHorizontalLine, drawVerticalLine, drawStar, drawBalloon, drawPattern, getFieldData, checkShapeDataFields, checkPropertyPath, filter, getRatioOfBubble, findMidPointOfPolygon, isCustomPath, textTrim, findPosition, removeElement, calculateCenterFromPixel, getTranslate, getZoomTranslate, fixInitialScaleForTile, getElementByID, getClientElement, Internalize, getTemplateFunction, getElement, getShapeData, triggerShapeEvent, getElementsByClassName, querySelector, getTargetElement, createStyle, customizeStyle, triggerItemSelectionEvent, removeClass, elementAnimate, timeout, showTooltip, wordWrap, createTooltip, drawSymbol, renderLegendShape, getElementOffset, changeBorderWidth, changeNavaigationLineWidth, targetTouches, calculateScale, getDistance, getTouches, getTouchCenter, sum, zoomAnimate, animate, MapAjax, smoothTranslate, compareZoomFactor, calculateZoomLevel, processResult, LayerPanel, Bubble, BingMap, Marker, ColorMapping, DataLabel, NavigationLine, Legend, Highlight, Selection, MapsTooltip, Zoom, Annotations, Print, ImageExport, PdfExport };
 //# sourceMappingURL=ej2-maps.es5.js.map