@syncfusion/ej2-maps 19.4.38 → 19.4.52

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

@@ -45,13 +45,15 @@ function calculateSize(maps) {
     const containerHeight = maps.element.clientHeight;
     const containerElementWidth = stringToNumber(maps.element.style.width, containerWidth);
     const containerElementHeight = stringToNumber(maps.element.style.height, containerHeight);
+    let availableSize = new Size(0, 0);
     if (maps.width === '0px' || maps.width === '0%' || maps.height === '0%' || maps.height === '0px') {
-        maps.availableSize = new Size(0, 0);
+        availableSize = new Size(0, 0);
     }
     else {
-        maps.availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
+        availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || containerElementWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || containerElementHeight || (maps.isDevice ?
             Math.min(window.innerWidth, window.innerHeight) : 450));
     }
+    return availableSize;
 }
 /**
  * Method to create svg for maps.
@@ -61,7 +63,7 @@ function calculateSize(maps) {
  */
 function createSvg(maps) {
     maps.renderer = new SvgRenderer(maps.element.id);
-    calculateSize(maps);
+    maps.availableSize = calculateSize(maps);
     maps.svgObject = maps.renderer.createSvg({
         id: maps.element.id + '_svg',
         width: maps.availableSize.width,
@@ -804,7 +806,7 @@ function markerShapeChoose(eventArgs, data) {
         const shape = ((eventArgs.shapeValuePath.indexOf('.') > -1) ?
             (getValueFromObject(data, eventArgs.shapeValuePath).toString()) :
             data[eventArgs.shapeValuePath]);
-        eventArgs.shape = shape;
+        eventArgs.shape = (shape.toString() !== "") ? shape : eventArgs.shape;
         if (data[eventArgs.shapeValuePath] === 'Image') {
             eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
                 ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
@@ -813,7 +815,7 @@ function markerShapeChoose(eventArgs, data) {
     }
     else {
         const shapes = (!isNullOrUndefined(eventArgs.shapeValuePath)) ? ((eventArgs.shapeValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.shapeValuePath).toString() : eventArgs.shape) : eventArgs.shape;
-        eventArgs.shape = shapes;
+        eventArgs.shape = (shapes.toString() !== "") ? shapes : eventArgs.shape;
         const shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
             ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
                 data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
@@ -1376,7 +1378,7 @@ function calculateShapes(maps, shape, options, size, location, markerEle) {
     let tempGroup;
     switch (shape) {
         case 'Balloon':
-            tempGroup = drawBalloon(maps, options, size, location, markerEle);
+            tempGroup = drawBalloon(maps, options, size, location, 'Marker', markerEle);
             break;
         case 'Cross':
             options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height
@@ -1534,9 +1536,10 @@ function drawStar(maps, options, size, location, element) {
  * @returns {Element} - Returns the element
  * @private
  */
-function drawBalloon(maps, options, size, location, element) {
+function drawBalloon(maps, options, size, location, type, element) {
     const width = size.width;
     const height = size.height;
+    let pathElement;
     location.x -= width / 2;
     location.y -= height;
     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' +
@@ -1545,9 +1548,15 @@ function drawBalloon(maps, options, size, location, element) {
     const x = size.width / 30;
     const y = size.height / 30;
     balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');
-    const g = maps.renderer.createGroup({ id: options.id });
-    appendShape(balloon, g);
-    return appendShape(g, element);
+    if (type === 'Marker') {
+        const g = maps.renderer.createGroup({ id: options.id });
+        appendShape(balloon, g);
+        pathElement = appendShape(g, element);
+    }
+    else {
+        pathElement = balloon;
+    }
+    return pathElement;
 }
 /**
  * Internal rendering of Pattern
@@ -2664,6 +2673,8 @@ function renderLegendShape(location, size, shape, options, url) {
     const shapeY = location.y;
     const x = location.x + (-shapeWidth / 2);
     const y = location.y + (-shapeHeight / 2);
+    options['stroke'] = (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross') ? options['fill'] : options['stroke'];
+    options['stroke-width'] = (options['stroke-width'] === 0 && (shape === 'HorizontalLine' || shape === 'VerticalLine' || shape === 'Cross')) ? 1 : options['stroke-width'];
     switch (shape) {
         case 'Circle':
         case 'Bubble':
@@ -2675,6 +2686,11 @@ function renderLegendShape(location, size, shape, options, url) {
                 + (shapeY + (-shapeHeight / 2));
             merge(options, { 'd': renderPath });
             break;
+        case 'HorizontalLine':
+            renderPath = 'M' + ' ' + shapeX + ' ' + shapeY + ' ' + 'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' '
+                + shapeY;
+            merge(options, { 'd': renderPath });
+            break;
         case 'Diamond':
             renderPath = 'M' + ' ' + x + ' ' + shapeY + ' ' +
                 'L' + ' ' + shapeX + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
@@ -4206,6 +4222,9 @@ __decorate$1([
  */
 class LegendSettings extends ChildProperty {
 }
+__decorate$1([
+    Property(false)
+], LegendSettings.prototype, "useMarkerShape", void 0);
 __decorate$1([
     Property(false)
 ], LegendSettings.prototype, "toggleVisibility", void 0);
@@ -5483,7 +5502,8 @@ class LayerPanel {
         else {
             this.clipRectElement = this.mapObject.renderer.drawClipPath(new RectOption(this.mapObject.element.id + '_MapArea_ClipRect', 'transparent', { width: 1, color: 'Gray' }, 1, {
                 x: this.mapObject.isTileMap ? 0 : areaRect.x, y: this.mapObject.isTileMap ? 0 : areaRect.y,
-                width: areaRect.width, height: (areaRect.height < 0) ? 0 : areaRect.height
+                width: areaRect.width, height: (areaRect.height < 0) ? 0 : !isNullOrUndefined(this.mapObject.legendModule) &&
+                    this.mapObject.legendModule.totalPages.length > 0 ? this.mapObject.legendModule.legendTotalRect.height : areaRect.height
             }));
         }
         this.layerGroup.appendChild(this.clipRectElement);
@@ -5949,7 +5969,7 @@ class LayerPanel {
                         }
                         pathEle.setAttribute('aria-label', ((!isNullOrUndefined(currentShapeData['property'])) ?
                             (currentShapeData['property'][properties]) : ''));
-                        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + i + 2).toString());
+                        pathEle.setAttribute('tabindex', (this.mapObject.tabIndex + i + 3).toString());
                         if (drawingType === 'LineString') {
                             pathEle.setAttribute('style', 'outline:none');
                         }
@@ -7167,7 +7187,15 @@ let Maps = class Maps extends Component {
         }
         this.mapLayerPanel.measureLayerPanel();
         this.element.appendChild(this.svgObject);
+        const position = this.getExtraPosition();
         for (let i = 0; i < this.layers.length; i++) {
+            if (position.x !== 0 || position.y !== 0) {
+                let markerTemplate$$1 = document.getElementById(this.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
+                if (!isNullOrUndefined(markerTemplate$$1)) {
+                    markerTemplate$$1.style.top = this.mapAreaRect.y + position.y + 'px';
+                    markerTemplate$$1.style.left = this.mapAreaRect.x + position.x + 'px';
+                }
+            }
             if (this.layers[i].selectionSettings && this.layers[i].selectionSettings.enable &&
                 this.layers[i].initialShapeSelection.length > 0 && this.checkInitialRender) {
                 const checkSelection = this.layers[i].selectionSettings.enableMultiSelect;
@@ -7566,7 +7594,6 @@ let Maps = class Maps extends Component {
             const titleBounds = new Rect(location.x, location.y, elementSize.width, elementSize.height);
             const element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
             element.setAttribute('aria-label', this.description || title.text);
-            element.setAttribute('tabindex', (this.tabIndex + (type === 'title' ? 1 : 2)).toString());
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
                 height = Math.abs((titleBounds.y + this.margin.bottom) - this.availableSize.height);
                 this.mapAreaRect = new Rect(this.margin.left, titleBounds.y + 10, width, height - 10);
@@ -7625,6 +7652,8 @@ let Maps = class Maps extends Component {
         EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMoveOnMap, this);
         EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEndOnMap, this);
         EventHandler.add(this.element, 'pointerleave mouseleave', this.mouseLeaveOnMap, this);
+        EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);
+        EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);
         //  EventHandler.add(this.element, cancelEvent, this.mouseLeaveOnMap, this);
         window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.mapsOnResize.bind(this));
     }
@@ -7642,6 +7671,8 @@ let Maps = class Maps extends Component {
         EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMoveOnMap);
         EventHandler.remove(this.element, Browser.touchEndEvent, this.mouseEndOnMap);
         EventHandler.remove(this.element, 'pointerleave mouseleave', this.mouseLeaveOnMap);
+        EventHandler.remove(this.element, 'keydown', this.keyDownHandler);
+        EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
         //EventHandler.remove(this.element, cancelEvent, this.mouseLeaveOnMap);
         window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.mapsOnResize);
     }
@@ -7657,6 +7688,96 @@ let Maps = class Maps extends Component {
             removeClass(document.getElementsByClassName('highlightMapStyle')[0]);
         }
     }
+    keyUpHandler(event) {
+        const id = event.target['id'];
+        if (event.code === 'Tab' && id.indexOf('_LayerIndex_') > -1 && id.indexOf('shapeIndex') > -1) {
+            this.keyboardHighlightSelection(id, event.type);
+        }
+        else if (id.indexOf('_LayerIndex_') === -1 && id.indexOf('shapeIndex') === -1 &&
+            getElementsByClassName('highlightMapStyle').length > 0) {
+            removeClass(getElementsByClassName('highlightMapStyle')[0]);
+            if (this.legendSettings.visible && this.legendModule) {
+                this.legendModule.removeShapeHighlightCollection();
+            }
+        }
+    }
+    keyboardHighlightSelection(id, key) {
+        const layerIndex = parseInt(id.split('_LayerIndex_')[1].split('_')[0], 10);
+        const shapeIndex = parseInt(id.split('_shapeIndex_')[1].split('_')[0], 10);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const shapeData = this.layers[layerIndex].shapeData['features']['length'] > shapeIndex ?
+            this.layers[layerIndex].shapeData['features'][shapeIndex]['properties'] : null;
+        const dataIndex = parseInt(id.split('_dataIndex_')[1].split('_')[0], 10);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const data = isNullOrUndefined(dataIndex) ? null : this.layers[layerIndex].dataSource[dataIndex];
+        if (this.layers[layerIndex].selectionSettings.enable && key === 'keydown' && this.selectionModule) {
+            this.selectionModule.selectionsettings = this.layers[layerIndex].selectionSettings;
+            this.selectionModule.selectionType = 'Shape';
+            this.selectionModule.selectElement(event.target, layerIndex, data, shapeData);
+        }
+        else if (this.highlightModule && (this.layers[layerIndex].highlightSettings.enable && key === 'keyup' &&
+            !event.target.classList.contains('ShapeselectionMapStyle'))) {
+            this.highlightModule.highlightSettings = this.layers[layerIndex].highlightSettings;
+            this.highlightModule.handleHighlight(event.target, layerIndex, data, shapeData);
+        }
+    }
+    keyDownHandler(event) {
+        const zoom = this.zoomModule;
+        if ((event.key === '+' || event.code === 'Equal') && zoom) {
+            zoom.performZoomingByToolBar('zoomin');
+        }
+        else if ((event.key === '-' || event.code === 'Minus') && zoom) {
+            zoom.performZoomingByToolBar('zoomout');
+        }
+        else if (event['keyCode'] === 82 && zoom) {
+            zoom.performZoomingByToolBar('reset');
+        }
+        else if ((event.code === 'ArrowUp' || event.code === 'ArrowDown') && zoom) {
+            event.preventDefault();
+            zoom.mouseDownLatLong['x'] = 0;
+            zoom.mouseMoveLatLong['y'] = this.mapAreaRect.height / 7;
+            zoom.panning('None', zoom.mouseDownLatLong['x'], event.code === 'ArrowUp' ? -(zoom.mouseMoveLatLong['y']) :
+                zoom.mouseMoveLatLong['y'], event);
+            zoom.mouseDownLatLong['y'] = zoom.mouseMoveLatLong['y'];
+        }
+        else if ((event.code === 'ArrowLeft' || event.code === 'ArrowRight') && zoom) {
+            event.preventDefault();
+            zoom.mouseDownLatLong['y'] = 0;
+            zoom.mouseMoveLatLong['x'] = this.mapAreaRect.width / 7;
+            zoom.panning('None', event.code === 'ArrowLeft' ? -(zoom.mouseMoveLatLong['x']) : zoom.mouseMoveLatLong['x'], zoom.mouseDownLatLong['y'], event);
+            zoom.mouseDownLatLong['x'] = zoom.mouseMoveLatLong['x'];
+        }
+        else if (event.code === 'Enter') {
+            const id = event.target['id'];
+            event.preventDefault();
+            if (this.legendModule && (id.indexOf('_Left_Page_Rect') > -1 || id.indexOf('_Right_Page_Rect') > -1)) {
+                this.legendModule.currentPage = (id.indexOf('_Left_Page_') > -1) ? (this.legendModule.currentPage - 1) :
+                    (this.legendModule.currentPage + 1);
+                this.legendModule.legendGroup = this.renderer.createGroup({ id: this.element.id + '_Legend_Group' });
+                this.legendModule.drawLegendItem(this.legendModule.currentPage);
+                const textContent = (document.getElementById(this.element.id + '_Paging_Text')).textContent;
+                const text = textContent.split('/').map(Number);
+                if (id.indexOf('_Left_Page_Rect') > -1) {
+                    if (text[0] !== 1) {
+                        event.target.focus();
+                    }
+                    event.target.style.outlineColor = text[0] - 1 !== text[1] ? '' : 'transparent';
+                }
+                else if (id.indexOf('_Right_Page_Rect') > -1) {
+                    if (text[0] !== text[1]) {
+                        event.target.focus();
+                    }
+                    event.target.style.outlineColor = text[0] !== text[1] + 1 ? '' : 'transparent';
+                }
+                if (querySelector(this.element.id + '_Legend_Border', this.element.id)) {
+                    querySelector(this.element.id + '_Legend_Border', this.element.id).style.pointerEvents = 'none';
+                }
+            }
+            if (id.indexOf('shapeIndex') > -1) {
+                this.keyboardHighlightSelection(id, event.type);
+            }
+        }
+    }
     /**
      * Gets the selected element to be maintained or not.
      *
@@ -7992,24 +8113,26 @@ let Maps = class Maps extends Component {
     mapsOnResize(e) {
         this.isResize = this.isReset = true;
         const args = {
+            cancel: false,
             name: resize,
             previousSize: this.availableSize,
-            currentSize: new Size(0, 0),
+            currentSize: calculateSize(this),
             maps: this
         };
-        if (this.resizeTo) {
-            clearTimeout(this.resizeTo);
-        }
-        if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
-            this.resizeTo = setTimeout(() => {
-                this.unWireEVents();
-                this.createSVG();
-                this.refreshing = true;
-                this.wireEVents();
-                args.currentSize = this.availableSize;
-                this.trigger(resize, args);
-                this.render();
-            }, 500);
+        this.trigger(resize, args);
+        if (!args.cancel) {
+            if (this.resizeTo) {
+                clearTimeout(this.resizeTo);
+            }
+            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-maps')) {
+                this.resizeTo = setTimeout(() => {
+                    this.unWireEVents();
+                    this.createSVG();
+                    this.refreshing = true;
+                    this.wireEVents();
+                    this.render();
+                }, 500);
+            }
         }
         return false;
     }
@@ -8593,6 +8716,26 @@ let Maps = class Maps extends Component {
         });
         return isVisible;
     }
+    /**
+     * To find space between the secondary element and svg element.
+     * @private
+     */
+    getExtraPosition() {
+        let top = 0;
+        let left = 0;
+        const svgElement = getElement(this.element.id + '_svg');
+        if (!isNullOrUndefined(svgElement)) {
+            const svgClientRects = svgElement.getClientRects();
+            const mapsClientRects = (getElement(this.element.id + '_Secondary_Element')).getClientRects();
+            if (svgClientRects.length !== 0 && mapsClientRects.length !== 0) {
+                const svgClientRect = svgClientRects[0];
+                const mapsClientRect = mapsClientRects[0];
+                top = svgClientRect.top - mapsClientRect.top;
+                left = svgClientRect.left - mapsClientRect.left;
+            }
+        }
+        return new Point(left, top);
+    }
     /**
      * To find marker visibility
      */
@@ -9789,7 +9932,14 @@ class NavigationLine {
  */
 class Legend {
     constructor(maps) {
+        /**
+         * @private
+         */
         this.legendBorderRect = new Rect(0, 0, 0, 0);
+        /**
+         * @private
+         */
+        this.legendTotalRect = new Rect(0, 0, 0, 0);
         /**
          * @private
          */
@@ -9806,12 +9956,27 @@ class Legend {
         this.textMaxWidth = 0;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.shapeHighlightCollection = [];
+        /**
+         * @private
+         */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.legendHighlightCollection = [];
+        /**
+         * @private
+         */
         this.shapePreviousColor = [];
+        /**
+         * @private
+         */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.selectedNonLegendShapes = [];
+        /**
+         * @private
+         */
         this.shapeToggled = true;
+        /**
+         * @private
+         */
         this.legendElement = null;
         this.maps = maps;
         this.addEventListener();
@@ -10190,6 +10355,11 @@ class Legend {
             this.drawLegendItem(this.currentPage);
         }
     }
+    /**
+     * @param {string} page - Specifies the legend page.
+     * @returns {void}
+     * @private
+     */
     drawLegendItem(page) {
         const map = this.maps;
         const legend = map.legendSettings;
@@ -10197,6 +10367,7 @@ class Legend {
         const shapeSize = new Size(legend.shapeWidth, legend.shapeHeight);
         let textOptions;
         const render = map.renderer;
+        let legendShape = legend.shape;
         if (page >= 0 && page < this.totalPages.length) {
             if (querySelector(this.legendGroup.id, this.maps.element.id)) {
                 remove(querySelector(this.legendGroup.id, this.maps.element.id));
@@ -10206,8 +10377,9 @@ class Legend {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const collection = this.totalPages[page]['Collection'][i];
                 const shapeBorder = collection['shapeBorder'];
-                const legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
+                let legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
                 let legendText = collection['DisplayText'];
+                const pagingArrowPadding = 4;
                 const shape = ((legend.type === 'Markers') ? ((isNullOrUndefined(collection['ImageSrc'])) ?
                     legend.shape : 'Image') : collection['legendShape']);
                 const strokeColor = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
@@ -10217,8 +10389,8 @@ class Legend {
                     1 : shapeBorder.width : shapeBorder.width;
                 const shapeId = map.element.id + '_Legend_Shape_Index_' + collection['idIndex'];
                 const textId = map.element.id + '_Legend_Text_Index_' + collection['idIndex'];
-                const shapeLocation = collection['Shape'];
-                const textLocation = collection['Text'];
+                const shapeLocation = new Point(collection['Shape']['x'], (collection['Shape']['y'] - pagingArrowPadding));
+                const textLocation = new Point(collection['Text']['x'], (collection['Text']['y'] - pagingArrowPadding));
                 const imageUrl = ((isNullOrUndefined(collection['ImageSrc'])) ? legend.shape : collection['ImageSrc']);
                 const renderOptions = new PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
                 const legendTextStyle = {
@@ -10232,7 +10404,17 @@ class Legend {
                 if (i === 0) {
                     this.renderLegendBorder();
                 }
-                legendElement.appendChild(drawSymbol(shapeLocation, shape, shapeSize, collection['ImageSrc'], renderOptions));
+                if (legend.type === 'Markers' && legend.useMarkerShape) {
+                    const legendShapeData = this.legendCollection[collection['idIndex']].data[0];
+                    const marker$$1 = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
+                    legendShape = !isNullOrUndefined(marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']]) && marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] !== '' ? marker$$1.dataSource[legendShapeData['dataIndex']][marker$$1['shapeValuePath']] : marker$$1.shape;
+                }
+                if (legendShape === "Balloon") {
+                    legendElement.appendChild(drawBalloon(map, renderOptions, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
+                }
+                else {
+                    legendElement.appendChild(drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions));
+                }
                 const legendRectSize = collection['Rect']['x'] + collection['Rect']['width'];
                 if (legendRectSize > this.legendBorderRect.width) {
                     const trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legendTextStyle, legendRectSize);
@@ -10251,10 +10433,10 @@ class Legend {
                         const pagingFont = legend.textStyle;
                         const pagingTextSize = measureText(pagingText, pagingFont);
                         const leftPageX = (this.legendItemRect.x + this.legendItemRect.width) - pagingTextSize.width -
-                            (width * 2) - spacing;
+                            (width * 2) - (spacing * 2) + (pagingArrowPadding / 2);
                         const rightPageX = (this.legendItemRect.x + this.legendItemRect.width);
+                        const pageTextX = rightPageX - width - (pagingTextSize.width / 2) - (spacing / 2) - pagingArrowPadding;
                         const locY = (this.legendItemRect.y + this.legendItemRect.height) + (height / 2) + spacing;
-                        const pageTextX = rightPageX - width - (pagingTextSize.width / 2) - (spacing / 2);
                         pagingGroup = render.createGroup({ id: map.element.id + '_Legend_Paging_Group' });
                         const leftPageElement = render.createGroup({ id: map.element.id + '_Legend_Left_Paging_Group' });
                         const rightPageElement = render.createGroup({ id: map.element.id + '_Legend_Right_Paging_Group' });
@@ -10262,15 +10444,19 @@ class Legend {
                             ' L ' + (rightPageX - width) + ' ' + (locY + height) + ' z ';
                         const leftPath = ' M ' + leftPageX + ' ' + locY + ' L ' + (leftPageX + width) + ' ' + (locY - height) +
                             ' L ' + (leftPageX + width) + ' ' + (locY + height) + ' z ';
-                        const leftPageOptions = new PathOption(map.element.id + '_Left_Page', '#a6a6a6', 0, '#a6a6a6', 1, 1, '', leftPath);
+                        const leftPageOptions = new PathOption(map.element.id + '_Left_Page', '#a6a6a6', 0, '#a6a6a6', ((page + 1) === 1 ? 0.5 : 1), 1, '', leftPath);
                         leftPageElement.appendChild(render.drawPath(leftPageOptions));
                         const leftRectPageOptions = new RectOption(map.element.id + '_Left_Page_Rect', 'transparent', {}, 1, new Rect(leftPageX - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
-                        leftPageElement.appendChild(render.drawRectangle(leftRectPageOptions));
+                        let pathEle = render.drawRectangle(leftRectPageOptions);
+                        pathEle.setAttribute('tabindex', ((page + 1) === 1 ? -1 : map.tabIndex + 1).toString());
+                        leftPageElement.appendChild(pathEle);
                         this.wireEvents(leftPageElement);
-                        const rightPageOptions = new PathOption(map.element.id + '_Right_Page', '#a6a6a6', 0, '#a6a6a6', 1, 1, '', rightPath);
+                        const rightPageOptions = new PathOption(map.element.id + '_Right_Page', '#a6a6a6', 0, '#a6a6a6', ((page + 1) === this.totalPages.length ? 0.5 : 1), 1, '', rightPath);
                         rightPageElement.appendChild(render.drawPath(rightPageOptions));
-                        const rightRectPageOptions = new RectOption(map.element.id + '_Right_Page_Rect', 'transparent', {}, 1, new Rect((rightPageX - width), (locY - height), width, spacing), null, null, '', '');
-                        rightPageElement.appendChild(render.drawRectangle(rightRectPageOptions));
+                        const rightRectPageOptions = new RectOption(map.element.id + '_Right_Page_Rect', 'transparent', {}, 1, new Rect(rightPageX - spacing - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
+                        pathEle = render.drawRectangle(rightRectPageOptions);
+                        pathEle.setAttribute('tabindex', ((page + 1) === this.totalPages.length ? -1 : map.tabIndex + 2).toString());
+                        rightPageElement.appendChild(pathEle);
                         this.wireEvents(rightPageElement);
                         pagingGroup.appendChild(leftPageElement);
                         pagingGroup.appendChild(rightPageElement);
@@ -11008,13 +11194,13 @@ class Legend {
                     break;
             }
             if ((legend.height || legend.width) && legend.mode !== 'Interactive') {
-                map.totalRect = totalRect;
+                this.legendTotalRect = map.totalRect = totalRect;
             }
             else {
                 if ((legend.height || legend.width) && legend.mode === 'Interactive') {
                     map.totalRect = totalRect;
                 }
-                map.mapAreaRect = totalRect;
+                this.legendTotalRect = map.mapAreaRect = totalRect;
             }
             this.translate = new Point(x, y);
         }
@@ -11048,7 +11234,7 @@ class Legend {
                     }
                     else {
                         newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
-                            shape: !isNullOrUndefined(marker$$1.shapeValuePath) ? data[marker$$1.shapeValuePath] : marker$$1.shape });
+                            shape: (!isNullOrUndefined(marker$$1.shapeValuePath) && !isNullOrUndefined(data[marker$$1.shapeValuePath]) && data[marker$$1.shapeValuePath] !== '') ? data[marker$$1.shapeValuePath] : (this.maps.legendSettings.useMarkerShape ? marker$$1.shape : this.maps.legendSettings.shape) });
                         this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                     }
                 }
@@ -11414,7 +11600,7 @@ class Legend {
                             shape = this.legendCollection[legendIndex]['data'][i];
                             mapElement = this.maps.legendSettings.type === 'Bubbles' ? querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                 '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id) : querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
-                                '_MarkerIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
+                                '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                             if (!isNullOrUndefined(shape['shape']) && shape['shape'] === 'Balloon') {
                                 mapElement = mapElement.children[0];
                             }
@@ -11438,6 +11624,9 @@ class Legend {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', '#E5E5E5');
+                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
+                                        legendShapeId.setAttribute('stroke', '#E5E5E5');
+                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId.setAttribute('fill', '#E5E5E5');
                                 }
@@ -11452,6 +11641,9 @@ class Legend {
                                 if (targetEle !== null) {
                                     legendShapeId = querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                     legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
+                                    if (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
+                                        legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
+                                    }
                                     legendTextId = querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                     legendTextId.setAttribute('fill', '#757575');
                                 }
@@ -11536,7 +11728,7 @@ class Legend {
             targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendSettings.visible &&
             targetEle.id.indexOf('_Text') === -1) {
             let LegendInteractive;
-            const legendIndex = parseFloat(targetEle.id.substr((this.maps.element.id + '_Legend_Index_').length));
+            const legendIndex = parseFloat(targetEle.id.split(this.maps.element.id + '_Legend_Index_')[1]);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let mapdata;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11867,14 +12059,7 @@ class Highlight {
                 this.highlightSettings = this.maps.layers[layerIndex].navigationLineSettings[index].highlightSettings;
             }
             if (this.highlightSettings.enable) {
-                if (this.maps.legendSettings.visible && targetEle.id.indexOf('_MarkerIndex_') === -1) {
-                    this.maps.legendModule.shapeHighLightAndSelection(targetEle, data, this.highlightSettings, 'highlight', layerIndex);
-                }
-                const selectHighLight = targetEle.id.indexOf('shapeIndex') > -1 && this.maps.legendSettings.visible ?
-                    this.maps.legendModule.shapeToggled : true;
-                if (selectHighLight) {
-                    this.mapHighlight(targetEle, shapeData, data);
-                }
+                this.handleHighlight(targetEle, layerIndex, data, shapeData);
             }
             else {
                 const element = document.getElementsByClassName('highlightMapStyle')[0];
@@ -11898,21 +12083,35 @@ class Highlight {
                 targetEle.setAttribute('stroke', this.maps.layers[layerIndex].navigationLineSettings[index].color);
             }
             removeClass(targetEle);
-            if (this.maps.legendSettings.visible) {
+            if (this.maps.legendSettings.visible && this.maps.legendModule) {
                 this.maps.legendModule.removeShapeHighlightCollection();
             }
         }
         else if ((targetEle.id.indexOf(this.maps.element.id + '_Legend_Shape_Index') !== -1 ||
-            targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) &&
+            targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendModule &&
             this.maps.legendSettings.visible && targetEle.id.indexOf('_Text') === -1) {
             this.maps.legendModule.legendHighLightAndSelection(targetEle, 'highlight');
         }
         else {
-            if (this.maps.legendSettings.visible) {
+            if (this.maps.legendSettings.visible && this.maps.legendModule) {
                 this.maps.legendModule.removeLegendHighlightCollection();
             }
         }
     }
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handleHighlight(targetElement, layerIndex, data, shapeData) {
+        if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1 && this.maps.legendModule) {
+            this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.highlightSettings, 'highlight', layerIndex);
+        }
+        const selectHighLight = targetElement.id.indexOf('shapeIndex') > -1 && (this.maps.legendSettings.visible && this.maps.legendModule) ?
+            this.maps.legendModule.shapeToggled : true;
+        if (selectHighLight) {
+            this.mapHighlight(targetElement, shapeData, data);
+        }
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     mapHighlight(targetEle, shapeData, data) {
         const layerIndex = parseInt(targetEle.id.split('_LayerIndex_')[1].split('_')[0], 10);
@@ -12069,24 +12268,31 @@ class Selection {
                 this.selectionType = 'navigationline';
             }
             if (this.selectionsettings.enable) {
-                this.maps.mapSelect = targetElement ? true : false;
-                if (this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1) {
-                    this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.selectionsettings, 'selection', layerIndex);
-                }
-                const shapeToggled = (targetElement.id.indexOf('shapeIndex') > -1 && this.maps.legendSettings.visible) ?
-                    this.maps.legendModule.shapeToggled : true;
-                if (shapeToggled) {
-                    this.selectMap(targetElement, shapeData, data);
-                }
+                this.selectElement(targetElement, layerIndex, data, shapeData);
             }
         }
-        else if (this.maps.legendSettings.visible && !this.maps.legendSettings.toggleLegendSettings.enable &&
+        else if ((this.maps.legendSettings.visible && !this.maps.legendSettings.toggleLegendSettings.enable && this.maps.legendModule) &&
             !isNullOrUndefined(targetElement.id) && targetElement.id.indexOf('_Text') === -1 &&
             (targetElement.id.indexOf(this.maps.element.id + '_Legend_Shape_Index') > -1 ||
                 targetElement.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1)) {
             this.maps.legendModule.legendHighLightAndSelection(targetElement, 'selection');
         }
     }
+    /**
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    selectElement(targetElement, layerIndex, data, shapeData) {
+        this.maps.mapSelect = targetElement ? true : false;
+        if (this.maps.legendModule && this.maps.legendSettings.visible && targetElement.id.indexOf('_MarkerIndex_') === -1) {
+            this.maps.legendModule.shapeHighLightAndSelection(targetElement, data, this.selectionsettings, 'selection', layerIndex);
+        }
+        const shapeToggled = (targetElement.id.indexOf('shapeIndex') > -1 && this.maps.legendSettings.visible && this.maps.legendModule) ?
+            this.maps.legendModule.shapeToggled : true;
+        if (shapeToggled) {
+            this.selectMap(targetElement, shapeData, data);
+        }
+    }
     // eslint-disable-next-line valid-jsdoc
     /**
      * Public method for selection
@@ -13461,6 +13667,9 @@ class Zoom {
             }
         }
     }
+    /**
+     * @private
+     */
     panning(direction, xDifference, yDifference, mouseLocation) {
         const map = this.maps;
         let panArgs;
@@ -13479,6 +13688,8 @@ class Zoom {
         yDifference = !isNullOrUndefined(yDifference) ? yDifference : (down.y - move.y);
         this.maps.mergeCluster();
         if (!map.isTileMap) {
+            const legendElement = document.getElementById(map.element.id + '_Legend_Group');
+            const legendHeight = !isNullOrUndefined(legendElement) ? legendElement.getClientRects()[0].height : 0;
             x = translatePoint.x - xDifference / scale;
             y = translatePoint.y - yDifference / scale;
             const layerRect = getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
@@ -13486,7 +13697,7 @@ class Zoom {
             const panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
                 ((layerRect.left + layerRect.width) >= (elementRect.left + elementRect.width) + map.mapAreaRect.x + map.margin.left)));
             const panningYDirection = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
-                ((layerRect.top + layerRect.height + map.margin.top) >= (elementRect.top + elementRect.height))));
+                ((layerRect.top + layerRect.height + legendHeight + map.margin.top) >= (elementRect.top + elementRect.height))));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const location = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, mouseLocation['layerX'], mouseLocation['layerY']);
             panArgs = {
@@ -13888,8 +14099,9 @@ class Zoom {
                 x = (size.width - toolBarSize.width) - padding;
                 break;
         }
-        element.style.left = x + 'px';
-        element.style.top = y + 'px';
+        let extraPosition = map.getExtraPosition();
+        element.style.left = x + extraPosition.x + 'px';
+        element.style.top = y + extraPosition.y + 'px';
         const color = this.maps.zoomSettings.highlightColor || this.maps.themeStyle.zoomSelectionColor;
         const css = ' .e-maps-toolbar:hover > circle { stroke:' + color + '; } .e-maps-toolbar:hover > path { fill: ' + color + ' ;  stroke: ' + color + '; }' +
             '.e-maps-toolbar:hover { cursor: pointer; } .e-maps-cursor-disable:hover { cursor: not-allowed; } .e-maps-panning:hover { cursor: pointer; } ' +