@syncfusion/ej2-maps 25.2.4 → 26.1.35

package/src/maps/user-interaction/annotation.d.ts

@@ -7,13 +7,12 @@ export declare class Annotations {
     constructor(map: Maps);
     renderAnnotationElements(): void;
     /**
-     * To create annotation elements
+     * To create annotation elements.
      *
      * @param {HTMLElement} parentElement - Specifies the parent element in the map.
      * @param {Annotation} annotation -  Specifies the options for customizing the annotation element in maps.
      * @param {number} annotationIndex - Specifies the index of the annotation.
      * @returns {void}
-     *
      * @private
      */
     createAnnotationTemplate(parentElement: HTMLElement, annotation: Annotation, annotationIndex: number): void;

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

@@ -27,13 +27,12 @@ var Annotations = /** @class */ (function () {
         this.map.renderReactTemplates();
     };
     /**
-     * To create annotation elements
+     * To create annotation elements.
      *
      * @param {HTMLElement} parentElement - Specifies the parent element in the map.
      * @param {Annotation} annotation -  Specifies the options for customizing the annotation element in maps.
      * @param {number} annotationIndex - Specifies the index of the annotation.
      * @returns {void}
-     *
      * @private
      */
     Annotations.prototype.createAnnotationTemplate = function (parentElement, annotation, annotationIndex) {

package/src/maps/user-interaction/highlight.d.ts

@@ -11,19 +11,19 @@ export declare class Highlight {
     highlightSettings: HighlightSettingsModel;
     constructor(maps: Maps);
     /**
-     * To bind events for highlight module
+     * To bind events for highlight module.
      *
      * @returns {void}
      */
     private addEventListener;
     /**
-     * To unbind events for highlight module
+     * To unbind events for highlight module.
      *
      * @returns {void}
      */
     private removeEventListener;
     /**
-     * Public method for highlight module
+     * Public method for highlight module.
      *
      * @param {number} layerIndex - Specifies the index of the layer.
      * @param {string} name - Specifies the name.
@@ -34,7 +34,7 @@ export declare class Highlight {
     addHighlight(layerIndex: number, name: string, enable: boolean): void;
     private mouseMove;
     /**
-     * Handles the highlighting events in map
+     * Handles the highlighting events in map.
      *
      * @param {Element} targetElement - Specifies the target element.
      * @param {number} layerIndex - Specifies the index of the layer.

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

@@ -10,7 +10,7 @@ var Highlight = /** @class */ (function () {
         this.addEventListener();
     }
     /**
-     * To bind events for highlight module
+     * To bind events for highlight module.
      *
      * @returns {void}
      */
@@ -22,7 +22,7 @@ var Highlight = /** @class */ (function () {
         this.maps.on(Browser.touchStartEvent, this.mouseMove, this);
     };
     /**
-     * To unbind events for highlight module
+     * To unbind events for highlight module.
      *
      * @returns {void}
      */
@@ -34,7 +34,7 @@ var Highlight = /** @class */ (function () {
         this.maps.off(Browser.touchStartEvent, this.mouseMove);
     };
     /**
-     * Public method for highlight module
+     * Public method for highlight module.
      *
      * @param {number} layerIndex - Specifies the index of the layer.
      * @param {string} name - Specifies the name.
@@ -146,7 +146,7 @@ var Highlight = /** @class */ (function () {
         }
     };
     /**
-     * Handles the highlighting events in map
+     * Handles the highlighting events in map.
      *
      * @param {Element} targetElement - Specifies the target element.
      * @param {number} layerIndex - Specifies the index of the layer.

package/src/maps/user-interaction/selection.d.ts

@@ -15,20 +15,20 @@ export declare class Selection {
     selectionType: string;
     constructor(maps: Maps);
     /**
-     * For binding events to selection module
+     * For binding events to selection module.
      *
      * @returns {void}
      */
     private addEventListener;
     /**
-     * For removing events from selection modue
+     * For removing events from selection module.
      *
      * @returns {void}
      */
     private removeEventListener;
     private mouseClick;
     /**
-     * Selects the element in the map
+     * Selects the element in the map.
      *
      * @param {Element} targetElement - Specifies the target element.
      * @param {number} layerIndex - Specifies the index of the layer.
@@ -39,7 +39,7 @@ export declare class Selection {
      */
     selectElement(targetElement: Element, layerIndex: number, data: object, shapeData: object): void;
     /**
-     * Public method for selection
+     * Public method for selection.
      *
      * @param {number} layerIndex - Specifies the index of the layer.
      * @param {string} name - Specifies the name.
@@ -49,7 +49,7 @@ export declare class Selection {
      */
     addSelection(layerIndex: number, name: string, enable: boolean): void;
     /**
-     * Method for selection
+     * Method for selection.
      *
      * @param {Element} targetElement - Specifies the target element
      * @param {any} shapeData - Specifies the shape data

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

@@ -10,7 +10,7 @@ var Selection = /** @class */ (function () {
         this.addEventListener();
     }
     /**
-     * For binding events to selection module
+     * For binding events to selection module.
      *
      * @returns {void}
      */
@@ -20,7 +20,7 @@ var Selection = /** @class */ (function () {
         }
     };
     /**
-     * For removing events from selection modue
+     * For removing events from selection module.
      *
      * @returns {void}
      */
@@ -99,7 +99,7 @@ var Selection = /** @class */ (function () {
         }
     };
     /**
-     * Selects the element in the map
+     * Selects the element in the map.
      *
      * @param {Element} targetElement - Specifies the target element.
      * @param {number} layerIndex - Specifies the index of the layer.
@@ -120,7 +120,7 @@ var Selection = /** @class */ (function () {
         }
     };
     /**
-     * Public method for selection
+     * Public method for selection.
      *
      * @param {number} layerIndex - Specifies the index of the layer.
      * @param {string} name - Specifies the name.
@@ -138,7 +138,7 @@ var Selection = /** @class */ (function () {
         }
     };
     /**
-     * Method for selection
+     * Method for selection.
      *
      * @param {Element} targetElement - Specifies the target element
      * @param {any} shapeData - Specifies the shape data

package/src/maps/user-interaction/tooltip.d.ts

@@ -11,7 +11,7 @@ export declare class MapsTooltip {
     svgTooltip: Tooltip;
     private isTouch;
     private tooltipId;
-    private clearTimeout;
+    private tooltipTimer;
     /**
      * @private
      */
@@ -24,7 +24,7 @@ export declare class MapsTooltip {
      */
     renderTooltip(e: PointerEvent): void;
     /**
-     * To get content for the current toolitp
+     * To get content for the current toolitp.
      *
      * @param {TooltipSettingsModel} options - Specifies the options for rendering tooltip
      * @param {any} templateData - Specifies the template data
@@ -33,7 +33,7 @@ export declare class MapsTooltip {
     private setTooltipContent;
     private formatter;
     /**
-     * Handles the mouse up
+     * Handles the mouse up.
      *
      * @param {PointerEvent} e - Specifies the event
      * @returns {void}
@@ -41,7 +41,7 @@ export declare class MapsTooltip {
      */
     mouseUpHandler(e: PointerEvent): void;
     /**
-     * Removes the tooltip
+     * Removes the tooltip.
      *
      * @returns {boolean} - Returns the boolean whether tooltip is removed or not.
      * @private
@@ -49,14 +49,14 @@ export declare class MapsTooltip {
     removeTooltip(): boolean;
     private clearTooltip;
     /**
-     * To bind events for tooltip module
+     * To bind events for tooltip module.
      *
      * @returns {void}
      * @private
      */
     addEventListener(): void;
     /**
-     * Removes the event listeners
+     * Removes the event listeners.
      *
      * @returns {void}
      * @private

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

@@ -36,10 +36,6 @@ var MapsTooltip = /** @class */ (function () {
             pageY = e.pageY;
             target = e.target;
         }
-        if (this.maps.isDevice) {
-            clearTimeout(this.clearTimeout);
-            this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
-        }
         if (target.id.indexOf(this.maps.element.id) === -1) {
             var ancestor = target.closest('.' + this.maps.element.id + '_marker_template_element');
             if (!isNullOrUndefined(ancestor) && ancestor.id.indexOf('_MarkerIndex_') > -1) {
@@ -206,9 +202,11 @@ var MapsTooltip = /** @class */ (function () {
                 // eslint-disable-next-line no-constant-condition
                 if (typeof (isPolygon ? polygon.tooltipTemplate !== 'function' : option.template !== 'function') && (isPolygon ? polygon.tooltipTemplate !== null : option.template !== null) && Object.keys(typeof (isPolygon ? polygon.tooltipTemplate === 'object' : option.template === 'object') ? (isPolygon ? polygon.tooltipTemplate : option.template) : {}).length === 1) {
                     if (isPolygon) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         polygon.tooltipTemplate = polygon.tooltipTemplate[Object.keys(polygon.tooltipTemplate)[0]];
                     }
                     else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         option.template = option.template[Object.keys(option.template)[0]];
                     }
                 }
@@ -247,8 +245,17 @@ var MapsTooltip = /** @class */ (function () {
                                 || _this.maps.themeStyle.fontWeight;
                             tooltipArgs.options['textStyle']['opacity'] = tooltipArgs.options['textStyle']['opacity']
                                 || _this.maps.themeStyle.tooltipTextOpacity;
+                            var borderObject = isPolygon ? {
+                                color: polygonTooltipOption.border.color ||
+                                    _this.maps.themeStyle.tooltipBorderColor, width: polygonTooltipOption.border.width,
+                                opacity: polygonTooltipOption.border.opacity
+                            } : {
+                                color: option.border.color ||
+                                    _this.maps.themeStyle.tooltipBorderColor, width: option.border.width, opacity: option.border.opacity
+                            };
                             if (tooltipArgs.cancel) {
                                 _this.svgTooltip = new Tooltip({
+                                    theme: _this.maps.theme,
                                     enable: true,
                                     header: '',
                                     data: option['data'],
@@ -263,11 +270,12 @@ var MapsTooltip = /** @class */ (function () {
                                     availableSize: _this.maps.availableSize,
                                     fill: option.fill || _this.maps.themeStyle.tooltipFillColor,
                                     enableShadow: true,
-                                    border: isPolygon ? polygonTooltipOption.border : option.border
+                                    border: borderObject
                                 });
                             }
                             else {
                                 _this.svgTooltip = new Tooltip({
+                                    theme: _this.maps.theme,
                                     enable: true,
                                     header: '',
                                     data: tooltipArgs.options['data'],
@@ -282,7 +290,7 @@ var MapsTooltip = /** @class */ (function () {
                                     availableSize: _this.maps.availableSize,
                                     fill: tooltipArgs.fill || _this.maps.themeStyle.tooltipFillColor,
                                     enableShadow: true,
-                                    border: isPolygon ? polygonTooltipOption.border : option.border
+                                    border: borderObject
                                 });
                             }
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -293,6 +301,15 @@ var MapsTooltip = /** @class */ (function () {
                             _this.svgTooltip.appendTo(tooltipEle);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             _this.maps.renderReactTemplates();
+                            if (_this.maps.isDevice) {
+                                var timer = targetId.indexOf('_MarkerIndex_') > -1 || targetId.indexOf('_BubbleIndex_') > -1
+                                    || targetId.indexOf('_shapeIndex_') > -1 ? option.duration : polygonTooltipOption.duration;
+                                timer = (!isNullOrUndefined(timer) && timer > 0) ? timer : (timer < 0) ? 2000 : null;
+                                if (timer !== null) {
+                                    clearTimeout(_this.tooltipTimer);
+                                    _this.tooltipTimer = setTimeout(_this.removeTooltip.bind(_this), timer);
+                                }
+                            }
                         }
                         else {
                             _this.clearTooltip(e.target);
@@ -329,7 +346,7 @@ var MapsTooltip = /** @class */ (function () {
         }
     };
     /**
-     * To get content for the current toolitp
+     * To get content for the current toolitp.
      *
      * @param {TooltipSettingsModel} options - Specifies the options for rendering tooltip
      * @param {any} templateData - Specifies the template data
@@ -363,7 +380,7 @@ var MapsTooltip = /** @class */ (function () {
         return format;
     };
     /**
-     * Handles the mouse up
+     * Handles the mouse up.
      *
      * @param {PointerEvent} e - Specifies the event
      * @returns {void}
@@ -373,13 +390,13 @@ var MapsTooltip = /** @class */ (function () {
         if (!isNullOrUndefined(this.maps)) {
             this.renderTooltip(e);
             if (this.maps.tooltipDisplayMode === 'MouseMove') {
-                clearTimeout(this.clearTimeout);
-                this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
+                clearTimeout(this.tooltipTimer);
+                this.tooltipTimer = setTimeout(this.removeTooltip.bind(this), 2000);
             }
         }
     };
     /**
-     * Removes the tooltip
+     * Removes the tooltip.
      *
      * @returns {boolean} - Returns the boolean whether tooltip is removed or not.
      * @private
@@ -404,7 +421,7 @@ var MapsTooltip = /** @class */ (function () {
         }
     };
     /**
-     * To bind events for tooltip module
+     * To bind events for tooltip module.
      *
      * @returns {void}
      * @private
@@ -426,7 +443,7 @@ var MapsTooltip = /** @class */ (function () {
         this.maps.element.addEventListener('contextmenu', this.removeTooltip);
     };
     /**
-     * Removes the event listeners
+     * Removes the event listeners.
      *
      * @returns {void}
      * @private

package/src/maps/user-interaction/zoom.d.ts

@@ -57,6 +57,8 @@ export declare class Zoom {
     private fingers;
     /** @private */
     firstMove: boolean;
+    /** @private */
+    isPanningInProgress: boolean;
     private isPan;
     private isZoomFinal;
     private isZoomSelection;
@@ -77,7 +79,7 @@ export declare class Zoom {
     layerCollectionEle: Element;
     constructor(maps: Maps);
     /**
-     * To perform zooming for maps
+     * To perform zooming for maps.
      *
      * @param {Point} position - Specifies the position.
      * @param {number} newZoomFactor - Specifies the zoom factor.
@@ -110,7 +112,7 @@ export declare class Zoom {
      */
     drawZoomRectangle(): void;
     /**
-     * To animate the zooming process
+     * To animate the zooming process.
      *
      * @param {Element} element - Specifies the element
      * @param {boolean} animate - Specifies the boolean value
@@ -130,7 +132,7 @@ export declare class Zoom {
     applyTransform(maps: Maps, animate?: boolean, isPanning?: boolean): void;
     private markerTranslates;
     /**
-     * To translate the layer template elements
+     * To translate the layer template elements.
      *
      * @param {number} x - Specifies the x value
      * @param {number} y - Specifies the y value
@@ -269,7 +271,7 @@ export declare class Zoom {
      */
     click(e: PointerEvent): void;
     /**
-     * Gets the Mouse Position
+     * Gets the Mouse Position.
      *
      * @param {number} pageX - Specifies the Page x in map
      * @param {number} pageY - Specifies the Page y in map

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

@@ -25,6 +25,8 @@ var Zoom = /** @class */ (function () {
         /** @private */
         this.isPointer = Browser.isPointer;
         this.handled = false;
+        /** @private */
+        this.isPanningInProgress = false;
         this.isPan = false;
         this.isZoomFinal = false;
         this.isZoomSelection = false;
@@ -40,14 +42,12 @@ var Zoom = /** @class */ (function () {
         this.maps = maps;
         this.wheelEvent = this.browserName === 'mozilla' ? (this.isPointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';
         this.cancelEvent = this.isPointer ? 'pointerleave' : 'mouseleave';
-        this.selectionColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor == null ?
-            this.maps.zoomSettings.selectionColor : this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor;
-        this.fillColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.color == null ? this.maps.zoomSettings.color :
-            this.maps.zoomSettings.toolbarSettings.buttonSettings.color;
+        this.selectionColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor;
+        this.fillColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.color;
         this.addEventListener();
     }
     /**
-     * To perform zooming for maps
+     * To perform zooming for maps.
      *
      * @param {Point} position - Specifies the position.
      * @param {number} newZoomFactor - Specifies the zoom factor.
@@ -475,7 +475,7 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
-     * To animate the zooming process
+     * To animate the zooming process.
      *
      * @param {Element} element - Specifies the element
      * @param {boolean} animate - Specifies the boolean value
@@ -513,6 +513,7 @@ var Zoom = /** @class */ (function () {
         var y = maps.translatePoint.y;
         var currentLabelIndex = 0;
         maps.zoomShapeCollection = [];
+        this.isPanningInProgress = isPanning || false;
         if (document.getElementById(maps.element.id + '_mapsTooltip')) {
             removeElement(maps.element.id + '_mapsTooltip');
         }
@@ -544,7 +545,9 @@ var Zoom = /** @class */ (function () {
                                         var markerData = polygonSettings.points;
                                         var path = calculatePolygonPath(maps, maps.tileZoomLevel, _this.currentLayer, markerData);
                                         var element = document.getElementById(maps.element.id + '_LayerIndex_' + _this.index + '_PolygonIndex_' + polygonIndex);
-                                        element.setAttribute('d', path);
+                                        if (!isNullOrUndefined(element)) {
+                                            element.setAttribute('d', path);
+                                        }
                                     });
                                     document.getElementById(maps.element.id + '_LayerIndex_' + this_1.index + '_Polygons_Group').style.visibility = '';
                                 }
@@ -556,7 +559,7 @@ var Zoom = /** @class */ (function () {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if ((!this_1.isPanModeEnabled) && !isNullOrUndefined(currentEle.childNodes[0])) {
+                            if ((!this_1.isPanModeEnabled || !isPanning) && !isNullOrUndefined(currentEle.childNodes[0])) {
                                 this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement);
                             }
                             currentEle = layerElement.childNodes[j];
@@ -823,7 +826,7 @@ var Zoom = /** @class */ (function () {
         });
     };
     /**
-     * To translate the layer template elements
+     * To translate the layer template elements.
      *
      * @param {number} x - Specifies the x value
      * @param {number} y - Specifies the y value
@@ -1038,19 +1041,6 @@ var Zoom = /** @class */ (function () {
                     var templateOffset = element.getBoundingClientRect();
                     element.style.left = ((location_2.x - (templateOffset.width / 2)) + marker.offset.x) + 'px';
                     element.style.top = ((location_2.y - (templateOffset.height / 2)) + marker.offset.y) + 'px';
-                    if (this.maps.layers[this.maps.baseLayerIndex].layerType === 'GoogleStaticMap') {
-                        var staticMapOffset = getElementByID(this.maps.element.id + '_StaticGoogleMap').getBoundingClientRect();
-                        var staticMapOffsetWidth = 640;
-                        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';
-                            }
-                            else if ((staticMapOffset['x'] > templateOffset['x'] || staticMapOffset['x'] + staticMapOffsetWidth < templateOffset['x'] + templateOffset['width'])) {
-                                element.style.display = 'none';
-                            }
-                        }
-                    }
                 }
                 else {
                     location_2.x += marker.offset.x;
@@ -1333,44 +1323,44 @@ var Zoom = /** @class */ (function () {
         var toolbar = map.zoomSettings.toolbarSettings;
         var button = map.zoomSettings.toolbarSettings.buttonSettings;
         this.maps.toolbarProperties = {
-            toolBarOrientation: toolbar.orientation === 'Horizontal' ? map.zoomSettings.toolBarOrientation : toolbar.orientation,
-            highlightColor: button.highlightColor == null ? map.zoomSettings.highlightColor : button.highlightColor,
-            selectionColor: button.selectionColor == null ? map.zoomSettings.selectionColor : button.selectionColor,
-            horizontalAlignment: toolbar.horizontalAlignment === 'Far' ? map.zoomSettings.horizontalAlignment : toolbar.horizontalAlignment,
-            verticalAlignment: toolbar.verticalAlignment === 'Near' ? map.zoomSettings.verticalAlignment : toolbar.verticalAlignment,
-            color: button.color == null ? map.zoomSettings.color : button.color,
-            shapeOpacity: button.opacity !== 1 ? button.opacity : 1,
-            borderOpacity: button.borderOpacity !== 1 ? button.borderOpacity : 1
+            toolBarOrientation: toolbar.orientation,
+            highlightColor: button.highlightColor,
+            selectionColor: button.selectionColor,
+            horizontalAlignment: toolbar.horizontalAlignment,
+            verticalAlignment: toolbar.verticalAlignment,
+            color: button.color,
+            shapeOpacity: button.opacity,
+            borderOpacity: button.borderOpacity
         };
-        var cx = button.radius / 4;
-        var cy = button.radius / 4;
-        var radius = button.radius / 2;
+        var buttonRadius = button.radius || map.themeStyle.zoomButtonRadius;
+        var cx = buttonRadius / 4;
+        var cy = buttonRadius / 4;
+        var radius = buttonRadius / 2;
         var padding = button.padding;
         var orientation = this.maps.toolbarProperties.toolBarOrientation;
         var toolbarCollection = map.zoomSettings.toolbarSettings.buttonSettings.toolbarItems.map(function (value) { return value; });
-        var toolbarsCollection = toolbarCollection.length === 3 ? map.zoomSettings.toolbars : toolbarCollection;
-        xSpacing = (button.radius / 4) + (button.borderWidth / 2) + padding;
-        ySpacing = (button.radius / 4) + (button.borderWidth / 2) + padding;
+        xSpacing = (buttonRadius / 4) + (button.borderWidth / 2) + padding;
+        ySpacing = (buttonRadius / 4) + (button.borderWidth / 2) + padding;
         var shadowElement = '<filter id="chart_shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="5"/>';
         shadowElement += '<feOffset dx="-3" dy="4" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="1"/>';
         shadowElement += '</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
         var toolBarLength = toolbarCollection.length;
-        var toolWidth = (orientation === 'Horizontal') ? ((toolBarLength * button.radius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth)) : (button.radius + button.borderWidth + (2 * padding));
-        var toolHeight = (orientation === 'Horizontal') ? (button.radius + button.borderWidth + (2 * padding)) : ((toolBarLength * button.radius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth));
+        var toolWidth = (orientation === 'Horizontal') ? ((toolBarLength * buttonRadius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth)) : (buttonRadius + button.borderWidth + (2 * padding));
+        var toolHeight = (orientation === 'Horizontal') ? (buttonRadius + button.borderWidth + (2 * padding)) : ((toolBarLength * buttonRadius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth));
         var defElement = map.renderer.createDefs();
         defElement.innerHTML = shadowElement;
         this.toolBarGroup.appendChild(defElement);
         var outerElement = map.renderer.drawRectangle(new RectOption(map.element.id + '_Zooming_Rect', toolbar.backgroundColor, { color: toolbar.borderColor, width: toolbar.borderWidth, opacity: toolbar.borderOpacity }, toolbar.borderOpacity, new Rect((toolbar.borderWidth / 2), (toolbar.borderWidth / 2), (toolWidth - toolbar.borderWidth), (toolHeight - toolbar.borderWidth)), 0, 0));
         this.toolBarGroup.appendChild(outerElement);
-        var scaleX = (button.radius - (button.borderWidth / 2)) / 30;
-        for (var i = 0; i < toolbarsCollection.length; i++) {
+        var scaleX = (buttonRadius - (button.borderWidth / 2)) / 30;
+        for (var i = 0; i < toolbarCollection.length; i++) {
             if (i !== 0) {
-                xSpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? (xSpacing + (button.radius + padding) + button.borderWidth) : xSpacing;
-                ySpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? ySpacing : (ySpacing + (button.radius + padding) + button.borderWidth);
+                xSpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? (xSpacing + (buttonRadius + padding) + button.borderWidth) : xSpacing;
+                ySpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? ySpacing : (ySpacing + (buttonRadius + padding) + button.borderWidth);
             }
-            var toolbar_1 = toolbarsCollection[i];
+            var toolbar_1 = toolbarCollection[i];
             var pathStroke = !isNullOrUndefined(this.maps.toolbarProperties.color) ? this.maps.toolbarProperties.color : this.maps.themeStyle.zoomFillColor;
-            var borderColor = button.borderColor || this.maps.themeStyle.zoomFillColor;
+            var borderColor = button.borderColor || (this.maps.themeStyle.zoomBorderColor || this.maps.themeStyle.zoomFillColor);
             this.currentToolbarEle = map.renderer.createGroup({
                 id: map.element.id + '_Zooming_ToolBar_' + toolbar_1 + '_Group',
                 transform: 'translate( ' + xSpacing + ' ' + ySpacing + ' ) '
@@ -1546,10 +1536,15 @@ var Zoom = /** @class */ (function () {
                 break;
             case 'zoomin':
                 map.staticMapZoom = map.tileZoomLevel;
-                if (map.staticMapZoom > 0 && map.staticMapZoom < 22) {
+                if (map.staticMapZoom > 0 && map.staticMapZoom < map.zoomSettings.maxZoom) {
                     map.staticMapZoom += 1;
                 }
-                this.toolBarZooming((map.isTileMap ? map.tileZoomLevel : map.scale) + 1, 'ZoomIn');
+                if (map.isTileMap && map.tileZoomLevel >= map.zoomSettings.minZoom && map.tileZoomLevel < map.zoomSettings.maxZoom) {
+                    this.toolBarZooming(map.tileZoomLevel + 1, 'ZoomIn');
+                }
+                else if (!map.isTileMap) {
+                    this.toolBarZooming(map.scale + 1, 'ZoomIn');
+                }
                 scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
                 if (!this.isZoomSelection) {
                     if (scale === map.zoomSettings.maxZoom || scale > 1 || (scale === 1 && this.maps.isTileMap)) {
@@ -1909,9 +1904,14 @@ var Zoom = /** @class */ (function () {
                     -(e.detail) / 3 > 0 ? 'ZoomIn' : 'ZoomOut' : (e.wheelDelta / 120) > 0 ? 'ZoomIn' : 'ZoomOut';
                 if (direction === 'ZoomIn') {
                     map.mapScaleValue = value + delta;
-                    map.staticMapZoom = map.tileZoomLevel;
-                    if (map.staticMapZoom > 0 && map.staticMapZoom < staticMaxZoomLevel) {
-                        map.staticMapZoom += 1;
+                    if (map.isTileMap) {
+                        map.staticMapZoom = map.tileZoomLevel;
+                        if (map.staticMapZoom > 0 && map.staticMapZoom < staticMaxZoomLevel) {
+                            map.staticMapZoom += 1;
+                            this.performZooming(position, (value + delta), direction);
+                        }
+                    }
+                    else {
                         this.performZooming(position, (value + delta), direction);
                     }
                 }
@@ -2195,7 +2195,7 @@ var Zoom = /** @class */ (function () {
         }
     };
     /**
-     * Gets the Mouse Position
+     * Gets the Mouse Position.
      *
      * @param {number} pageX - Specifies the Page x in map
      * @param {number} pageY - Specifies the Page y in map