@syncfusion/ej2-maps 19.3.44 → 19.4.42

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

@@ -1,12 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 import { Point, getElementByID, PathOption, Rect, convertGeoToPoint, CircleOption, convertTileLatLongToPoint } from '../utils/helper';
 import { RectOption, createTooltip, calculateScale, getTouchCenter, getTouches, targetTouches } from '../utils/helper';
 import { MapLocation, zoomAnimate, smoothTranslate, measureText, textTrim, clusterTemplate, marker } from '../utils/helper';
@@ -116,8 +107,10 @@ var Zoom = /** @class */ (function () {
             if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                 document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
             }
+            this.markerLineAnimation(map);
             map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
             var element1 = document.getElementById(this.maps.element.id + '_tiles');
+            var animationDuration = this.maps.layersCollection[0].animationDuration;
             setTimeout(function () {
                 // if (type === 'ZoomOut') {
                 //     element1.removeChild(element1.children[element1.childElementCount - 1]);
@@ -131,7 +124,7 @@ var Zoom = /** @class */ (function () {
                 if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
                     document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                 }
-            }, 250);
+            }, animationDuration);
         }
         this.maps.zoomNotApplied = false;
     };
@@ -140,14 +133,14 @@ var Zoom = /** @class */ (function () {
         var zoomArgs;
         if (!map.isTileMap) {
             zoomArgs = {
-                cancel: false, name: 'zoom', type: type, maps: !map.isBlazor ? map : null,
+                cancel: false, name: 'zoom', type: type, maps: map,
                 tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
                 tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale }
             };
         }
         else {
             zoomArgs = {
-                cancel: false, name: 'zoom', type: type, maps: !map.isBlazor ? map : null,
+                cancel: false, name: 'zoom', type: type, maps: map,
                 tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
                 tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale }
             };
@@ -306,11 +299,13 @@ var Zoom = /** @class */ (function () {
      */
     Zoom.prototype.animateTransform = function (element, animate, x, y, scale) {
         var duration = this.currentLayer.animationDuration;
-        if (!animate || duration === 0) {
+        if (!animate || duration === 0 || this.maps.isTileMap) {
             element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
             return;
         }
-        zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
+        if (!this.maps.isTileMap) {
+            zoomAnimate(element, 0, duration, new MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
+        }
     };
     Zoom.prototype.applyTransform = function (animate) {
         var layerIndex;
@@ -358,16 +353,18 @@ var Zoom = /** @class */ (function () {
                             }
                         }
                         else if (currentEle.id.indexOf('_Markers_Group') > -1) {
-                            if (!this.isPanning || this.maps.isBlazor) {
+                            if (!this.isPanning) {
                                 this.markerTranslates(currentEle.childNodes[0], factor, x, y, scale, 'Marker', layerElement, animate);
                             }
                             currentEle = layerElement.childNodes[j];
+                            var markerAnimation = void 0;
                             if (!isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                 for (var k = 0; k < currentEle.childElementCount; k++) {
                                     this.markerTranslate(currentEle.childNodes[k], factor, x, y, scale, 'Marker', animate);
                                     var layerIndex_1 = parseInt(currentEle.childNodes[k]['id'].split('_LayerIndex_')[1].split('_')[0], 10);
                                     var dataIndex = parseInt(currentEle.childNodes[k]['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                     var markerIndex = parseInt(currentEle.childNodes[k]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
+                                    markerAnimation = this.currentLayer.markerSettings[markerIndex].animationDuration > 0;
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     var markerSelectionValues = this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
                                     for (var x_1 = 0; x_1 < this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x_1++) {
@@ -378,9 +375,17 @@ var Zoom = /** @class */ (function () {
                                             this.maps.markerSelection(this.currentLayer.markerSettings[markerIndex].selectionSettings, this.maps, currentEle.children[k], this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
                                         }
                                     }
-                                    if (!this.maps.isTileMap && this.currentLayer.animationDuration > 0) {
-                                        markerStyle = 'visibility:hidden';
-                                        currentEle.setAttribute('style', markerStyle);
+                                    if ((this.currentLayer.animationDuration > 0 || (this.maps.layersCollection[0].animationDuration > 0 && this.currentLayer.type === 'SubLayer')) && !this.isPanning) {
+                                        if (this.maps.isTileMap) {
+                                            var groupElement = document.querySelector('.GroupElement');
+                                            if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation) {
+                                                groupElement.style.display = 'none';
+                                            }
+                                        }
+                                        else {
+                                            markerStyle = 'visibility:hidden';
+                                            currentEle.setAttribute('style', markerStyle);
+                                        }
                                     }
                                 }
                                 if (this.isPanning && this.maps.markerModule.sameMarkerData.length > 0) {
@@ -477,10 +482,9 @@ var Zoom = /** @class */ (function () {
                     }
                 }
                 this.maps.arrangeTemplate();
-                var blazor = this.maps.isBlazor ? this.maps.blazorTemplates() : null;
             }
             if (!isNullOrUndefined(this.currentLayer)) {
-                if (!animate || this.currentLayer.animationDuration === 0) {
+                if (!animate || this.currentLayer.animationDuration === 0 || this.maps.isTileMap) {
                     this.processTemplate(x, y, scale, this.maps);
                 }
             }
@@ -532,18 +536,6 @@ var Zoom = /** @class */ (function () {
                 };
                 eventArgs = markerShapeChoose(eventArgs, data);
                 eventArgs = markerColorChoose(eventArgs, data);
-                if (_this.maps.isBlazor) {
-                    var maps = eventArgs.maps, marker_1 = eventArgs.marker, blazorEventArgs = __rest(eventArgs, ["maps", "marker"]);
-                    eventArgs = blazorEventArgs;
-                    var latitudeValue = 'Latitude';
-                    var longitudeValue = 'Longitude';
-                    markerSettings.longitudeValuePath = !isNullOrUndefined(markerSettings.longitudeValuePath) ?
-                        markerSettings.longitudeValuePath : !isNullOrUndefined(data['Longitude']) ? longitudeValue :
-                        !isNullOrUndefined(data['longitude']) ? 'longitude' : null;
-                    markerSettings.latitudeValuePath = !isNullOrUndefined(markerSettings.latitudeValuePath) ?
-                        markerSettings.latitudeValuePath : !isNullOrUndefined(data['Latitude']) ? latitudeValue :
-                        !isNullOrUndefined(data['latitude']) ? 'latitude' : null;
-                }
                 _this.maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
                     if (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
                         eventArgs = markerShapeChoose(eventArgs, data);
@@ -557,22 +549,6 @@ var Zoom = /** @class */ (function () {
                     var long = (!isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                         Number(getValueFromObject(data, markerSettings.longitudeValuePath)) : !isNullOrUndefined(data['longitude']) ?
                         parseFloat(data['longitude']) : !isNullOrUndefined(data['Longitude']) ? data['Longitude'] : 0;
-                    if (_this.maps.isBlazor) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var data1 = {};
-                        var j = 0;
-                        var text = [];
-                        for (var i = 0; i < Object.keys(data).length; i++) {
-                            if (Object.keys(data)[i].toLowerCase() !== 'text' && Object.keys(data)[i].toLowerCase() !== 'latitude'
-                                && Object.keys(data)[i].toLowerCase() !== 'blazortemplateid' && Object.keys(data)[i].toLowerCase() !== 'longitude'
-                                && Object.keys(data)[i].toLowerCase() !== 'name') {
-                                data1['text'] = text;
-                                text[j] = data[Object.keys(data)[i].toLowerCase()];
-                                j++;
-                            }
-                        }
-                        data['text'] = data1['text'];
-                    }
                     var offset = markerSettings.offset;
                     if (!eventArgs.cancel && markerSettings.visible && !isNullOrUndefined(long) && !isNullOrUndefined(lati)) {
                         var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
@@ -627,7 +603,6 @@ var Zoom = /** @class */ (function () {
      */
     Zoom.prototype.processTemplate = function (x, y, scale, maps) {
         for (var i = 0; i < this.templateCount; i++) {
-            this.currentLayer = maps.layersCollection[i];
             var factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
             var markerTemplateElement = getElementByID(maps.element.id + '_LayerIndex_' +
                 i + '_Markers_Template_Group');
@@ -793,28 +768,6 @@ var Zoom = /** @class */ (function () {
         var layer = this.maps.layersCollection[layerIndex];
         var marker = layer.markerSettings[markerIndex];
         if (!isNullOrUndefined(marker) && !isNullOrUndefined(marker.dataSource) && !isNullOrUndefined(marker.dataSource[dataIndex])) {
-            if (this.maps.isBlazor) {
-                marker.longitudeValuePath = !isNullOrUndefined(marker.longitudeValuePath) ?
-                    marker.longitudeValuePath : !isNullOrUndefined(marker.dataSource[dataIndex]['Longitude']) ? 'Longitude' :
-                    !isNullOrUndefined(marker.dataSource[dataIndex]['longitude']) ? 'longitude' : null;
-                marker.latitudeValuePath = !isNullOrUndefined(marker.latitudeValuePath) ?
-                    marker.latitudeValuePath : !isNullOrUndefined(marker.dataSource[dataIndex]['Latitude']) ? 'Latitude' :
-                    !isNullOrUndefined(marker.dataSource[dataIndex]['latitude']) ? 'latitude' : null;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var data1 = {};
-                var j = 0;
-                var text = [];
-                for (var i = 0; i < Object.keys(marker.dataSource[dataIndex]).length; i++) {
-                    if (Object.keys(marker.dataSource[dataIndex])[i].toLowerCase() !== 'text' && Object.keys(marker.dataSource[dataIndex])[i].toLowerCase() !== 'longitude'
-                        && Object.keys(marker.dataSource[dataIndex])[i].toLowerCase() !== 'latitude' && Object.keys(marker.dataSource[dataIndex])[i].toLowerCase() !== 'blazortemplateid'
-                        && Object.keys(marker.dataSource[dataIndex])[i].toLowerCase() !== 'name') {
-                        data1['text'] = text;
-                        text[j] = marker.dataSource[dataIndex][Object.keys(marker.dataSource[dataIndex])[i].toLowerCase()];
-                        j++;
-                    }
-                }
-                marker.dataSource[dataIndex]['text'] = data1['text'];
-            }
             var lng = (!isNullOrUndefined(marker.longitudeValuePath)) ?
                 Number(getValueFromObject(marker.dataSource[dataIndex], marker.longitudeValuePath)) :
                 !isNullOrUndefined(marker.dataSource[dataIndex]['longitude']) ? parseFloat(marker.dataSource[dataIndex]['longitude']) :
@@ -852,9 +805,20 @@ var Zoom = /** @class */ (function () {
             }
             else {
                 if (type === 'Template') {
-                    var elementOffset = element.getBoundingClientRect();
-                    element.style.left = ((location_2.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
-                    element.style.top = ((location_2.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
+                    if (duration > 0) {
+                        location_2.x = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location_2.x)) * scale);
+                        location_2.y = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location_2.y)) * scale);
+                        var layerOffset = getElementByID(this.maps.element.id + '_Layer_Collections').getBoundingClientRect();
+                        var elementOffset = element.parentElement.getBoundingClientRect();
+                        element.style.left = (((location_2.x) + (layerOffset.left - elementOffset.left)) + marker.offset.x) + 'px';
+                        element.style.top = (((location_2.y) + (layerOffset.top - elementOffset.top)) + marker.offset.y) + 'px';
+                        element.style.transform = 'translate(-50%, -50%)';
+                    }
+                    else {
+                        var elementOffset = element.getBoundingClientRect();
+                        element.style.left = ((location_2.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
+                        element.style.top = ((location_2.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
+                    }
                 }
                 else {
                     location_2.x = (((location_2.x + x) * scale) + marker.offset.x);
@@ -869,6 +833,20 @@ var Zoom = /** @class */ (function () {
             }
         }
     };
+    Zoom.prototype.markerLineAnimation = function (map) {
+        if (map.isTileMap) {
+            for (var i = 0; i < map.layersCollection.length; i++) {
+                var markerTemplateElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                var lineElement = getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_line_Group');
+                if (!isNullOrUndefined(markerTemplateElement)) {
+                    markerTemplateElement.style.visibility = 'hidden';
+                }
+                if (!isNullOrUndefined(lineElement)) {
+                    lineElement.style.visibility = 'hidden';
+                }
+            }
+        }
+    };
     Zoom.prototype.panning = function (direction, xDifference, yDifference, mouseLocation) {
         var map = this.maps;
         var panArgs;
@@ -898,7 +876,7 @@ var Zoom = /** @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var location_3 = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, mouseLocation['layerX'], mouseLocation['layerY']);
             panArgs = {
-                cancel: false, name: pan, maps: !map.isBlazor ? map : null,
+                cancel: false, name: pan, maps: map,
                 tileTranslatePoint: {}, translatePoint: { previous: translatePoint, current: new Point(x, y) },
                 scale: map.scale, tileZoomLevel: map.tileZoomLevel, latitude: location_3['latitude'], longitude: location_3['longitude']
             };
@@ -935,7 +913,7 @@ var Zoom = /** @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var location_4 = this.maps.getTileGeoLocation(mouseLocation['layerX'], mouseLocation['layerY']);
             panArgs = {
-                cancel: false, name: pan, maps: !map.isBlazor ? map : null,
+                cancel: false, name: pan, maps: map,
                 tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint },
                 translatePoint: { previous: translatePoint, current: map.translatePoint }, scale: map.scale,
                 tileZoomLevel: map.tileZoomLevel, latitude: location_4['latitude'], longitude: location_4['longitude']
@@ -1002,45 +980,49 @@ var Zoom = /** @class */ (function () {
             var tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
             map.scale = Math.pow(2, tileZoomFactor - 1);
             map.tileZoomLevel = tileZoomFactor;
-            map.zoomSettings.zoomFactor = zoomFactor;
-            var position = { x: map.availableSize.width / 2, y: map.availableSize.height / 2 };
-            this.getTileTranslatePosition(prevLevel, tileZoomFactor, position, type);
-            if (map.zoomSettings.resetToInitial && map.applyZoomReset && type === 'Reset' || (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && tileZoomFactor <= map.initialZoomLevel)) {
-                map.initialCheck = true;
-                map.zoomPersistence = false;
-                map.tileTranslatePoint.x = map.initialTileTranslate.x;
-                map.tileTranslatePoint.y = map.initialTileTranslate.y;
-                tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
-            }
-            this.triggerZoomEvent(prevTilePoint, prevLevel, type);
-            map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
-            map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
-            if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
-                document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
-            }
-            if (document.querySelector('.GroupElement')) {
-                document.querySelector('.GroupElement').style.display = 'none';
-            }
-            map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
-            var element1 = document.getElementById(this.maps.element.id + '_tiles');
-            setTimeout(function () {
-                if (type === 'ZoomOut' || type === 'Reset') {
-                    // element1.removeChild(element1.children[element1.childElementCount - 1]);
-                    // element1.childElementCount ? element1.removeChild(element1.children[element1.childElementCount - 1]) : element1;
+            if (map.previousScale !== map.scale || map.isReset) {
+                map.zoomSettings.zoomFactor = zoomFactor;
+                var position = { x: map.availableSize.width / 2, y: map.availableSize.height / 2 };
+                this.getTileTranslatePosition(prevLevel, tileZoomFactor, position, type);
+                if (map.zoomSettings.resetToInitial && map.applyZoomReset && type === 'Reset' || (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && tileZoomFactor <= map.initialZoomLevel)) {
+                    map.initialCheck = true;
+                    map.zoomPersistence = false;
+                    map.tileTranslatePoint.x = map.initialTileTranslate.x;
+                    map.tileTranslatePoint.y = map.initialTileTranslate.y;
+                    tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
                 }
-                _this.applyTransform(true);
-                if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
-                    document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                this.triggerZoomEvent(prevTilePoint, prevLevel, type);
+                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
+                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
+                if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
+                    document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
+                }
+                if (document.querySelector('.GroupElement')) {
+                    document.querySelector('.GroupElement').style.display = 'none';
                 }
-            }, 250);
+                this.markerLineAnimation(map);
+                map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
+                var element1 = document.getElementById(this.maps.element.id + '_tiles');
+                var animationDuration = this.maps.layersCollection[0].animationDuration;
+                setTimeout(function () {
+                    if (type === 'ZoomOut' || type === 'Reset') {
+                        // element1.removeChild(element1.children[element1.childElementCount - 1]);
+                        // element1.childElementCount ? element1.removeChild(element1.children[element1.childElementCount - 1]) : element1;
+                    }
+                    _this.applyTransform(true);
+                    if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
+                        document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
+                    }
+                }, animationDuration);
+            }
+            this.maps.zoomNotApplied = false;
         }
-        this.maps.zoomNotApplied = false;
     };
     Zoom.prototype.createZoomingToolbars = function () {
         var map = this.maps;
         this.toolBarGroup = map.renderer.createGroup({
             id: map.element.id + '_Zooming_KitCollection',
-            opacity: 0.3
+            opacity: map.theme.toLowerCase() === 'fluentuidark' ? 0.6 : 0.3
         });
         var kitHeight = 16;
         var kitWidth = 16;
@@ -1449,14 +1431,14 @@ var Zoom = /** @class */ (function () {
                 if (document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     if (!this.maps.zoomSettings.enablePanning) {
                         if (target.id.indexOf('_Zooming_ToolBar') > -1 || target.id.indexOf('_Zooming_Rect') > -1) {
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '0.3');
-                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
+                            getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
                         }
                     }
                 }
             }
             else {
-                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', '0.3');
+                getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentuidark' ? '0.6' : '0.3');
                 if (!this.maps.zoomSettings.enablePanning && document.getElementById(map.element.id + '_Zooming_ToolBar_Pan_Group')) {
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan_Rect').setAttribute('opacity', '1');
                     getElementByID(map.element.id + '_Zooming_ToolBar_Pan').setAttribute('opacity', '1');

package/src/maps/utils/enum.d.ts

@@ -36,7 +36,11 @@ export declare type MapsTheme =
 /** Renders a map with Tailwind theme. */
 'Tailwind' | 
 /** Renders a map with TailwindDark theme. */
-'TailwindDark';
+'TailwindDark' | 
+/** Renders a map with Bootstrap5 theme. */
+'Bootstrap5' | 
+/**  Render a map with Bootstrap5 dark theme. */
+'Bootstrap5Dark';
 /**
  * Defines the position of the legend.
  */
@@ -241,7 +245,9 @@ export declare type LegendShape =
 /** Specifies the legend shape as a pentagon. */
 'Pentagon' | 
 /** Specifies the legend shape as a inverted triangle. */
-'InvertedTriangle';
+'InvertedTriangle' | 
+/** Specifies to render the marker shape as balloon on maps. */
+'Balloon';
 /**
  * Defines the legend arrangement in the maps component.
  */

package/src/maps/utils/helper.d.ts

@@ -31,7 +31,7 @@ export declare function stringToNumber(value: string, containerSize: number): nu
  * @param {Maps} maps Specifies the maps instance
  * @returns {void}
  */
-export declare function calculateSize(maps: Maps): void;
+export declare function calculateSize(maps: Maps): Size;
 /**
  * Method to create svg for maps.
  *
@@ -481,6 +481,7 @@ export declare function marker(eventArgs: IMarkerRenderingEventArgs, markerSetti
  * @param {number} markerIndex - Specifies the marker index
  * @param {HTMLElement} markerTemplate - Specifies the marker template element
  * @param {Point} location - Specifies the location
+ * @param {Point} transPoint - Specifies the translate point.
  * @param {number} scale - Specifies the scale value
  * @param {Point} offset - Specifies the offset value
  * @param {Maps} maps - Specifies the instance of the maps
@@ -677,7 +678,7 @@ export declare function drawStar(maps: Maps, options: PathOption, size: Size, lo
  * @returns {Element} - Returns the element
  * @private
  */
-export declare function drawBalloon(maps: Maps, options: PathOption, size: Size, location: MapLocation, element?: Element): Element;
+export declare function drawBalloon(maps: Maps, options: PathOption, size: Size, location: MapLocation, type: string, element?: Element): Element;
 /**
  * Internal rendering of Pattern
  *
@@ -740,9 +741,10 @@ export declare function getRatioOfBubble(min: number, max: number, value: number
  *
  * @param {MapLocation[]} points - Specifies the points
  * @param {string} type - Specifies the type
+ * @param {string} geometryType - Specified the type of the geometry
  * @returns {any} - Specifies the object
  */
-export declare function findMidPointOfPolygon(points: MapLocation[], type: string): any;
+export declare function findMidPointOfPolygon(points: MapLocation[], type: string, geometryType?: string): any;
 /**
  * Check custom path
  *