@syncfusion/ej2-maps 20.4.49 → 21.1.35

package/src/maps/utils/helper.js

@@ -15,14 +15,14 @@ var __extends = (this && this.__extends) || (function () {
 /**
  * Helper functions for maps control
  */
-import { createElement, isNullOrUndefined, remove, compile as templateComplier, merge } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined, remove, compile as templateComplier, merge, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { Animation } from '@syncfusion/ej2-base';
 import { SvgRenderer } from '@syncfusion/ej2-svg-base';
 import { itemSelection } from '../../index';
 import { animationComplete } from '../index';
 import { markerClusterRendering } from '../index';
 /**
- * Maps internal use of `Size` type
+ * Specifies the size information of an element.
  */
 var Size = /** @class */ (function () {
     function Size(width, height) {
@@ -51,6 +51,7 @@ export function stringToNumber(value, containerSize) {
  *
  * @param {Maps} maps Specifies the maps instance
  * @returns {void}
+ * @private
  */
 export function calculateSize(maps) {
     maps.element.style.height = !isNullOrUndefined(maps.height) ? maps.height : 'auto';
@@ -74,6 +75,7 @@ export function calculateSize(maps) {
  *
  * @param {Maps} maps Specifies the map instance
  * @returns {void}
+ * @private
  */
 export function createSvg(maps) {
     maps.renderer = new SvgRenderer(maps.element.id);
@@ -95,6 +97,7 @@ export function createSvg(maps) {
  * @param {number} pageY - Specifies the pageY.
  * @param {Element} element - Specifies the element.
  * @returns {MapLocation} - Returns the location.
+ * @private
  */
 export function getMousePosition(pageX, pageY, element) {
     var elementRect = element.getBoundingClientRect();
@@ -111,6 +114,7 @@ export function getMousePosition(pageX, pageY, element) {
  *
  * @param {number} deg Specifies the degree value
  * @returns {number} Returns the number
+ * @private
  */
 export function degreesToRadians(deg) {
     return deg * (Math.PI / 180);
@@ -120,6 +124,7 @@ export function degreesToRadians(deg) {
  *
  * @param {number} radian Specifies the radian value
  * @returns {number} Returns the number
+ * @private
  */
 export function radiansToDegrees(radian) {
     return radian * (180 / Math.PI);
@@ -133,6 +138,7 @@ export function radiansToDegrees(radian) {
  * @param {LayerSettings} layer - Specifies the layer settings.
  * @param {Maps} mapModel - Specifies the maps.
  * @returns {Point} - Returns the point values.
+ * @private
  */
 export function convertGeoToPoint(latitude, longitude, factor, layer, mapModel) {
     var mapSize = new Size(mapModel.mapAreaRect.width, mapModel.mapAreaRect.height);
@@ -216,6 +222,7 @@ export function convertGeoToPoint(latitude, longitude, factor, layer, mapModel)
  * @param {MapLocation} tileTranslatePoint Specifies the tile translate point
  * @param {boolean} isMapCoordinates Specifies the boolean value
  * @returns {MapLocation} Returns the location value
+ * @private
  */
 export function convertTileLatLongToPoint(center, zoomLevel, tileTranslatePoint, isMapCoordinates) {
     var size = Math.pow(2, zoomLevel) * 256;
@@ -236,6 +243,7 @@ export function convertTileLatLongToPoint(center, zoomLevel, tileTranslatePoint,
  * @param {Maps} mapObject - Specifies the maps.
  * @param {number} val - Specifies the value.
  * @returns {number} - Returns the number.
+ * @private
  */
 export function xToCoordinate(mapObject, val) {
     var longitudeMinMax = mapObject.baseMapBounds.longitude;
@@ -249,6 +257,7 @@ export function xToCoordinate(mapObject, val) {
  * @param {Maps} mapObject - Specifies the maps.
  * @param {number} val - Specifies the value.
  * @returns {number} - Returns the number.
+ * @private
  */
 export function yToCoordinate(mapObject, val) {
     var latitudeMinMax = mapObject.baseMapBounds.latitude;
@@ -260,6 +269,7 @@ export function yToCoordinate(mapObject, val) {
  * @param {number} x - Specifies the x value.
  * @param {number} y - Specifies the y value.
  * @returns {Point} - Returns the point value.
+ * @private
  */
 export function aitoff(x, y) {
     var cosy = Math.cos(y);
@@ -272,6 +282,7 @@ export function aitoff(x, y) {
  * @param {number} a - Specifies the a value
  * @param {number} b - Specifies the b value
  * @returns {number} - Returns the number
+ * @private
  */
 export function roundTo(a, b) {
     var c = Math.pow(10, b);
@@ -281,6 +292,7 @@ export function roundTo(a, b) {
  *
  * @param {number} x - Specifies the x value
  * @returns {number} - Returns the number
+ * @private
  */
 export function sinci(x) {
     return x / Math.sin(x);
@@ -289,6 +301,7 @@ export function sinci(x) {
  *
  * @param {number} a - Specifies the a value
  * @returns {number} - Returns the number
+ * @private
  */
 export function acos(a) {
     return Math.acos(a);
@@ -300,6 +313,7 @@ export function acos(a) {
  * @param {number} min Specifies the minimum value
  * @param {number} max Specifies the maximum value
  * @returns {number} Returns the value
+ * @private
  */
 export function calculateBound(value, min, max) {
     if (!isNullOrUndefined(min)) {
@@ -318,6 +332,7 @@ export function calculateBound(value, min, max) {
  * @param {string} url Specifies the url
  * @param {boolean} isDownload Specifies whether download a file.
  * @returns {void}
+ * @private
  */
 export function triggerDownload(fileName, type, url, isDownload) {
     createElement('a', {
@@ -332,7 +347,7 @@ export function triggerDownload(fileName, type, url, isDownload) {
     }));
 }
 /**
- * Map internal class for point
+ * Specifies the information of the position of the point in maps.
  */
 var Point = /** @class */ (function () {
     function Point(x, y) {
@@ -379,7 +394,7 @@ export function measureText(text, font) {
         measureObject = createElement('text', { id: 'mapsmeasuretext' });
         document.body.appendChild(measureObject);
     }
-    measureObject.innerHTML = text;
+    measureObject.innerText = text;
     measureObject.style.position = 'absolute';
     if (typeof (font.size) === 'number') {
         measureObject.style.fontSize = (font.size) + 'px';
@@ -551,6 +566,7 @@ export { LineOption };
  * Internal use of line
  *
  * @property {number} Line - Specifies the line class
+ * @private
  */
 var Line = /** @class */ (function () {
     function Line(x1, y1, x2, y2) {
@@ -565,6 +581,7 @@ export { Line };
 /**
  * Internal use of map location type
  *
+ * @private
  */
 var MapLocation = /** @class */ (function () {
     function MapLocation(x, y) {
@@ -593,6 +610,7 @@ export { Rect };
  * Internal use for pattern creation.
  *
  * @property {PatternOptions} PatternOptions - Specifies the pattern option class.
+ * @private
  */
 var PatternOptions = /** @class */ (function () {
     function PatternOptions(id, x, y, width, height, patternUnits, patternContentUnits, patternTransform, href) {
@@ -710,6 +728,7 @@ export function convertElement(element, markerId, data, index, mapObj) {
  * @param {string} value - Specifies the value
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {string} - Returns the string value
+ * @private
  */
 export function formatValue(value, maps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -731,6 +750,7 @@ export function formatValue(value, maps) {
  * @param {any} data - Specifies the data
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {string} - Returns the string value
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function convertStringToValue(stringTemplate, format, data, maps) {
@@ -761,6 +781,7 @@ export function convertStringToValue(stringTemplate, format, data, maps) {
  * @param {number} index - Specifies the index
  * @param {Maps} mapObj - Specifies the map object
  * @returns {HTMLElement} - Returns the html element
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function convertElementFromLabel(element, labelId, data, index, mapObj) {
@@ -790,6 +811,7 @@ export function convertElementFromLabel(element, labelId, data, index, mapObj) {
  * @param {Element} markerCollection - Specifies the marker collection
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {Element} - Returns the element
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, markerCollection, maps) {
@@ -823,7 +845,7 @@ export function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, ma
     }
     else if (shape === 'Image') {
         x = location.x - (size.width / 2);
-        y = location.y - size.height;
+        y = location.y - (size.height / 2);
         merge(pathOptions, { 'href': imageUrl, 'height': size.height, 'width': size.width, x: x, y: y });
         markerEle = maps.renderer.drawImage(pathOptions);
     }
@@ -837,6 +859,7 @@ export function drawSymbols(shape, imageUrl, location, markerID, shapeCustom, ma
  * @param {any} data - Specifies the data
  * @param {string} value - Specifies the value
  * @returns {any} - Returns the data
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getValueFromObject(data, value) {
@@ -858,6 +881,7 @@ export function getValueFromObject(data, value) {
  * @param {IMarkerRenderingEventArgs} eventArgs - Specifies the event arguments
  * @param {any} data - Specifies the data
  * @returns {IMarkerRenderingEventArgs} - Returns the arguments
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function markerColorChoose(eventArgs, data) {
@@ -874,6 +898,7 @@ export function markerColorChoose(eventArgs, data) {
  * @param {IMarkerRenderingEventArgs} eventArgs - Specifies the event arguments
  * @param {any} data - Specifies the data
  * @returns {IMarkerRenderingEventArgs} - Returns the arguments
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function markerShapeChoose(eventArgs, data) {
@@ -909,6 +934,7 @@ export function markerShapeChoose(eventArgs, data) {
  * @param {boolean} check - Specifies the boolean value
  * @param {boolean} zoomCheck - Specifies the boolean value
  * @returns {void}
+ * @private
  */
 export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex, markerCollection, layerElement, check, zoomCheck) {
     var bounds1;
@@ -1034,14 +1060,13 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
                         var clusterID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m);
                         var labelID = maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_' + markerIndex + '_dataIndex_' + dataIndex + '_cluster_' + (m) + '_datalabel_' + m;
                         m++;
-                        var imageShapeY = shapeCustom['shape'] === 'Image' ? shapeCustom['size']['height'] / 2 : 0;
-                        var ele = drawSymbols(shapeCustom['shape'], shapeCustom['imageUrl'], { x: 0, y: imageShapeY }, clusterID, shapeCustom, markerCollection, maps);
+                        var ele = drawSymbols(shapeCustom['shape'], shapeCustom['imageUrl'], { x: 0, y: 0 }, clusterID, shapeCustom, markerCollection, maps);
                         ele.setAttribute('transform', 'translate( ' + tempX + ' ' + tempY + ' )');
                         if (eventArg.shape === 'Balloon') {
-                            ele.children[0].innerHTML = indexCollection.toString();
+                            ele.children[0].innerText = indexCollection.toString();
                         }
                         else {
-                            ele.innerHTML = indexCollection.toString();
+                            ele.innerText = indexCollection.toString();
                         }
                         options = new TextOption(labelID, (0), postionY, 'middle', (colloideBounds.length + 1).toString(), '', '');
                         textElement = renderTextElement(options, style, style.color, markerCollection);
@@ -1123,6 +1148,7 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {Element | HTMLElement} markerElement - Specifies the marker element
  * @returns {void}
+ * @private
  */
 export function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
     var layerIndex = sameMarkerData[0].layerIndex;
@@ -1151,6 +1177,7 @@ export function mergeSeparateCluster(sameMarkerData, maps, markerElement) {
  * @param {Element | HTMLElement} markerElement - Specifies the marker element
  * @param {boolean} isDom - Specifies the boolean value
  * @returns {void}
+ * @private
  */
 export function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
     var layerIndex = sameMarkerData[0].layerIndex;
@@ -1245,6 +1272,7 @@ export function clusterSeparate(sameMarkerData, maps, markerElement, isDom) {
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {Element} markerCollection - Specifies the marker collection
  * @returns {Element} - Returns the element
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function marker(eventArgs, markerSettings, markerData, dataIndex, location, transPoint, markerID, offset, scale, maps, markerCollection) {
@@ -1284,6 +1312,7 @@ export function marker(eventArgs, markerSettings, markerData, dataIndex, locatio
  * @param {Point} offset - Specifies the offset value
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {HTMLElement} - Returns the html element
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplate, location, transPoint, scale, offset, maps) {
@@ -1352,11 +1381,12 @@ export function maintainSelection(elementId, elementClass, element, className) {
 export function maintainStyleClass(id, idClass, fill, opacity, borderColor, borderWidth, maps) {
     if (!getElement(id)) {
         var styleClass = createElement('style', {
-            id: id, innerHTML: '.' + idClass + '{fill:'
-                + fill + ';' + 'opacity:' + opacity + ';' +
-                'stroke-width:' + borderWidth + ';' +
-                'stroke:' + borderColor + ';' + '}'
+            id: id
         });
+        styleClass.innerText = '.' + idClass + '{fill:'
+            + fill + ';' + 'opacity:' + opacity + ';' +
+            'stroke-width:' + borderWidth + ';' +
+            'stroke:' + borderColor + ';' + '}';
         maps.shapeSelectionClass = styleClass;
         document.body.appendChild(styleClass);
     }
@@ -1627,7 +1657,7 @@ export function drawBalloon(maps, options, size, location, type, element) {
     var height = size.height;
     var pathElement;
     location.x -= width / 2;
-    location.y -= height;
+    location.y -= height / 2;
     options.d = 'M15,0C8.8,0,3.8,5,3.8,11.2C3.8,17.5,9.4,24.4,15,30c5.6-5.6,11.2-12.5,11.2-18.8C26.2,5,21.2,0,15,0z M15,16' +
         'c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S17.8,16,15,16z';
     var balloon = maps.renderer.drawPath(options);
@@ -1700,6 +1730,7 @@ export function getFieldData(dataSource, fields) {
  * @param {string | string[]} propertyPath - Specifies the property path
  * @param {LayerSettingsModel} layer - Specifies the layer settings
  * @returns {number} - Returns the number
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function checkShapeDataFields(dataSource, properties, dataPath, propertyPath, layer) {
@@ -1752,6 +1783,7 @@ export function checkPropertyPath(shapeData, shapePropertyPath, shape) {
  * @param {number} start - Specifies the start value
  * @param {number} end - Specifies the end value
  * @returns {MapLocation[]} - Returns the location
+ * @private
  */
 export function filter(points, start, end) {
     var pointObject = [];
@@ -1771,6 +1803,7 @@ export function filter(points, start, end) {
  * @param {number} minValue - Specifies the minValue
  * @param {number} maxValue -Specifies the maxValue
  * @returns {number} - Returns the number
+ * @private
  */
 export function getRatioOfBubble(min, max, value, minValue, maxValue) {
     var percent = (100 / (maxValue - minValue)) * (value - minValue);
@@ -1787,6 +1820,7 @@ export function getRatioOfBubble(min, max, value, minValue, maxValue) {
  * @param {string} type - Specifies the type
  * @param {string} geometryType - Specified the type of the geometry
  * @returns {any} - Specifies the object
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function findMidPointOfPolygon(points, type, geometryType) {
@@ -1927,6 +1961,7 @@ export function textTrim(maxWidth, text, font) {
  * @param {Size} textSize - Specifies the text size
  * @param {string} type - Specifies the type
  * @returns {Point} - Returns the point values
+ * @private
  */
 export function findPosition(location, alignment, textSize, type) {
     var x;
@@ -1951,6 +1986,7 @@ export function findPosition(location, alignment, textSize, type) {
  *
  * @param {string} id - Specifies the id
  * @returns {void}
+ * @private
  */
 export function removeElement(id) {
     var element = document.getElementById(id);
@@ -1962,6 +1998,7 @@ export function removeElement(id) {
  * @param {Maps} mapObject - Specifies the map object
  * @param {LayerSettings} layer - Specifies the layer settings
  * @returns {Point} - Returns the x and y points
+ * @private
  */
 export function calculateCenterFromPixel(mapObject, layer) {
     var point1 = convertGeoToPoint(mapObject.minLatOfGivenLocation, mapObject.minLongOfGivenLocation, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
@@ -2290,6 +2327,7 @@ export function getZoomTranslate(mapObject, layer, animate) {
  *
  * @param {Maps} map - Specifies the instance of the maps
  * @returns {void}
+ * @private
  */
 export function fixInitialScaleForTile(map) {
     map.tileZoomScale = map.tileZoomLevel = Math.floor(map.availableSize.height / 512) + 1;
@@ -2306,6 +2344,7 @@ export function fixInitialScaleForTile(map) {
  *
  * @param {string} id - Specifies the id
  * @returns {Element} - Returns the element
+ * @private
  */
 export function getElementByID(id) {
     return document.getElementById(id);
@@ -2332,6 +2371,7 @@ export function getClientElement(id) {
  * @param {Maps} maps - Specifies the instance of the maps
  * @param {number} value - Specifies the value
  * @returns {string} - Returns the string
+ * @private
  */
 export function Internalize(maps, value) {
     maps.formatFunction =
@@ -2380,6 +2420,7 @@ export function getElement(id) {
  * @param {string} targetId - Specifies the target id
  * @param {Maps} map - Specifies the instance of the maps
  * @returns {any} - Returns the object
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getShapeData(targetId, map) {
@@ -2445,6 +2486,7 @@ export function triggerShapeEvent(targetId, selection, maps, eventName) {
  *
  * @param {string} className - Specifies the class name
  * @returns {HTMLCollectionOf<Element>} - Returns the collection
+ * @private
  */
 export function getElementsByClassName(className) {
     return document.getElementsByClassName(className);
@@ -2461,6 +2503,7 @@ export function getElementsByClassName(className) {
  * @param {string} args - Specifies the args
  * @param {string} elementSelector - Specifies the element selector
  * @returns {Element} - Returns the element
+ * @private
  */
 export function querySelector(args, elementSelector) {
     var targetEle = null;
@@ -2477,6 +2520,7 @@ export function querySelector(args, elementSelector) {
  * @param {boolean} enable - Specifies the boolean value
  * @param {Maps} map - Specifies the instance of the maps
  * @returns {Element} - Returns the element
+ * @private
  */
 export function getTargetElement(layerIndex, name, enable, map) {
     var targetId;
@@ -2498,16 +2542,19 @@ export function getTargetElement(layerIndex, name, enable, map) {
  * @param {string} className - Specifies the class name
  * @param {IShapeSelectedEventArgs | any} eventArgs - Specifies the event args
  * @returns {Element} - Returns the element
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function createStyle(id, className, eventArgs) {
-    return createElement('style', {
-        id: id, innerHTML: '.' + className + '{fill:'
-            + eventArgs['fill'] + ';' + 'fill-opacity:' + (eventArgs['opacity']).toString() + ';' +
-            'stroke-opacity:' + (eventArgs['border']['opacity']).toString() + ';' +
-            'stroke-width:' + (eventArgs['border']['width']).toString() + ';' +
-            'stroke:' + eventArgs['border']['color'] + ';' + '}'
+    var styleEle = createElement('style', {
+        id: id
     });
+    styleEle.innerText = '.' + className + '{fill:'
+        + eventArgs['fill'] + ';' + 'fill-opacity:' + (eventArgs['opacity']).toString() + ';' +
+        'stroke-opacity:' + (eventArgs['border']['opacity']).toString() + ';' +
+        'stroke-width:' + (eventArgs['border']['width']).toString() + ';' +
+        'stroke:' + eventArgs['border']['color'] + ';' + '}';
+    return styleEle;
 }
 /**
  * Function to customize the style for highlight and selection
@@ -2516,12 +2563,13 @@ export function createStyle(id, className, eventArgs) {
  * @param {string} className - Specifies the class name
  * @param {IShapeSelectedEventArgs | any} eventArgs - Specifies the event args
  * @returns {void}
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function customizeStyle(id, className, eventArgs) {
     var styleEle = getElement(id);
     if (!isNullOrUndefined(styleEle)) {
-        styleEle.innerHTML = '.' + className + '{fill:'
+        styleEle.innerText = '.' + className + '{fill:'
             + eventArgs['fill'] + ';' + 'fill-opacity:' + (eventArgs['opacity']).toString() + ';' +
             'stroke-width:' + (eventArgs['border']['width']).toString() + ';' +
             'stroke-opacity:' + (eventArgs['border']['opacity']).toString() + ';' +
@@ -2537,6 +2585,7 @@ export function customizeStyle(id, className, eventArgs) {
  * @param {any} shapeData - Specifies the shape data
  * @param {any} data - Specifies the data
  * @returns {void}
+ * @private
  */
 export function triggerItemSelectionEvent(selectionSettings, map, targetElement, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2574,6 +2623,7 @@ shapeData, data) {
  *
  * @param {Element} element - Specifies the element
  * @returns {void}
+ * @private
  */
 export function removeClass(element) {
     element.removeAttribute('class');
@@ -2628,6 +2678,7 @@ export function elementAnimate(element, delay, duration, point, maps, ele, radiu
 /**
  * @param {string} id - Specifies the id
  * @returns {void}
+ * @private
  */
 export function timeout(id) {
     removeElement(id);
@@ -2643,6 +2694,7 @@ export function timeout(id) {
  * @param {Element} element - Specifies the element
  * @param {boolean} isTouch - Specifies the boolean value
  * @returns {void}
+ * @private
  */
 export function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element, isTouch) {
     var location = getMousePosition(x, y, element);
@@ -2708,9 +2760,10 @@ export function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element
  * @param {number} areaWidth - Specifies the area width
  * @param {Element} element - Specifies the element
  * @returns {void}
+ * @private
  */
 export function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element) {
-    tooltip.innerHTML = text;
+    tooltip.innerText = text;
     tooltip.style.top = tooltip.id.indexOf('_Legend') !== -1 ?
         (parseInt(size1[0], 10) + y).toString() + 'px' : (parseInt(size1[0], 10) * 2).toString() + 'px';
     tooltip.style.left = (x).toString() + 'px';
@@ -2752,30 +2805,59 @@ export function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element)
  * @param {string} text - Specifies the text
  * @param {string} top - Specifies the top
  * @param {string} left - Specifies the left
- * @param {string} fontSize - Specifies the fontSize
+ * @param {ZoomToolbarTooltipSettingsModel} settings - Specifies the tooltip settings.
  * @returns {void}
  * @private
  */
-export function createTooltip(id, text, top, left, fontSize) {
+export function createTooltip(id, text, top, left, settings) {
     var tooltip = getElement(id);
+    var borderColor = getHexColor(settings.borderColor);
+    var fontColor = getHexColor(settings.fontColor);
     var style = 'top:' + top.toString() + 'px;' +
         'left:' + left.toString() + 'px;' +
-        'color: #000000; ' +
-        'background:' + '#FFFFFF' + ';' +
+        'color:' + (fontColor ? 'rgba(' + fontColor.r + ',' + fontColor.g + ',' + fontColor.b + ',' + settings.fontOpacity + ')'
+        : settings.fontColor) + ';' +
+        'background:' + settings.fill + ';' +
         'z-index: 2;' +
-        'position:absolute;border:1px solid #707070;font-size:' + fontSize + ';border-radius:2px;';
-    if (!tooltip) {
+        'position:absolute;border:' + settings.borderWidth + 'px solid ' +
+        (borderColor ? 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + settings.borderOpacity + ')'
+            : settings.borderColor) + ';font-family:' + settings.fontFamily +
+        ';font-style:' + settings.fontStyle + ';font-weight:' + settings.fontWeight +
+        ';font-size:' + settings.fontSize + ';border-radius:' + settings.borderWidth + 'px;';
+    if (!tooltip && settings.visible) {
         tooltip = createElement('div', {
-            id: id, innerHTML: '&nbsp;' + text + '&nbsp;'
+            id: id
         });
+        tooltip.innerHTML = SanitizeHtmlHelper.sanitize('&nbsp;' + text + '&nbsp;');
         tooltip.style.cssText = style;
         document.body.appendChild(tooltip);
     }
-    else {
-        tooltip.innerHTML = '&nbsp;' + text + '&nbsp;';
+    else if (settings.visible) {
+        tooltip.innerHTML = SanitizeHtmlHelper.sanitize('&nbsp;' + text + '&nbsp;');
         tooltip.style.cssText = style;
     }
 }
+/**
+ * @private
+ */
+export function getHexColor(color) {
+    if (color.indexOf('#') !== -1 && color.toLowerCase().indexOf('rgb') === -1) {
+        var colorArray = (/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i).exec(color);
+        return colorArray ? { r: parseInt(colorArray[1], 16), g: parseInt(colorArray[2], 16), b: parseInt(colorArray[3], 16) } : null;
+    }
+    else if (color.toLowerCase().indexOf('rgb') !== -1) {
+        var colorArray = color.match(/\d+/g).map(function (a) { return parseInt(a, 10); });
+        return colorArray ? { r: colorArray[0], g: colorArray[1], b: colorArray[2] } : null;
+    }
+    else {
+        var divElment = document.createElement('div');
+        divElment.style.color = color;
+        // eslint-disable-next-line @typescript-eslint/tslint/config
+        var colorArray = window.getComputedStyle(document.body.appendChild(divElment)).color.match(/\d+/g).map(function (a) { return parseInt(a, 10); });
+        document.body.removeChild(divElment);
+        return colorArray ? { r: colorArray[0], g: colorArray[1], b: colorArray[2] } : null;
+    }
+}
 /**
  * @param {Point} location - Specifies the location
  * @param {string} shape - Specifies the shape
@@ -3148,6 +3230,7 @@ export function zoomAnimate(element, delay, duration, point, scale, size, maps)
  * @param {Function} process - Specifies the process
  * @param {Function} end - Specifies the end
  * @returns {void}
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function animate(element, delay, duration, process, end) {
@@ -3177,7 +3260,7 @@ export function animate(element, delay, duration, process, end) {
     clearAnimation = window.requestAnimationFrame(startAnimation);
 }
 /**
- * To get shape data file using Ajax.
+ * Defines the options to get shape data file using Ajax request.
  */
 var MapAjax = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3229,6 +3312,7 @@ export function smoothTranslate(element, delay, duration, point) {
  * @param {number} scaleFactor - Specifies the scale factor
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {void}
+ * @private
  */
 export function compareZoomFactor(scaleFactor, maps) {
     var previous = isNullOrUndefined(maps.shouldZoomPreviousFactor) ?
@@ -3259,8 +3343,9 @@ export function compareZoomFactor(scaleFactor, maps) {
  * @param {number} mapHeight - Specifies the height of the maps
  * @param {Maps} maps - Specifies the instance of the maps
  * @returns {number} - Returns the scale factor
+ * @private
  */
-export function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, maps) {
+export function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, mapHeight, maps, isZoomToCoordinates) {
     var scaleFactor;
     var maxZoomFact = maps.zoomSettings.maxZoom;
     var applyMethodeZoom;
@@ -3273,9 +3358,7 @@ export function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, m
     if (maps.zoomNotApplied && !maps.isTileMap) {
         var latiRatio = Math.abs((maps.baseMapBounds.latitude.max - maps.baseMapBounds.latitude.min) / (maxLat - minLat));
         var longiRatio = Math.abs((maps.baseMapBounds.longitude.max - maps.baseMapBounds.longitude.min) / (maxLong - minLong));
-        applyMethodeZoom = Math.min(latiRatio, longiRatio);
-        var minLocation = convertGeoToPoint(minLat, minLong, 1, maps.layersCollection[0], maps);
-        var maxLocation = convertGeoToPoint(maxLat, maxLong, 1, maps.layersCollection[0], maps);
+        applyMethodeZoom = isZoomToCoordinates ? (latiRatio + longiRatio) / 2 : Math.min(latiRatio, longiRatio);
     }
     var latRatio = (maxLatValue - minLatValue) / Math.PI;
     var lngDiff = maxLong - minLong;
@@ -3284,7 +3367,8 @@ export function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, m
     var WORLD_PX_WIDTH = 256;
     var latZoom = (Math.log(mapHeight / WORLD_PX_HEIGHT / latRatio) / Math.LN2);
     var lngZoom = (Math.log(mapWidth / WORLD_PX_WIDTH / lngRatio) / Math.LN2);
-    var result = (maps.zoomNotApplied && !maps.isTileMap) ? applyMethodeZoom : Math.min(latZoom, lngZoom);
+    var result = (maps.zoomNotApplied && !maps.isTileMap) ? applyMethodeZoom :
+        isZoomToCoordinates && !maps.isTileMap ? (latZoom + lngZoom) / 2 : Math.min(latZoom, lngZoom);
     scaleFactor = Math.min(result, maxZoomFact);
     scaleFactor = maps.isTileMap || !maps.zoomNotApplied ? Math.floor(scaleFactor) : scaleFactor;
     if (!maps.isTileMap) {
@@ -3297,6 +3381,7 @@ export function calculateZoomLevel(minLat, maxLat, minLong, maxLong, mapWidth, m
  *
  * @param {any} e - Specifies the any type value
  * @returns {any} - Returns the data value
+ * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function processResult(e) {