@syncfusion/ej2-maps 20.2.36 → 20.2.45

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

@@ -954,8 +954,8 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
                             shapeCustom['borderWidth'] = eventArg.border.width;
                             shapeCustom['borderOpacity'] = isNullOrUndefined(eventArg.border.opacity) ? clusters.opacity : eventArg.border.opacity;
                         }
-                        tempX = (maps.isTileMap) ? tempX : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempX : ((location.x + transPoint.x + eventArg.width) * maps.mapScaleValue);
-                        tempY = (maps.isTileMap) ? tempY : (markerTemplate.id.indexOf('_Markers_Group') > -1) ? tempY : ((location.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.x;
                             tempY = location.y;
@@ -1034,7 +1034,7 @@ function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerC
             getElementByID(maps.element.id + '_Secondary_Element').appendChild(markerCollection);
             layerElement.appendChild(markerCollection);
         }
-        const markerCluster = document.getElementById(maps.element.id + '_LayerIndex_0_markerCluster');
+        const markerCluster = document.getElementById(maps.element.id + '_LayerIndex_' + layerIndex + '_markerCluster');
         if (!isNullOrUndefined(markerCluster)) {
             markerCluster.remove();
         }
@@ -2179,6 +2179,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) };
 }
 /**
@@ -3059,7 +3061,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);
+                let markerElement = getElementByID(element.id.split('_')[0] + '_Markers_Group');
+                markerElement.setAttribute('style', markerStyle);
+            }
         }
     };
     clearAnimation = window.requestAnimationFrame(startAnimation);
@@ -5073,6 +5079,12 @@ const loaded = 'loaded';
  * @private
  */
 const click = 'click';
+/**
+ * Specifies the maps onclick event name.
+ *
+ * @private
+ */
+const onclick = 'onclick';
 /**
  * Specifies the maps right click event name.
  *
@@ -6709,7 +6721,7 @@ class LayerPanel {
                 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';
                         }
@@ -7210,6 +7222,7 @@ let Maps = class Maps extends Component {
         this.renderArea();
         this.processRequestJsonData();
         this.renderComplete();
+        this.isAddLayer = !this.isTileMap ? false : this.isAddLayer;
     }
     /**
      * To Initialize the control rendering.
@@ -8004,24 +8017,35 @@ let Maps = class Maps extends Component {
                 latitude: latitude, longitude: longitude,
                 isShapeSelected: this.SelectedElement(targetEle)
             };
-            this.trigger('click', eventArgs, (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.cancel) {
-                    this.notify(click, targetEle);
-                }
-                if (!eventArgs.cancel && targetEle.id.indexOf('shapeIndex') !== -1) {
-                    this.triggerShapeSelection(targetEle);
-                }
-            });
+            if (this.onclick) {
+                eventArgs.name = onclick;
+                this.trigger('onclick', eventArgs, (mouseArgs) => {
+                    this.clickHandler(e, eventArgs, targetEle);
+                });
+            }
+            else {
+                this.trigger('click', eventArgs, (mouseArgs) => {
+                    this.clickHandler(e, eventArgs, targetEle);
+                });
+            }
+        }
+    }
+    clickHandler(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);
         }
     }
     triggerShapeSelection(targetEle) {
@@ -8121,13 +8145,6 @@ let Maps = class Maps extends Component {
                     latitude = latLongValue.latitude;
                     longitude = latLongValue.longitude;
                 }
-                const 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, (mouseArgs) => {
-                });
             }
             this.titleTooltip(e, pageX, pageY, true);
             if (!isNullOrUndefined(this.legendModule)) {
@@ -8135,7 +8152,7 @@ let Maps = class Maps extends Component {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        if (e.cancelable) {
+        if (e.cancelable && !this.isTouch) {
             e.preventDefault();
         }
         return false;
@@ -8400,8 +8417,10 @@ let Maps = class Maps extends Component {
      * @param {Object} layer - Specifies the layer for the maps.
      */
     addLayer(layer) {
-        this.layers.push(new LayerSettings(this.layers[0], 'layers', layer));
-        this.refresh();
+        let mapsLayer = this.layers;
+        mapsLayer.push(layer);
+        this.isAddLayer = true;
+        this.layers = mapsLayer;
     }
     /**
      * This method is used to remove a layer from map.
@@ -8410,8 +8429,9 @@ let Maps = class Maps extends Component {
      * @returns {void}
      */
     removeLayer(index) {
-        this.layers.splice(index, 1);
-        this.refresh();
+        let mapsLayer = this.layers;
+        mapsLayer.splice(index, 1);
+        this.layers = mapsLayer;
     }
     /**
      * This method is used to add markers dynamically in the maps.
@@ -8694,6 +8714,7 @@ let Maps = class Maps extends Component {
     onPropertyChanged(newProp, oldProp) {
         let render = false;
         let isMarker = false;
+        let isLayer = false;
         let isStaticMapType = false;
         let layerEle;
         if (newProp['layers']) {
@@ -8713,6 +8734,7 @@ let Maps = class Maps extends Component {
                 case 'legendSettings':
                 case 'baseLayerIndex':
                     if (prop === 'layers') {
+                        isLayer = true;
                         const layerPropLength = Object.keys(newProp.layers).length;
                         for (let x = 0; x < layerPropLength; x++) {
                             if (!isNullOrUndefined(newProp.layers[x])) {
@@ -8736,7 +8758,7 @@ let Maps = class Maps extends Component {
                     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) {
@@ -9221,6 +9243,9 @@ __decorate([
 __decorate([
     Event()
 ], Maps.prototype, "click", void 0);
+__decorate([
+    Event()
+], Maps.prototype, "onclick", void 0);
 __decorate([
     Event()
 ], Maps.prototype, "doubleClick", void 0);
@@ -9449,7 +9474,7 @@ class Bubble {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 let translate;
                 const 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 {
@@ -9670,7 +9695,7 @@ class DataLabel {
         let shapeWidth;
         const scaleZoomValue = !isNullOrUndefined(this.maps.scale) ? Math.floor(this.maps.scale) : 1;
         const 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 (let j = 0; j < properties.length; j++) {
             if (shapeProperties[properties[j]]) {
@@ -12510,7 +12535,6 @@ class Selection {
     addEventListener() {
         if (!this.maps.isDestroyed) {
             this.maps.on(click, this.mouseClick, this);
-            this.maps.on(Browser.touchEndEvent, this.mouseClick, this);
         }
     }
     /**
@@ -12523,7 +12547,6 @@ class Selection {
             return;
         }
         this.maps.off(click, this.mouseClick);
-        this.maps.off(Browser.touchEndEvent, this.mouseClick);
     }
     mouseClick(targetElement) {
         if (!isNullOrUndefined(targetElement['type']) && targetElement['type'].indexOf('touch') !== -1 &&
@@ -12979,7 +13002,7 @@ class MapsTooltip {
                 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, (args) => {
                 if (!tooltipArgs.cancel && option.visible && !isNullOrUndefined(currentData) &&
@@ -12997,7 +13020,7 @@ class MapsTooltip {
                             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],
@@ -13013,7 +13036,7 @@ class MapsTooltip {
                             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],
@@ -13575,7 +13598,7 @@ class Zoom {
                             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));
@@ -13684,16 +13707,17 @@ class Zoom {
                                 }
                             }
                         }
-                        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;
+                            let labelAnimate = !this.maps.isTileMap && animate$$1;
                             for (let k = 0; k < currentEle.childElementCount; k++) {
                                 if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                     const 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);
                                     const dataLabel = this.maps.layers[this.index].dataLabelSettings;
                                     const border = dataLabel.border;
                                     if (k > 0 && border['width'] > 1) {
@@ -13907,7 +13931,7 @@ class Zoom {
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Hide') {
                         if (scale > 1) {
-                            text = (this.zoomshapewidth['width'] >= zoomtextSize['width']) ? zoomtext : '';
+                            text = ((this.maps.dataLabelShape[l] * scale) >= zoomtextSize['width']) ? zoomtext : '';
                             element.innerHTML = text;
                         }
                         else {
@@ -13917,7 +13941,7 @@ class Zoom {
                     }
                     if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
                         if (scale > 1) {
-                            zoomtrimLabel = textTrim(this.zoomshapewidth['width'], zoomtext, style);
+                            zoomtrimLabel = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             text = zoomtrimLabel;
                             element.innerHTML = text;
                         }
@@ -13955,7 +13979,7 @@ class Zoom {
                                     || textLocations['heightTop'] > this.intersect[j]['heightBottom']) {
                                     trimmedLable = !isNullOrUndefined(text) ? text : zoomtext;
                                     if (scale > 1) {
-                                        trimmedLable = textTrim(this.zoomshapewidth['width'], trimmedLable, style);
+                                        trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), trimmedLable, style);
                                     }
                                     element.innerHTML = trimmedLable;
                                 }
@@ -13981,11 +14005,11 @@ class Zoom {
                         }
                         this.intersect.push(textLocations);
                         if (isNullOrUndefined(trimmedLable)) {
-                            trimmedLable = textTrim(this.zoomshapewidth['width'], zoomtext, style);
+                            trimmedLable = textTrim((this.maps.dataLabelShape[l] * scale), zoomtext, style);
                             element.innerHTML = trimmedLable;
                         }
                     }
-                    else {
+                    if (animate$$1 || duration > 0) {
                         smoothTranslate(element, 0, duration, new MapLocation(labelX, labelY));
                     }
                 }
@@ -14266,6 +14290,7 @@ class Zoom {
                         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);
                 }
             }
@@ -15308,5 +15333,5 @@ class PdfExport {
  * 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.es2015.js.map