all files / maps/layers/ layer-panel.js

91.11% Statements 717/787
86.8% Branches 605/697
98.18% Functions 54/55
91.11% Lines 717/787
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245   835× 835× 835× 835× 835× 835×   845× 845× 845× 845× 845× 183×       183×     183×   183× 183×   845×       845×       845× 845× 845× 845× 845× 966× 966×   845× 11×     10×       183× 183×     183×   167× 167×   16×           183× 183× 183× 33× 33×   12×     183×     180×     11×     169×   183×     183×     183× 183× 183× 183×     183× 45× 45×   138×       138× 36× 36×         36×   36×                   102× 102× 102× 102×     183×       183×       183× 183×           183× 183×   16×   183× 11× 11× 11×     183×     183× 48×   183× 183×   966× 966×     966× 948× 948× 948× 948× 948×         948×       966×       966× 966× 964× 183× 18× 18×     165×       781×   778×     778× 778× 778×   777× 759×   778×         966× 679×   287× 287× 287×     18× 18× 18× 18× 18× 18× 18×     102× 101× 101× 3742×       3742× 1298× 1233× 126×   1107× 648×       65×           778× 778× 778× 777×   778× 778× 778× 98856× 98856× 98856×   98856× 98856× 98856×     778× 778× 659×   778×   778×       778×         778× 778× 98807× 98807×         98807× 98807× 98807× 98807× 98807× 98807×   98807× 42354× 42354× 8057×       34297×         42354×   98807× 98807× 98807×   98807× 176× 176× 168× 168×   168× 168×       98807×   98807×             98807× 98807×   98807× 98807× 98631×   98631×   98631× 98631× 98455×   98631× 98455×       176× 176× 176×   98807× 98807× 778×     778×     98029× 98030× 98030× 98028× 98028×             98807× 98807×   98599× 79973× 79973× 6206997×       18626×   98599× 98599× 98582× 98582×   98599×   29× 72× 29×     43×     29× 29×   29×   29×   12×                 16× 16×     16× 16× 16×       159× 159× 159× 159×   98807× 98788×   98807× 778×     98807× 98807×   778× 778× 98807×             98794×   98794× 98794× 98794× 98771× 98771×     98794×   98794× 10106× 10106× 10106×     88688×   98794× 31×   98794× 98794× 7070×     98794×   778× 778× 778× 16×     778× 98× 98× 98× 102× 102×     102× 102× 102× 102× 102× 97× 3742×   97×     98× 98× 102×     778× 119×   778×     778× 778× 156× 156× 8635×   156×   778× 35×   778× 778× 1083× 1076×       778× 256×     778× 778×   8635×   18626× 18626× 18626× 119904× 119904× 119904× 8032884×     18626×   3742×     3742× 3742×   3742×   98807× 98807× 102×   98705× 98705× 98705× 53976×   44729×   98856× 98856× 98856× 98856× 98856×   80022× 80022× 79973× 79973× 79973× 79973×   80022×   18626× 18626× 119991× 119997× 119997× 119904×       18626× 18626× 18626× 18626× 18626×   29×     29× 72× 72× 72× 72× 72×       29× 29× 29× 29×       12× 12× 12× 12× 12×           16×       16× 16× 16× 16× 16×     16×                 159×     159×     106× 14×       92× 92× 92× 92×     1935× 1935× 1935× 1935× 1935× 1935× 1935× 1935× 1935× 1554× 1554× 1554× 1554× 1554×           381×   1935× 1554×       381×   1935× 1900×       35×   1935×   961× 961× 961× 675×   675× 675× 675× 675× 21×     654×   675× 675× 675× 675× 675× 1172× 1172×     720×   720× 720×                 286× 285× 170× 170×       113× 102×   102×           759× 759× 98438× 98438× 98438× 98438×   79892× 79892×   18531× 119169×   18531×   12×       10× 27×   10×               200019× 200019× 200019× 200019× 14250819× 14250819× 14250819×   14239881× 14239881× 763×     14239118× 14239118× 14239118× 14239118×   14239881×             200019×   199105× 199105× 199061× 14170833× 754×     14170079× 14170079× 14170079× 14170079×         44×     39× 39× 39× 39×       192× 192× 192× 192× 192× 192× 192× 192× 192× 144× 144×     192× 192×         192× 192×   192× 192× 192× 192× 192× 192× 192× 192× 1072× 3388× 3388× 3388× 1654× 1611× 1611× 286×   1611× 1611× 1611× 1611× 144×     1467× 1467×     1611×         192×         192× 192× 312× 312× 206×   106× 32× 32× 32× 32× 32×           32×       192×   183×     183× 183× 183× 183× 183×       174×   183× 183× 183×   183× 183×   183× 183× 172× 172×     11× 11× 11× 11×     11× 11×           183× 1578× 1578× 1578× 1578×                                                             1578× 1578× 1578× 1578× 1578× 1578× 1577× 1577× 1577× 1577× 1577× 1577× 1577× 1577× 1577×     1577× 11×     182×                                                     183×     183× 183× 183× 183× 183× 183× 183× 183× 183× 183× 183× 183× 183×     180× 180×   183×                 183×           183× 183× 183× 183×                                        
define(["require", "exports", "@syncfusion/ej2-base", "../model/theme", "../utils/helper", "../utils/helper", "../utils/helper", "../utils/helper", "../model/base", "./bing-map", "./color-mapping", "../index"], function (require, exports, ej2_base_1, theme_1, helper_1, helper_2, helper_3, helper_4, base_1, bing_map_1, color_mapping_1, index_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var LayerPanel = (function () {
        function LayerPanel(map) {
            this.isMapCoordinates = true;
            this.horizontalPan = false;
            this.horizontalPanXCount = 0;
            this.mapObject = map;
            this.ajaxModule = new ej2_base_1.Fetch();
            this.ajaxResponse = [];
        }
        LayerPanel.prototype.measureLayerPanel = function () {
            var _this = this;
            var layerCollection = this.mapObject.layersCollection;
            var areaRect = this.mapObject.mapAreaRect;
            var secondaryEle = helper_2.getElementByID(this.mapObject.element.id + '_Secondary_Element');
            if (this.mapObject.isTileMap && secondaryEle) {
                this.tileSvgObject = this.mapObject.renderer.createSvg({
                    id: this.mapObject.element.id + '_Tile_SVG', width: areaRect.width,
                    height: areaRect.height
                });
                var parentElement = ej2_base_1.createElement('div', {
                    id: this.mapObject.element.id + '_Tile_SVG_Parent'
                });
                parentElement.style.cssText = 'position: absolute; height: ' + (areaRect.height) + 'px; width: ' +
                    (areaRect.width) + 'px;';
                parentElement.appendChild(this.tileSvgObject);
                secondaryEle.appendChild(parentElement);
            }
            this.layerGroup = (this.mapObject.renderer.createGroup({
                id: this.mapObject.element.id + '_Layer_Collections',
                'clip-path': 'url(#' + this.mapObject.element.id + '_MapArea_ClipRect)'
            }));
            this.clipRectElement = this.mapObject.renderer.drawClipPath(new helper_3.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
            }));
            this.layerGroup.appendChild(this.clipRectElement);
            this.mapObject.baseMapBounds = null;
            this.mapObject.baseMapRectBounds = null;
            this.mapObject.baseSize = null;
            Array.prototype.forEach.call(layerCollection, function (layer, index) {
                _this.currentLayer = layer;
                _this.processLayers(layer, index);
            });
            if (!ej2_base_1.isNullOrUndefined(this.mapObject.legendModule) && this.mapObject.legendSettings.position === 'Float') {
                if (this.mapObject.isTileMap) {
                    this.layerGroup.appendChild(this.mapObject.legendModule.legendGroup);
                }
                else {
                    this.mapObject.svgObject.appendChild(this.mapObject.legendModule.legendGroup);
                }
            }
        };
        LayerPanel.prototype.renderTileLayer = function (panel, layer, layerIndex, bing) {
            panel.currentFactor = panel.calculateFactor(layer);
            panel.mapObject.defaultState = ((panel.mapObject.zoomSettings.zoomFactor !== 1) &&
                (!ej2_base_1.isNullOrUndefined(panel.mapObject.tileZoomLevel) && panel.mapObject.tileZoomLevel !== 1)) ?
                false : true;
            if (ej2_base_1.isNullOrUndefined(panel.mapObject.previousCenterLatitude) &&
                ej2_base_1.isNullOrUndefined(panel.mapObject.previousCenterLongitude) && !panel.mapObject.isZoomByPosition) {
                panel.mapObject.previousCenterLatitude = panel.mapObject.centerPosition.latitude;
                panel.mapObject.previousCenterLongitude = panel.mapObject.centerPosition.longitude;
            }
            else if ((panel.mapObject.previousCenterLatitude !==
                panel.mapObject.centerPosition.latitude && panel.mapObject.previousCenterLongitude !==
                panel.mapObject.centerPosition.longitude) || panel.mapObject.isZoomByPosition) {
                panel.mapObject.centerPositionChanged = true;
                panel.mapObject.previousCenterLatitude = panel.mapObject.centerPosition.latitude;
                panel.mapObject.previousCenterLongitude = panel.mapObject.centerPosition.longitude;
            }
            else {
                panel.mapObject.centerPositionChanged = false;
            }
            var center = new helper_1.Point(panel.mapObject.centerPosition.longitude, panel.mapObject.centerPosition.latitude);
            var centerTileMap = center;
            if ((this.mapObject.isTileMap && panel.mapObject.markerModule) && panel.mapObject.zoomSettings.enable) {
                panel.mapObject.markerModule.calculateZoomCenterPositionAndFactor(this.mapObject.layersCollection);
                if (!ej2_base_1.isNullOrUndefined(this.mapObject.markerCenterLatitude) && !ej2_base_1.isNullOrUndefined(this.mapObject.markerCenterLongitude)
                    && !panel.mapObject.isZoomByPosition) {
                    centerTileMap = new helper_1.Point(panel.mapObject.markerCenterLongitude, panel.mapObject.markerCenterLatitude);
                }
            }
            if (!panel.mapObject.zoomSettings.shouldZoomInitially && panel.mapObject.centerPosition.longitude
                && panel.mapObject.centerPosition.latitude && !panel.mapObject.zoomPersistence && panel.mapObject.defaultState) {
                center = new helper_1.Point(panel.mapObject.centerPosition.longitude, panel.mapObject.centerPosition.latitude);
            }
            else if (panel.mapObject.zoomSettings.shouldZoomInitially
                && panel.mapObject.markerZoomedState && !panel.mapObject.zoomPersistence
                && !ej2_base_1.isNullOrUndefined(panel.mapObject.markerZoomCenterPoint)) {
                center = new helper_1.Point(panel.mapObject.markerZoomCenterPoint.longitude, panel.mapObject.markerZoomCenterPoint.latitude);
            }
            else {
                center = { x: null, y: null };
            }
            var zoomFactorValue = (panel.mapObject.zoomSettings.shouldZoomInitially && !panel.mapObject.isZoomByPosition) ?
                ej2_base_1.isNullOrUndefined(panel.mapObject.markerZoomFactor) ? 1 :
                    panel.mapObject.markerZoomFactor : panel.mapObject.zoomSettings.zoomFactor;
            zoomFactorValue = (panel.mapObject.enablePersistence) ? ((ej2_base_1.isNullOrUndefined(panel.mapObject.mapScaleValue))
                ? (ej2_base_1.isNullOrUndefined(panel.mapObject.markerZoomFactor) ? panel.mapObject.zoomSettings.zoomFactor :
                    panel.mapObject.markerZoomFactor) : panel.mapObject.mapScaleValue) : zoomFactorValue;
            zoomFactorValue = panel.mapObject.zoomSettings.enable ? zoomFactorValue : panel.mapObject.zoomSettings.zoomFactor;
            zoomFactorValue = zoomFactorValue > 0 ? zoomFactorValue : 1;
            panel.mapObject.defaultState = zoomFactorValue !== 1 ? false : true;
            if (!panel.mapObject.markerZoomedState && panel.mapObject.zoomSettings.shouldZoomInitially &&
                panel.mapObject.zoomSettings.zoomFactor === 1) {
                panel.mapObject.defaultState = true;
            }
            if (ej2_base_1.isNullOrUndefined(panel.mapObject.tileZoomLevel)) {
                panel.mapObject.tileZoomLevel = zoomFactorValue;
                panel.mapObject.previousZoomFactor = zoomFactorValue;
            }
            else Iif (this.mapObject.isReset && panel.mapObject.tileZoomLevel === 1 && !panel.mapObject.zoomSettings.shouldZoomInitially) {
                var zoomLevel = panel.mapObject.tileZoomLevel;
                panel.mapObject.tileZoomLevel = zoomLevel;
            }
            else if (panel.mapObject.zoomSettings.zoomFactor !== 1 || panel.mapObject.zoomSettings.shouldZoomInitially) {
                panel.mapObject.previousZoomFactor = panel.mapObject.tileZoomLevel;
                panel.mapObject.tileZoomLevel = panel.mapObject.defaultState && panel.mapObject.zoomSettings.enable ?
                    panel.mapObject.tileZoomLevel : !panel.mapObject.zoomSettings.shouldZoomInitially
                    && !panel.mapObject.centerPositionChanged ?
                    panel.mapObject.previousZoomFactor !== panel.mapObject.zoomSettings.zoomFactor ?
                        panel.mapObject.zoomSettings.zoomFactor : panel.mapObject.tileZoomLevel : zoomFactorValue;
                panel.mapObject.tileZoomLevel = zoomFactorValue === 1 && panel.mapObject.zoomSettings.zoomFactor === 0 ?
                    zoomFactorValue : panel.mapObject.tileZoomLevel;
                Iif (!ej2_base_1.isNullOrUndefined(panel.mapObject.tileTranslatePoint) &&
                    (panel.mapObject.markerZoomFactor !== panel.mapObject.mapScaleValue
                        || (ej2_base_1.isNullOrUndefined(panel.mapObject.markerZoomFactor)
                            && ej2_base_1.isNullOrUndefined(panel.mapObject.mapScaleValue)))
                    && (panel.mapObject.zoomSettings.zoomFactor <= 1 || panel.mapObject.previousZoomFactor !==
                        panel.mapObject.zoomSettings.zoomFactor)) {
                    panel.mapObject.tileTranslatePoint.x = 0;
                    panel.mapObject.tileTranslatePoint.y = 0;
                }
            }
            else Eif (panel.mapObject.defaultState) {
                panel.mapObject.previousZoomFactor = panel.mapObject.tileZoomLevel;
                panel.mapObject.tileZoomLevel = zoomFactorValue;
                if (!ej2_base_1.isNullOrUndefined(panel.mapObject.tileTranslatePoint)) {
                    panel.mapObject.tileTranslatePoint.x = 0;
                    panel.mapObject.tileTranslatePoint.y = 0;
                }
            }
            Iif (zoomFactorValue <= 1 && !ej2_base_1.isNullOrUndefined(panel.mapObject.height) && !panel.mapObject.zoomSettings.shouldZoomInitially
                && (panel.mapObject.tileZoomLevel === panel.mapObject.tileZoomScale) && this.mapObject.initialCheck) {
                helper_4.fixInitialScaleForTile(this.mapObject);
            }
            if (!ej2_base_1.isNullOrUndefined(panel.mapObject.centerLatOfGivenLocation) && !ej2_base_1.isNullOrUndefined(panel.mapObject.centerLongOfGivenLocation) &&
                panel.mapObject.zoomNotApplied) {
                Eif (!ej2_base_1.isNullOrUndefined(centerTileMap)) {
                    centerTileMap.y = panel.mapObject.centerLatOfGivenLocation;
                    centerTileMap.x = panel.mapObject.centerLongOfGivenLocation;
                }
                panel.mapObject.tileZoomLevel = panel.mapObject.mapScaleValue = panel.mapObject.scaleOfGivenLocation;
            }
            panel.mapObject.tileTranslatePoint = panel.panTileMap(panel.mapObject.availableSize.width, panel.mapObject.availableSize.height, centerTileMap);
            if (this.mapObject.zoomSettings.resetToInitial && this.mapObject.initialCheck && !ej2_base_1.isNullOrUndefined(panel.mapObject.height)
                && this.mapObject.availableSize.height > 512) {
                this.mapObject.applyZoomReset = true;
                this.mapObject.initialZoomLevel = Math.floor(this.mapObject.availableSize.height / 512);
                var padding = 20;
                var totalSize = Math.pow(2, this.mapObject.initialZoomLevel) * 256;
                Iif (!ej2_base_1.isNullOrUndefined(this.mapObject.initialTileTranslate)) {
                    this.mapObject.initialTileTranslate.x = (this.mapObject.availableSize.width / 2) - (totalSize / 2);
                    this.mapObject.initialTileTranslate.y = (this.mapObject.availableSize.height / 2) - (totalSize / 2) + padding;
                }
            }
            panel.generateTiles(panel.mapObject.tileZoomLevel, panel.mapObject.tileTranslatePoint, null, bing);
            if (!ej2_base_1.isNullOrUndefined(panel.mapObject.previousZoomFactor)
                && panel.mapObject.previousZoomFactor !== panel.mapObject.zoomSettings.zoomFactor) {
                panel.mapObject.previousZoomFactor = panel.mapObject.zoomSettings.zoomFactor;
            }
            if (panel.mapObject.polygonModule) {
                var polygonElement = panel.mapObject.polygonModule.polygonRender(this.mapObject, layerIndex, panel.mapObject.tileZoomLevel);
                Eif (!ej2_base_1.isNullOrUndefined(polygonElement)) {
                    panel.layerObject.appendChild(polygonElement);
                }
            }
            if (panel.mapObject.navigationLineModule) {
                var navigationLineElement = panel.mapObject.navigationLineModule.renderNavigation(panel.currentLayer, panel.mapObject.tileZoomLevel, layerIndex);
                if (!ej2_base_1.isNullOrUndefined(navigationLineElement)) {
                    panel.layerObject.appendChild(navigationLineElement);
                }
            }
            if (panel.mapObject.markerModule) {
                panel.mapObject.markerModule.markerRender(this.mapObject, panel.layerObject, layerIndex, panel.mapObject.tileZoomLevel, null);
            }
            panel.translateLayerElements(panel.layerObject);
            panel.layerGroup.appendChild(panel.layerObject);
        };
        LayerPanel.prototype.processLayers = function (layer, layerIndex) {
            var _this = this;
            this.layerObject = (this.mapObject.renderer.createGroup({
                id: this.mapObject.element.id + '_LayerIndex_' + layerIndex
            }));
            if (!this.mapObject.enablePersistence) {
                var itemName = this.mapObject.getModuleName() + this.mapObject.element.id;
                Eif (navigator.userAgent.indexOf('Edge') === -1) {
                    var data = void 0;
                    try {
                        data = window.localStorage;
                    }
                    catch (e) {
                        data = null;
                    }
                    if (!ej2_base_1.isNullOrUndefined(data) && window.localStorage.getItem(itemName)) {
                        window.localStorage.removeItem(itemName);
                    }
                }
            }
            var eventArgs = {
                cancel: false, name: index_1.layerRendering, index: layerIndex,
                layer: layer, maps: this.mapObject, visible: layer.visible
            };
            this.mapObject.trigger('layerRendering', eventArgs, function (observedArgs) {
                if (!eventArgs.cancel && eventArgs.visible) {
                    if ((ej2_base_1.isNullOrUndefined(layer.shapeData) && !ej2_base_1.isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '')) {
                        if (!ej2_base_1.isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate.indexOf('quadkey') > -1) {
                            var bing = new bing_map_1.BingMap(_this.mapObject);
                            _this.bingMapCalculation(layer, layerIndex, _this, bing);
                        }
                        else {
                            _this.renderTileLayer(_this, layer, layerIndex);
                        }
                    }
                    else {
                        if (!ej2_base_1.isNullOrUndefined(layer.shapeData) && (!ej2_base_1.isNullOrUndefined(layer.shapeData['geometries']) ||
                            !ej2_base_1.isNullOrUndefined(layer.shapeData['features']))) {
                            var featureData = (!ej2_base_1.isNullOrUndefined(layer.shapeData['geometries']) &&
                                layer.shapeData['geometries'].length > 0 ? layer.shapeData['geometries'] :
                                layer.shapeData['features']);
                            layer.layerData = [];
                            var bbox = layer.shapeData['bbox'];
                            if (!ej2_base_1.isNullOrUndefined(bbox) && layer.isBaseLayer) {
                                _this.mapObject.baseMapBounds = new helper_1.GeoLocation({ min: bbox[0][1], max: bbox[1][1] }, { min: bbox[0][0], max: bbox[1][0] });
                            }
                            else if (ej2_base_1.isNullOrUndefined(_this.mapObject.baseMapBounds) && !helper_1.isCustomPath(featureData)) {
                                _this.calculateRectBounds(featureData);
                            }
                            _this.calculatePathCollection(layerIndex, featureData);
                        }
                    }
                }
            });
            if (!this.mapObject.isTileMap) {
                this.mapObject.svgObject.appendChild(this.layerGroup);
            }
            else Eif (this.tileSvgObject) {
                this.tileSvgObject.appendChild(this.layerGroup);
                this.mapObject.baseMapBounds = null;
            }
        };
        LayerPanel.prototype.bingMapCalculation = function (layer, layerIndex, proxy, bing) {
            bing.imageUrl = layer.urlTemplate;
            bing.subDomains = ['t0', 't1', 't2', 't3'];
            bing.maxZoom = '21';
            proxy.mapObject.bingMap = bing;
            proxy.renderTileLayer(proxy, layer, layerIndex, bing);
            this.mapObject.arrangeTemplate();
            if (this.mapObject.zoomModule && (this.mapObject.previousScale !== this.mapObject.scale)) {
                this.mapObject.zoomModule.applyTransform(this.mapObject, true);
            }
        };
        LayerPanel.prototype.bubbleCalculation = function (bubbleSettings, range) {
            if (bubbleSettings.dataSource != null && bubbleSettings != null) {
                var bubbleDataSource = bubbleSettings.dataSource;
                for (var i = 0; i < bubbleDataSource.length; i++) {
                    var bubbledata = (!ej2_base_1.isNullOrUndefined(bubbleSettings.valuePath)) ? ((bubbleSettings.valuePath.indexOf('.') > -1) ?
                        Number(helper_2.getValueFromObject(bubbleSettings.dataSource[i], bubbleSettings.valuePath)) :
                        parseFloat(bubbleSettings.dataSource[i][bubbleSettings.valuePath])) :
                        parseFloat(bubbleSettings.dataSource[i][bubbleSettings.valuePath]);
                    if (!isNaN(bubbledata)) {
                        if (i !== 0) {
                            if (bubbledata > range.max) {
                                range.max = bubbledata;
                            }
                            else if (bubbledata < range.min) {
                                range.min = bubbledata;
                            }
                        }
                        else {
                            range.max = range.min = bubbledata;
                        }
                    }
                }
            }
        };
        LayerPanel.prototype.calculatePathCollection = function (layerIndex, renderData) {
            var _this = this;
            this.groupElements = [];
            if ((!helper_1.isCustomPath(renderData))) {
                this.currentFactor = this.calculateFactor(this.currentLayer);
            }
            this.rectBounds = null;
            var shapeSettings = this.currentLayer.shapeSettings;
            Array.prototype.forEach.call(renderData, function (geometryData) {
                Eif (!ej2_base_1.isNullOrUndefined(geometryData['geometry']) || !ej2_base_1.isNullOrUndefined(geometryData['coordinates'])) {
                    var type = !ej2_base_1.isNullOrUndefined(geometryData['geometry']) ? geometryData['geometry']['type'] : geometryData['type'];
                    var coords = !ej2_base_1.isNullOrUndefined(geometryData['geometry']) ? geometryData['geometry']['coordinates'] :
                        geometryData['coordinates'];
                    var data = geometryData['geometry'];
                    var properties = geometryData['properties'];
                    _this.generatePoints(type, coords, data, properties);
                }
            });
            this.currentLayer.rectBounds = this.rectBounds;
            if (ej2_base_1.isNullOrUndefined(this.mapObject.baseMapRectBounds) && this.currentLayer.isBaseLayer) {
                this.mapObject.baseMapRectBounds = this.rectBounds;
            }
            var colors = (!ej2_base_1.isNullOrUndefined(shapeSettings.palette) && shapeSettings.palette.length > 1) ?
                shapeSettings.palette : theme_1.getShapeColor(this.mapObject.theme);
            var labelTemplateEle = ej2_base_1.createElement('div', {
                id: this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_Label_Template_Group',
                className: this.mapObject.element.id + '_template'
            });
            labelTemplateEle.style.cssText = 'pointer-events: none; overflow: hidden; position: absolute;' +
                'top:' + this.mapObject.mapAreaRect.y + 'px;' +
                'left:' + this.mapObject.mapAreaRect.x + 'px;' +
                'height:' + this.mapObject.mapAreaRect.height + 'px;' +
                'width:' + this.mapObject.mapAreaRect.width + 'px;';
            Eif (this.currentLayer.layerData.length !== 0) {
                var _loop_1 = function (i) {
                    var k = void 0;
                    var borderValue = {
                        color: shapeSettings.border.color || this_1.mapObject.themeStyle.shapeBorderColor,
                        width: shapeSettings.border.width,
                        opacity: shapeSettings.border.opacity
                    };
                    var currentShapeData = this_1.currentLayer.layerData[i];
                    var pathOptions;
                    var circleOptions;
                    var groupElement;
                    var path = '';
                    var fill = (shapeSettings.autofill) ? colors[i % colors.length] :
                        (shapeSettings.fill || this_1.mapObject.themeStyle.shapeFill);
                    if (shapeSettings.colorValuePath !== null && !ej2_base_1.isNullOrUndefined(currentShapeData['property'])) {
                        k = helper_3.checkShapeDataFields(this_1.currentLayer.dataSource, currentShapeData['property'], this_1.currentLayer.shapeDataPath, this_1.currentLayer.shapePropertyPath, this_1.currentLayer);
                        if (k !== null && shapeSettings.colorMapping.length === 0) {
                            fill = ((this_1.currentLayer.shapeSettings.colorValuePath.indexOf('.') > -1) ?
                                (helper_2.getValueFromObject(this_1.currentLayer.dataSource[k], shapeSettings.colorValuePath)) :
                                this_1.currentLayer.dataSource[k][shapeSettings.colorValuePath]);
                        }
                        else if (currentShapeData['property'][shapeSettings.colorValuePath] &&
                            this_1.currentLayer.dataSource.length === 0 && shapeSettings.colorMapping.length === 0) {
                            fill = ((this_1.currentLayer.shapeSettings.colorValuePath.indexOf('.') > -1) ?
                                (helper_2.getValueFromObject(currentShapeData['property'], shapeSettings.colorValuePath)) :
                                currentShapeData['property'][shapeSettings.colorValuePath]);
                        }
                        fill = !ej2_base_1.isNullOrUndefined(fill) ? fill : (shapeSettings.fill || this_1.mapObject.themeStyle.shapeFill);
                    }
                    var shapeID = this_1.mapObject.element.id + '_LayerIndex_' + layerIndex + '_shapeIndex_' + i + '_dataIndex_' + k;
                    var getShapeColor_1 = this_1.getShapeColorMapping(this_1.currentLayer, currentShapeData['property'], fill);
                    fill = Object.prototype.toString.call(getShapeColor_1) === '[object Object]' && !ej2_base_1.isNullOrUndefined(getShapeColor_1['fill'])
                        ? getShapeColor_1['fill'] : fill;
                    if (this_1.currentLayer.shapeSettings.borderColorValuePath || this_1.currentLayer.shapeSettings.borderWidthValuePath) {
                        k = helper_3.checkShapeDataFields(this_1.currentLayer.dataSource, currentShapeData['property'], this_1.currentLayer.shapeDataPath, this_1.currentLayer.shapePropertyPath, this_1.currentLayer);
                        if (k !== null) {
                            Eif (this_1.currentLayer.dataSource[k][shapeSettings.borderColorValuePath]) {
                                borderValue.color = this_1.currentLayer.dataSource[k][shapeSettings.borderColorValuePath];
                            }
                            Eif (this_1.currentLayer.dataSource[k][shapeSettings.borderWidthValuePath]) {
                                borderValue.width = this_1.currentLayer.dataSource[k][shapeSettings.borderWidthValuePath];
                            }
                        }
                    }
                    var opacity = (Object.prototype.toString.call(getShapeColor_1) === '[object Object]'
                        && !ej2_base_1.isNullOrUndefined(getShapeColor_1['opacity'])) ? getShapeColor_1['opacity'] : shapeSettings.opacity;
                    var eventArgs = {
                        cancel: false, name: index_1.shapeRendering, index: i,
                        data: this_1.currentLayer.dataSource ? this_1.currentLayer.dataSource[k] : null,
                        maps: this_1.mapObject,
                        shape: shapeSettings, fill: fill,
                        border: { width: borderValue.width, color: borderValue.color, opacity: borderValue.opacity }
                    };
                    var shapeRenderingSuccess = function (eventArgs) {
                        var drawingType = !ej2_base_1.isNullOrUndefined(currentShapeData['_isMultiPolygon'])
                            ? 'MultiPolygon' : ej2_base_1.isNullOrUndefined(currentShapeData['type']) ? currentShapeData[0]['type'] : currentShapeData['type'];
                        drawingType = (drawingType === 'Polygon' || drawingType === 'MultiPolygon') ? 'Polygon' : drawingType;
                        if (!eventArgs.cancel) {
                            eventArgs.fill = eventArgs.fill === '#A6A6A6' ? eventArgs.shape.fill ||
                                _this.mapObject.themeStyle.shapeFill : eventArgs.fill;
                            eventArgs.border.color = eventArgs.border.color === 'transparent' ?
                                eventArgs.shape.border.color : eventArgs.border.color;
                            eventArgs.border.width = eventArgs.border.width === 0 ? eventArgs.shape.border.width : eventArgs.border.width;
                            if (ej2_base_1.isNullOrUndefined(shapeSettings.borderColorValuePath)) {
                                borderValue.color = eventArgs.border.color;
                            }
                            if (ej2_base_1.isNullOrUndefined(shapeSettings.borderWidthValuePath)) {
                                borderValue.width = eventArgs.border.width;
                            }
                        }
                        else {
                            eventArgs.fill = fill;
                            eventArgs.border.color = shapeSettings.border.color || _this.mapObject.themeStyle.shapeBorderColor;
                            eventArgs.border.width = shapeSettings.border.width;
                        }
                        eventArgs.border.opacity = ej2_base_1.isNullOrUndefined(eventArgs.border.opacity) ? opacity : eventArgs.border.opacity;
                        if (_this.groupElements.length < 1) {
                            groupElement = _this.mapObject.renderer.createGroup({
                                id: _this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_' + drawingType + '_Group', transform: ''
                            });
                            _this.groupElements.push(groupElement);
                        }
                        else {
                            for (var i_1 = 0; i_1 < _this.groupElements.length; i_1++) {
                                var ele = _this.groupElements[i_1];
                                if (ele.id.indexOf(drawingType) > -1) {
                                    groupElement = ele;
                                    break;
                                }
                                else if (i_1 >= _this.groupElements.length - 1) {
                                    groupElement = _this.mapObject.renderer.createGroup({
                                        id: _this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_' + drawingType + '_Group'
                                    });
                                    _this.groupElements.push(groupElement);
                                    break;
                                }
                            }
                        }
                        var pathEle;
                        switch (drawingType) {
                            case 'Polygon':
                                if (!currentShapeData['_isMultiPolygon']) {
                                    path += 'M' + (currentShapeData[0]['point']['x']) + ' ' + (currentShapeData[0]['point']['y']);
                                    currentShapeData.map(function (shapeData) {
                                        path += ' L ' + (shapeData['point']['x']) + ' ' + (shapeData['point']['y']);
                                    });
                                }
                                else {
                                    path = _this.generateMultiPolygonPath(currentShapeData);
                                }
                                path += ' z ';
                                if (path.length > 3) {
                                    pathOptions = new helper_1.PathOption(shapeID, eventArgs.fill, eventArgs.border.width, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                                    pathEle = _this.mapObject.renderer.drawPath(pathOptions);
                                }
                                break;
                            case 'LineString':
                                currentShapeData.map(function (lineData, index) {
                                    if (index === 0) {
                                        path += 'M ' + (lineData['point']['x']) + ' ' + (lineData['point']['y']);
                                    }
                                    else {
                                        path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
                                    }
                                });
                                Eif (path.length > 3) {
                                    pathOptions = new helper_1.PathOption(shapeID, 'transparent', !ej2_base_1.isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, !ej2_base_1.isNullOrUndefined(eventArgs.fill) ? eventArgs.fill :
                                        eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                                    pathEle = _this.mapObject.renderer.drawPath(pathOptions);
                                }
                                break;
                            case 'MultiLineString':
                                currentShapeData.map(function (multilineData) {
                                    multilineData.map(function (lineData, index) {
                                        if (index === 0) {
                                            path += 'M ' + (lineData['point']['x']) + ' ' + (lineData['point']['y']);
                                        }
                                        else {
                                            path += 'L' + (lineData['point']['x']) + ' , ' + (lineData['point']['y']) + ' ';
                                        }
                                    });
                                });
                                Eif (path.length > 3) {
                                    pathOptions = new helper_1.PathOption(shapeID, 'transparent', !ej2_base_1.isNullOrUndefined(eventArgs.border.width) ? eventArgs.border.width : 1, !ej2_base_1.isNullOrUndefined(eventArgs.fill) ? eventArgs.fill :
                                        eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                                    pathEle = _this.mapObject.renderer.drawPath(pathOptions);
                                }
                                break;
                            case 'Point':
                                var pointData = currentShapeData['point'];
                                var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ?
                                    shapeSettings.circleRadius : shapeSettings.circleRadius / (_this.mapObject.isTileMap ?
                                    _this.mapObject.scale : _this.currentFactor);
                                circleOptions = new helper_3.CircleOption(shapeID, eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                                pathEle = _this.mapObject.renderer.drawCircle(circleOptions);
                                break;
                            case 'MultiPoint':
                                currentShapeData.map(function (multiPointData, index) {
                                    var pointData = multiPointData['point'];
                                    var circleRadius = (_this.mapObject.layers[layerIndex].type !== 'SubLayer') ? shapeSettings.circleRadius : shapeSettings.circleRadius / (_this.mapObject.isTileMap ? _this.mapObject.scale : _this.currentFactor);
                                    circleOptions = new helper_3.CircleOption((shapeID + '_multiLine_' + index), eventArgs.fill, eventArgs.border, opacity, pointData['x'], pointData['y'], circleRadius, shapeSettings.dashArray);
                                    pathEle = _this.mapObject.renderer.drawCircle(circleOptions);
                                    _this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData);
                                });
                                break;
                            case 'Path':
                                path = currentShapeData['point'];
                                pathOptions = new helper_1.PathOption(shapeID, eventArgs.fill, eventArgs.border.width, eventArgs.border.color, opacity, eventArgs.border.opacity, shapeSettings.dashArray, path);
                                pathEle = _this.mapObject.renderer.drawPath(pathOptions);
                                break;
                        }
                        if (!ej2_base_1.isNullOrUndefined(pathEle) && drawingType !== 'MultiPoint') {
                            _this.pathAttributeCalculate(groupElement, pathEle, drawingType, currentShapeData);
                        }
                        if (i === _this.currentLayer.layerData.length - 1) {
                            _this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
                        }
                    };
                    shapeRenderingSuccess.bind(this_1);
                    this_1.mapObject.trigger('shapeRendering', eventArgs, shapeRenderingSuccess);
                };
                var this_1 = this;
                for (var i = 0; i < this.currentLayer.layerData.length; i++) {
                    _loop_1(i);
                }
            }
            else {
                this.layerFeatures(layerIndex, colors, renderData, labelTemplateEle);
            }
        };
        LayerPanel.prototype.pathAttributeCalculate = function (groupElement, pathEle, drawingType, currentShapeData) {
            var property = (Object.prototype.toString.call(this.currentLayer.shapePropertyPath) === '[object Array]' ?
                this.currentLayer.shapePropertyPath : [this.currentLayer.shapePropertyPath]);
            var properties;
            for (var j = 0; j < property.length; j++) {
                if (!ej2_base_1.isNullOrUndefined(currentShapeData['property'])) {
                    properties = property[j];
                    break;
                }
            }
            pathEle.setAttribute('aria-label', ((!ej2_base_1.isNullOrUndefined(currentShapeData['property'])) ?
                (currentShapeData['property'][properties]) : ''));
            if (this.currentLayer.selectionSettings.enable || this.currentLayer.highlightSettings.enable) {
                pathEle.tabIndex = this.mapObject.tabIndex;
                pathEle.setAttribute('role', 'button');
                pathEle.style.cursor = this.currentLayer.highlightSettings.enable && !this.currentLayer.selectionSettings.enable ? 'default' : 'pointer';
            }
            else {
                pathEle.setAttribute('role', 'region');
            }
            if (drawingType === 'LineString' || drawingType === 'MultiLineString') {
                pathEle.style.cssText = 'outline:none';
            }
            helper_2.maintainSelection(this.mapObject.selectedElementId, this.mapObject.shapeSelectionClass, pathEle, 'ShapeselectionMapStyle');
            if (this.mapObject.legendSettings.toggleLegendSettings.enable && this.mapObject.legendSettings.type === 'Layers') {
                helper_1.maintainToggleSelection(this.mapObject.toggledElementId, pathEle, this.mapObject.legendSettings.toggleLegendSettings.applyShapeSettings ? this.currentLayer.shapeSettings
                    : this.mapObject.legendSettings.toggleLegendSettings);
            }
            groupElement.appendChild(pathEle);
        };
        LayerPanel.prototype.layerFeatures = function (layerIndex, colors, renderData, labelTemplateEle) {
            var _this = this;
            var bubbleG;
            if (this.mapObject.polygonModule) {
                this.groupElements.push(this.mapObject.polygonModule.polygonRender(this.mapObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor)
                    : this.currentFactor)));
            }
            if (this.currentLayer.bubbleSettings.length && this.mapObject.bubbleModule) {
                var length_1 = this.currentLayer.bubbleSettings.length;
                var bubble_1;
                var _loop_2 = function (j) {
                    bubble_1 = this_2.currentLayer.bubbleSettings[j];
                    bubbleG = this_2.mapObject.renderer.createGroup({
                        id: this_2.mapObject.element.id + '_LayerIndex_' + layerIndex + '_bubble_Group_' + j
                    });
                    var range = { min: 0, max: 0 };
                    this_2.bubbleCalculation(bubble_1, range);
                    var bubbleDataSource = bubble_1.dataSource;
                    this_2.mapObject.bubbleModule.bubbleCollection = [];
                    if (!ej2_base_1.isNullOrUndefined(bubbleDataSource) && bubbleDataSource.length > 0) {
                        bubbleDataSource.map(function (bubbleData, i) {
                            _this.renderBubble(_this.currentLayer, bubbleData, colors[i % colors.length], range, j, i, bubbleG, layerIndex, bubble_1);
                        });
                        this_2.groupElements.push(bubbleG);
                    }
                };
                var this_2 = this;
                for (var j = 0; j < length_1; j++) {
                    _loop_2(j);
                }
            }
            if ((this.mapObject.markerModule && !this.mapObject.isTileMap) && this.mapObject.zoomSettings.enable) {
                this.mapObject.markerModule.calculateZoomCenterPositionAndFactor(this.mapObject.layersCollection);
            }
            var group = (this.mapObject.renderer.createGroup({
                id: this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_dataLableIndex_Group'
            }));
            group.style.pointerEvents = 'none';
            if (this.mapObject.dataLabelModule && this.currentLayer.dataLabelSettings.visible) {
                var intersect_1 = [];
                Array.prototype.forEach.call(renderData, function (currentShapeData, i) {
                    _this.renderLabel(_this.currentLayer, layerIndex, currentShapeData, group, i, labelTemplateEle, intersect_1);
                });
                this.groupElements.push(group);
            }
            if (this.mapObject.navigationLineModule) {
                this.groupElements.push(this.mapObject.navigationLineModule.renderNavigation(this.currentLayer, this.currentFactor, layerIndex));
            }
            Eif (!ej2_base_1.isNullOrUndefined(this.groupElements) && !ej2_base_1.isNullOrUndefined(this.layerObject)) {
                this.groupElements.map(function (element) {
                    if (!ej2_base_1.isNullOrUndefined(element)) {
                        _this.layerObject.appendChild(element);
                    }
                });
            }
            if (this.mapObject.markerModule) {
                this.mapObject.markerModule.markerRender(this.mapObject, this.layerObject, layerIndex, (this.mapObject.isTileMap ? Math.floor(this.currentFactor) :
                    this.currentFactor), null);
            }
            this.translateLayerElements(this.layerObject);
            this.layerGroup.appendChild(this.layerObject);
        };
        LayerPanel.prototype.renderLabel = function (layer, layerIndex, shape, group, shapeIndex, labelTemplateEle, intersect) {
            this.mapObject.dataLabelModule.renderLabel(layer, layerIndex, shape, layer.layerData, group, labelTemplateEle, shapeIndex, intersect);
        };
        LayerPanel.prototype.generateMultiPolygonPath = function (currentShapeData) {
            var path = '';
            var shape;
            for (var j = 0; j < currentShapeData.length; j++) {
                path += 'M' + (currentShapeData[j][0]['point']['x']) + ' ' + (currentShapeData[j][0]['point']['y']);
                shape = currentShapeData[j];
                shape.map(function (shapeData) {
                    path += ' L ' + (shapeData['point']['x']) + ' ' + (shapeData['point']['y']);
                });
            }
            return path;
        };
        LayerPanel.prototype.renderBubble = function (layer, bubbleData, color, range, bubbleIndex, dataIndex, group, layerIndex, bubbleSettings) {
            Iif (ej2_base_1.isNullOrUndefined(this.mapObject.bubbleModule) || !bubbleSettings.visible) {
                return null;
            }
            color = bubbleSettings.fill ? bubbleSettings.fill : color;
            this.mapObject.bubbleModule.id = this.mapObject.element.id + '_LayerIndex_' + layerIndex + '_BubbleIndex_' +
                bubbleIndex + '_dataIndex_' + dataIndex;
            this.mapObject.bubbleModule.renderBubble(bubbleSettings, bubbleData, color, range, bubbleIndex, dataIndex, layerIndex, layer, group, this.mapObject.bubbleModule.id);
        };
        LayerPanel.prototype.getShapeColorMapping = function (layer, shape, color) {
            color = color ? color : layer.shapeSettings.fill;
            if (layer.shapeSettings.colorMapping.length === 0 && ej2_base_1.isNullOrUndefined(layer.dataSource)) {
                return color;
            }
            var index = helper_3.checkShapeDataFields(layer.dataSource, shape, layer.shapeDataPath, layer.shapePropertyPath, layer);
            var colorMapping = new color_mapping_1.ColorMapping(this.mapObject);
            if (ej2_base_1.isNullOrUndefined(layer.dataSource) || ej2_base_1.isNullOrUndefined(layer.dataSource[index])) {
                return color;
            }
            return colorMapping.getShapeColorMapping(layer.shapeSettings, layer.dataSource[index], color);
        };
        LayerPanel.prototype.generatePoints = function (type, coordinates, data, properties) {
            var _this = this;
            var latitude;
            var longitude;
            var newData = [];
            switch (type.toLowerCase()) {
                case 'polygon':
                    newData = this.calculatePolygonBox(coordinates[0]);
                    if (newData.length > 0) {
                        newData['property'] = properties;
                        newData['type'] = type;
                        newData['_isMultiPolygon'] = false;
                        this.currentLayer.layerData.push(newData);
                    }
                    break;
                case 'multipolygon':
                    var multiPolygonDatas = [];
                    for (var i = 0; i < coordinates.length; i++) {
                        for (var j = 0; j < coordinates[i].length; j++) {
                            newData = this.calculatePolygonBox(coordinates[i][j]);
                            if (newData.length > 0) {
                                multiPolygonDatas.push(newData);
                            }
                        }
                    }
                    multiPolygonDatas['property'] = properties;
                    multiPolygonDatas['type'] = type;
                    multiPolygonDatas['_isMultiPolygon'] = true;
                    this.currentLayer.layerData.push(multiPolygonDatas);
                    break;
                case 'linestring':
                    var lineExtraSpace_1 = !ej2_base_1.isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                        (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                            parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
                    coordinates.map(function (points) {
                        latitude = points[1];
                        longitude = points[0];
                        var point = helper_1.convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
                        _this.calculateBox(point, lineExtraSpace_1);
                        newData.push({
                            point: point, lat: latitude, lng: longitude
                        });
                    });
                    newData['property'] = properties;
                    newData['type'] = type;
                    this.currentLayer.layerData.push(newData);
                    break;
                case 'multilinestring':
                    var extraSpaces_1 = !ej2_base_1.isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                        (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                            parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1;
                    var multiLineData_1 = [];
                    coordinates.map(function (multiPoints) {
                        newData = [];
                        multiPoints.map(function (points) {
                            latitude = points[1];
                            longitude = points[0];
                            var point = helper_1.convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
                            _this.calculateBox(point, extraSpaces_1);
                            newData.push({
                                point: point, lat: latitude, lng: longitude
                            });
                        });
                        multiLineData_1.push(newData);
                    });
                    multiLineData_1['property'] = properties;
                    multiLineData_1['type'] = type;
                    this.currentLayer.layerData.push(multiLineData_1);
                    break;
                case 'point':
                    var pointExtraSpace = (!ej2_base_1.isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                        (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                            parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
                        (this.currentLayer.shapeSettings.circleRadius * 2);
                    latitude = coordinates[1];
                    longitude = coordinates[0];
                    var point = helper_1.convertGeoToPoint(latitude, longitude, this.currentFactor, this.currentLayer, this.mapObject);
                    this.calculateBox(point, pointExtraSpace);
                    this.currentLayer.layerData.push({
                        point: point, type: type, lat: latitude, lng: longitude, property: properties
                    });
                    break;
                case 'multipoint':
                    var extraSpace_1 = (!ej2_base_1.isNullOrUndefined(this.currentLayer.shapeSettings.border.width) ?
                        (typeof (this.currentLayer.shapeSettings.border.width) === 'string' ?
                            parseInt(this.currentLayer.shapeSettings.border.width, 10) : this.currentLayer.shapeSettings.border.width) : 1) +
                        (this.currentLayer.shapeSettings.circleRadius * 2);
                    newData = [];
                    coordinates.map(function (points) {
                        latitude = points[1];
                        longitude = points[0];
                        var point = helper_1.convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
                        _this.calculateBox(point, extraSpace_1);
                        newData.push({
                            point: point, lat: latitude, lng: longitude
                        });
                    });
                    newData['property'] = properties;
                    newData['type'] = type;
                    this.currentLayer.layerData.push(newData);
                    break;
                case 'path':
                    this.currentLayer.layerData.push({
                        point: data['d'], type: type, property: properties
                    });
                    break;
            }
        };
        LayerPanel.prototype.calculateBox = function (point, extraSpace) {
            if (ej2_base_1.isNullOrUndefined(this.rectBounds)) {
                this.rectBounds = { min: { x: point.x - extraSpace, y: point.y - extraSpace }, max: { x: point.x + extraSpace,
                        y: point.y + extraSpace } };
            }
            else {
                this.rectBounds['min']['x'] = Math.min(this.rectBounds['min']['x'], point.x - extraSpace);
                this.rectBounds['min']['y'] = Math.min(this.rectBounds['min']['y'], point.y - extraSpace);
                this.rectBounds['max']['x'] = Math.max(this.rectBounds['max']['x'], point.x + extraSpace);
                this.rectBounds['max']['y'] = Math.max(this.rectBounds['max']['y'], point.y + extraSpace);
            }
        };
        LayerPanel.prototype.calculateFactor = function (layer) {
            var horFactor;
            var verFactor = 1;
            var divide = 10;
            var exp = 'e+1';
            var bounds = this.mapObject.baseMapBounds;
            var mapSize = new helper_1.Size(this.mapObject.mapAreaRect.width, this.mapObject.mapAreaRect.height - 5);
            var mapHeight;
            var mapWidth;
            if (bounds) {
                var start = helper_1.convertGeoToPoint(bounds.latitude.min, bounds.longitude.min, null, layer, this.mapObject);
                var end = helper_1.convertGeoToPoint(bounds.latitude.max, bounds.longitude.max, null, layer, this.mapObject);
                mapHeight = end.y - start.y;
                mapWidth = end.x - start.x;
                Iif (mapHeight === 0 || mapWidth === 0) {
                    mapWidth = mapSize.width / 2;
                    mapHeight = mapSize.height;
                }
            }
            else {
                mapHeight = mapWidth = 500;
            }
            if (mapHeight < mapSize.height) {
                horFactor = parseFloat(Math.abs(Number(mapSize.height / Number(mapHeight.toString() + exp)) * 100).toString().split('.')[0])
                    / divide;
            }
            else {
                horFactor = mapSize.height / mapHeight;
            }
            if (mapWidth < mapSize.width) {
                verFactor = parseFloat(Math.abs(Number(mapSize.width / Number(mapWidth.toString() + exp)) * 100).toString().split('.')[0])
                    / divide;
            }
            else {
                verFactor = mapSize.width / mapWidth;
            }
            return (Math.min(verFactor, horFactor));
        };
        LayerPanel.prototype.translateLayerElements = function (layerElement) {
            var childNode;
            this.mapObject.translateType = 'layer';
            if (!ej2_base_1.isNullOrUndefined(this.mapObject.baseMapRectBounds)) {
                var duration = ej2_base_1.animationMode === 'Disable' ? 0 : (this.currentLayer.animationDuration === 0 && ej2_base_1.animationMode === 'Enable') ?
                    1000 : this.currentLayer.animationDuration;
                var animate = duration !== 0 || ej2_base_1.isNullOrUndefined(this.mapObject.zoomModule);
                this.mapObject.baseTranslatePoint = this.mapObject.zoomTranslatePoint;
                var translate = void 0;
                if (this.mapObject.zoomSettings.zoomFactor > 1 && !ej2_base_1.isNullOrUndefined(this.mapObject.zoomModule)) {
                    translate = helper_4.getZoomTranslate(this.mapObject, this.currentLayer, animate);
                }
                else {
                    translate = helper_3.getTranslate(this.mapObject, this.currentLayer, animate);
                }
                var scale = this.mapObject.previousScale = translate['scale'];
                var location_1 = this.mapObject.previousPoint = translate['location'];
                this.mapObject.baseTranslatePoint = this.mapObject.translatePoint = location_1;
                this.mapObject.baseScale = this.mapObject.scale = scale;
                for (var i = 0; i < layerElement.childElementCount; i++) {
                    childNode = layerElement.childNodes[i];
                    if (!(childNode.id.indexOf('_Markers_Group') > -1) &&
                        (!(childNode.id.indexOf('_bubble_Group') > -1)) &&
                        (!(childNode.id.indexOf('_dataLableIndex_Group') > -1))) {
                        var transform = 'scale( ' + scale + ' ) '
                            + 'translate( ' + location_1.x + ' ' + location_1.y + ' ) ';
                        childNode.setAttribute('transform', transform);
                        if (duration > 0 && !ej2_base_1.isNullOrUndefined(this.mapObject.zoomModule)) {
                            Eif (this.mapObject.zoomSettings.zoomFactor > 1) {
                                translate = helper_4.getZoomTranslate(this.mapObject, this.currentLayer);
                            }
                            else {
                                translate = helper_3.getTranslate(this.mapObject, this.currentLayer);
                            }
                            this.mapObject.scale = translate['scale'];
                            this.mapObject.zoomTranslatePoint = this.mapObject.translatePoint = translate['location'];
                        }
                    }
                }
            }
            else if (this.mapObject.isTileMap && !ej2_base_1.isNullOrUndefined(this.mapObject.scale)) {
                for (var j = 0; j < layerElement.childElementCount; j++) {
                    childNode = layerElement.childNodes[j];
                    if (!(childNode.id.indexOf('_Markers_Group') > -1) &&
                        (!(childNode.id.indexOf('_bubble_Group') > -1)) &&
                        (!(childNode.id.indexOf('_dataLableIndex_Group') > -1)) &&
                        (!(childNode.id.indexOf('_line_Group') > -1))) {
                        if (childNode.id.indexOf('_Polygons_Group') === -1) {
                            var transform = 'scale( ' + this.mapObject.scale + ' ) ' + 'translate( ' + this.mapObject.translatePoint.x
                                + ' ' + this.mapObject.translatePoint.y + ' ) ';
                            childNode.setAttribute('transform', transform);
                        }
                    }
                }
            }
        };
        LayerPanel.prototype.calculateRectBounds = function (layerData) {
            var _this = this;
            Array.prototype.forEach.call(layerData, function (obj) {
                Eif (!ej2_base_1.isNullOrUndefined(obj['geometry']) || !ej2_base_1.isNullOrUndefined(obj['coordinates'])) {
                    var type = !ej2_base_1.isNullOrUndefined(obj['geometry']) ? obj['geometry']['type'] : obj['type'];
                    var coordinates = !ej2_base_1.isNullOrUndefined(obj['geometry']) ? obj['geometry']['coordinates'] : obj['coordinates'];
                    switch (type.toLowerCase()) {
                        case 'polygon':
                            _this.calculateRectBox(coordinates[0]);
                            break;
                        case 'multipolygon':
                            coordinates.map(function (point) {
                                _this.calculateRectBox(point[0]);
                            });
                            break;
                        case 'multilinestring':
                            coordinates.map(function (multiPoint) {
                                multiPoint.map(function (point, index) {
                                    _this.calculateRectBox(point, 'multilinestring', index === 0 ? true : false);
                                });
                            });
                            break;
                        case 'linestring':
                            coordinates.map(function (point, index) {
                                _this.calculateRectBox(point, 'linestring', index === 0 ? true : false);
                            });
                            break;
                        case 'point':
                            _this.calculateRectBox(coordinates, 'point');
                            break;
                        case 'multipoint':
                            coordinates.map(function (point, index) {
                                _this.calculateRectBox(point, 'multipoint', index === 0 ? true : false);
                            });
                            break;
                    }
                }
            });
        };
        LayerPanel.prototype.calculatePolygonBox = function (coordinates) {
            var _this = this;
            var newData = [];
            var bounds = this.mapObject.baseMapBounds;
            coordinates.map(function (currentPoint) {
                var latitude = currentPoint[1];
                var longitude = currentPoint[0];
                if ((longitude >= bounds.longitude.min && longitude <= bounds.longitude.max)
                    && (latitude >= bounds.latitude.min && latitude <= bounds.latitude.max)) {
                    var point = helper_1.convertGeoToPoint(latitude, longitude, _this.currentFactor, _this.currentLayer, _this.mapObject);
                    if (ej2_base_1.isNullOrUndefined(_this.rectBounds)) {
                        _this.rectBounds = { min: { x: point.x, y: point.y }, max: { x: point.x, y: point.y } };
                    }
                    else {
                        _this.rectBounds['min']['x'] = Math.min(_this.rectBounds['min']['x'], point.x);
                        _this.rectBounds['min']['y'] = Math.min(_this.rectBounds['min']['y'], point.y);
                        _this.rectBounds['max']['x'] = Math.max(_this.rectBounds['max']['x'], point.x);
                        _this.rectBounds['max']['y'] = Math.max(_this.rectBounds['max']['y'], point.y);
                    }
                    newData.push({
                        point: point,
                        lat: latitude,
                        lng: longitude
                    });
                }
            });
            return newData;
        };
        LayerPanel.prototype.calculateRectBox = function (coordinates, type, isFirstItem) {
            var _this = this;
            if ((type !== 'linestring' && type !== 'multilinestring') && (type !== 'point' && type !== 'multipoint')) {
                Array.prototype.forEach.call(coordinates, function (currentCoords) {
                    if (ej2_base_1.isNullOrUndefined(_this.mapObject.baseMapBounds)) {
                        _this.mapObject.baseMapBounds = new helper_1.GeoLocation({ min: currentCoords[1], max: currentCoords[1] }, { min: currentCoords[0], max: currentCoords[0] });
                    }
                    else {
                        _this.mapObject.baseMapBounds.latitude.min = Math.min(_this.mapObject.baseMapBounds.latitude.min, currentCoords[1]);
                        _this.mapObject.baseMapBounds.latitude.max = Math.max(_this.mapObject.baseMapBounds.latitude.max, currentCoords[1]);
                        _this.mapObject.baseMapBounds.longitude.min = Math.min(_this.mapObject.baseMapBounds.longitude.min, currentCoords[0]);
                        _this.mapObject.baseMapBounds.longitude.max = Math.max(_this.mapObject.baseMapBounds.longitude.max, currentCoords[0]);
                    }
                });
            }
            else {
                if ((isFirstItem || type === 'point') && ej2_base_1.isNullOrUndefined(this.mapObject.baseMapBounds)) {
                    this.mapObject.baseMapBounds = new helper_1.GeoLocation({ min: coordinates[1], max: coordinates[1] }, { min: coordinates[0], max: coordinates[0] });
                }
                else {
                    this.mapObject.baseMapBounds.latitude.min = Math.min(this.mapObject.baseMapBounds.latitude.min, coordinates[1]);
                    this.mapObject.baseMapBounds.latitude.max = Math.max(this.mapObject.baseMapBounds.latitude.max, coordinates[1]);
                    this.mapObject.baseMapBounds.longitude.min = Math.min(this.mapObject.baseMapBounds.longitude.min, coordinates[0]);
                    this.mapObject.baseMapBounds.longitude.max = Math.max(this.mapObject.baseMapBounds.longitude.max, coordinates[0]);
                }
            }
        };
        LayerPanel.prototype.generateTiles = function (zoomLevel, tileTranslatePoint, zoomType, bing, position) {
            var userLang = this.mapObject.locale;
            var size = this.mapObject.availableSize;
            this.tiles = [];
            var xcount;
            var ycount;
            xcount = ycount = Math.pow(2, zoomLevel);
            var xLeft = 0;
            var xRight = 0;
            if ((tileTranslatePoint.x + (xcount * 256)) < size.width) {
                xLeft = tileTranslatePoint.x > 0 ? Math.ceil(tileTranslatePoint.x / 256) : 0;
                xRight = ((tileTranslatePoint.x + xcount * 256) < size.width) ?
                    Math.ceil((size.width - (tileTranslatePoint.x + xcount * 256)) / 256) : 0;
            }
            xcount += xLeft + xRight;
            Iif (zoomType === 'Pan') {
                xcount = (this.horizontalPanXCount >= xcount) ? this.horizontalPanXCount : xcount;
                this.horizontalPan = false;
            }
            else {
                this.horizontalPanXCount = xcount;
                this.horizontalPan = true;
            }
            var baseLayer = this.mapObject.layers[this.mapObject.baseLayerIndex];
            this.urlTemplate = baseLayer.urlTemplate;
            var endY = Math.min(ycount, ((-tileTranslatePoint.y + size.height) / 256) + 1);
            var endX = Math.min(xcount, ((-tileTranslatePoint.x + size.width + (xRight * 256)) / 256) + 1);
            var startX = (-((tileTranslatePoint.x + (xLeft * 256)) + 256) / 256);
            var startY = (-(tileTranslatePoint.y + 256) / 256);
            bing = bing || this.bing || this.mapObject.bingMap;
            for (var i = Math.round(startX); i < Math.round(endX); i++) {
                for (var j = Math.round(startY); j < Math.round(endY); j++) {
                    var x = 256 * i + tileTranslatePoint.x;
                    var y = 256 * j + tileTranslatePoint.y;
                    if (x > -256 && x <= size.width && y > -256 && y < size.height) {
                        if (j >= 0) {
                            var tileI = i;
                            if (i < 0) {
                                tileI = (tileI % ycount) + ycount;
                            }
                            var tile = new base_1.Tile(tileI % ycount, j);
                            tile.left = Math.round(x);
                            tile.top = Math.round(y);
                            if ((bing && !ej2_base_1.isNullOrUndefined(baseLayer.urlTemplate) && baseLayer.urlTemplate !== '' && baseLayer.urlTemplate.indexOf('quadkey') > -1)) {
                                tile.src = bing.getBingMap(tile, '', '', userLang, bing.imageUrl, bing.subDomains);
                            }
                            else {
                                bing = null;
                                tile.src = this.urlTemplate.replace('level', zoomLevel.toString()).replace('tileX', tile.x.toString())
                                    .replace('tileY', tile.y.toString());
                            }
                            this.tiles.push(tile);
                        }
                    }
                }
            }
            if (!ej2_base_1.isNullOrUndefined(zoomType)) {
                if (zoomType.indexOf('wheel') > 1) {
                    this.animateToZoomX = (this.mapObject.availableSize.width / 2) - position.x - 10;
                    this.animateToZoomY = -position.y;
                }
                else {
                    this.animateToZoomX = -10;
                    this.animateToZoomY = -(this.mapObject.availableSize.height / 2 + 11.5) + 10;
                }
            }
            var proxTiles = ej2_base_1.extend([], this.tiles, [], true);
            for (var _i = 0, _a = this.mapObject.layers; _i < _a.length; _i++) {
                var layer = _a[_i];
                if (!(layer.type === 'SubLayer' && layer.visible)) {
                    continue;
                }
                if (ej2_base_1.isNullOrUndefined(layer.shapeData) && !ej2_base_1.isNullOrUndefined(layer.urlTemplate) && layer.urlTemplate !== '') {
                    for (var _b = 0, proxTiles_1 = proxTiles; _b < proxTiles_1.length; _b++) {
                        var baseTile = proxTiles_1[_b];
                        var subtile = ej2_base_1.extend({}, baseTile, {}, true);
                        Eif (layer.urlTemplate.indexOf('quadkey')) {
                            bing = new bing_map_1.BingMap(this.mapObject);
                            subtile.src = bing.getBingMap(subtile, '', '', userLang, bing.imageUrl, bing.subDomains);
                        }
                        else {
                            subtile.src = layer.urlTemplate.replace('level', zoomLevel.toString()).replace('tileX', baseTile.x.toString())
                                .replace('tileY', baseTile.y.toString());
                        }
                        this.tiles.push(subtile);
                    }
                }
            }
            if (this.mapObject.previousScale !== this.mapObject.scale || this.mapObject.isReset || this.mapObject.isZoomByPosition
                || this.mapObject.zoomNotApplied) {
                this.arrangeTiles(zoomType, this.animateToZoomX, this.animateToZoomY);
            }
        };
        LayerPanel.prototype.arrangeTiles = function (type, x, y) {
            var _this = this;
            var element = document.getElementById(this.mapObject.element.id + '_tile_parent');
            var element1 = document.getElementById(this.mapObject.element.id + '_tiles');
            var timeOut;
            if (!ej2_base_1.isNullOrUndefined(type) && type !== 'Pan') {
                this.tileAnimation(type, x, y);
                timeOut = ej2_base_1.animationMode === 'Disable' ? 0 : (this.mapObject.layersCollection[0].animationDuration === 0 &&
                    ej2_base_1.animationMode === 'Enable') ? 1000 : this.mapObject.layersCollection[0].animationDuration;
            }
            else {
                timeOut = 0;
            }
            setTimeout(function () {
                Eif (element) {
                    element.style.zIndex = '1';
                }
                Eif (element1) {
                    element1.style.zIndex = '0';
                }
                var animateElement;
                if (!document.getElementById(_this.mapObject.element.id + '_animated_tiles') && element) {
                    animateElement = ej2_base_1.createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
                    element.appendChild(animateElement);
                }
                else {
                    Eif (type !== 'Pan' && element1 && element) {
                        element1.appendChild(element.children[0]);
                        Eif (!_this.mapObject.isAddLayer && !ej2_base_1.isNullOrUndefined(document.getElementById(_this.mapObject.element.id + '_animated_tiles'))) {
                            document.getElementById(_this.mapObject.element.id + '_animated_tiles').id =
                                _this.mapObject.element.id + '_animated_tiles_old';
                        }
                        animateElement = ej2_base_1.createElement('div', { id: _this.mapObject.element.id + '_animated_tiles' });
                        element.appendChild(animateElement);
                    }
                    else {
                        animateElement = element ? element.children[0] : null;
                    }
                }
                for (var id = 0; id < _this.tiles.length; id++) {
                    var tile = _this.tiles[id];
                    var imgElement = null;
                    var mapId = _this.mapObject.element.id;
                    Iif (type === 'Pan') {
                        var child = document.getElementById(mapId + '_tile_' + id);
                        var isNewTile = false;
                        if (ej2_base_1.isNullOrUndefined(child)) {
                            isNewTile = true;
                            child = ej2_base_1.createElement('div', { id: mapId + '_tile_' + id });
                            imgElement = ej2_base_1.createElement('img');
                        }
                        else {
                            child.style.removeProperty('display');
                            imgElement = child.children[0];
                        }
                        if (!isNewTile && imgElement && imgElement.src !== tile.src) {
                            imgElement.src = tile.src;
                        }
                        child.style.position = 'absolute';
                        child.style.left = tile.left + 'px';
                        child.style.top = tile.top + 'px';
                        child.style.height = tile.height + 'px';
                        child.style.width = tile.width + 'px';
                        if (isNewTile) {
                            imgElement.setAttribute('height', '256px');
                            imgElement.setAttribute('width', '256px');
                            imgElement.setAttribute('src', tile.src);
                            imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
                            imgElement.style.setProperty('user-select', 'none');
                            child.appendChild(imgElement);
                            animateElement.appendChild(child);
                        }
                    }
                    else {
                        imgElement = ej2_base_1.createElement('img');
                        imgElement.setAttribute('height', '256px');
                        imgElement.setAttribute('width', '256px');
                        imgElement.setAttribute('src', tile.src);
                        imgElement.style.setProperty('user-select', 'none');
                        imgElement.setAttribute('alt', _this.mapObject.getLocalizedLabel('ImageNotFound'));
                        var child = ej2_base_1.createElement('div', { id: mapId + '_tile_' + id });
                        child.style.position = 'absolute';
                        child.style.left = tile.left + 'px';
                        child.style.top = tile.top + 'px';
                        child.style.height = tile.height + 'px';
                        child.style.width = tile.width + 'px';
                        child.appendChild(imgElement);
                        Eif (animateElement) {
                            animateElement.appendChild(child);
                        }
                    }
                    if (id === (_this.tiles.length - 1) && document.getElementById(_this.mapObject.element.id + '_animated_tiles_old')) {
                        helper_1.removeElement(_this.mapObject.element.id + '_animated_tiles_old');
                    }
                }
                Iif (!ej2_base_1.isNullOrUndefined(_this.mapObject.currentTiles)) {
                    for (var l = _this.tiles.length; l < animateElement.childElementCount; l++) {
                        var isExistingElement = false;
                        for (var a = 0; a < _this.mapObject.currentTiles.childElementCount; a++) {
                            if (!isExistingElement &&
                                _this.mapObject.currentTiles.children[a].id === animateElement.children[l].id) {
                                isExistingElement = true;
                            }
                        }
                        if (isExistingElement) {
                            animateElement.children[l].style.display = 'none';
                        }
                        else {
                            animateElement.removeChild(animateElement.children[l]);
                        }
                    }
                }
            }, timeOut);
        };
        LayerPanel.prototype.tileAnimation = function (zoomType, translateX, translateY) {
            var tileParent = document.getElementById(this.mapObject.element.id + '_tile_parent');
            var animatedTiles = document.getElementById(this.mapObject.element.id + '_animated_tiles');
            var tileElement = document.getElementById(this.mapObject.element.id + '_tiles');
            var scaleValue = '2';
            if (zoomType.indexOf('ZoomOut') === 0 || zoomType === 'Reset') {
                tileElement.style.zIndex = '1';
                tileParent.style.zIndex = '0';
                while (tileElement.childElementCount >= 1) {
                    tileElement.removeChild(tileElement.children[0]);
                }
                translateX = 0;
                translateY = document.getElementById(this.mapObject.element.id + '_tile_parent').getClientRects()[0].height / 4;
                scaleValue = zoomType.indexOf('ZoomOut') === 0 ? '0.5' : '0.2';
            }
            Iif (!ej2_base_1.isNullOrUndefined(animatedTiles)) {
                animatedTiles.style.transition = ej2_base_1.animationMode === 'Disable' ? '0ms' : (this.mapObject.layersCollection[0].animationDuration === 0
                    && ej2_base_1.animationMode === 'Enable') ? '1000ms' : this.mapObject.layersCollection[0].animationDuration + 'ms';
                animatedTiles.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleValue + ')';
            }
        };
        LayerPanel.prototype.panTileMap = function (factorX, factorY, centerPosition) {
            Iif (this.mapObject.tileZoomLevel <= this.mapObject.tileZoomScale && this.mapObject.initialCheck) {
                this.mapObject.tileZoomLevel = this.mapObject.tileZoomScale;
            }
            var level = this.mapObject.tileZoomLevel;
            var padding = 20;
            var x;
            var y;
            var totalSize = Math.pow(2, level) * 256;
            x = (factorX / 2) - (totalSize / 2);
            y = (factorY / 2) - (totalSize / 2);
            var position = helper_3.convertTileLatLongToPoint(centerPosition, level, { x: x, y: y }, this.isMapCoordinates);
            padding = this.mapObject.zoomNotApplied ? 0 : padding;
            x -= position.x - (factorX / 2);
            y = (y - (position.y - (factorY / 2))) + padding;
            this.mapObject.scale = Math.pow(2, level - 1);
            if ((ej2_base_1.isNullOrUndefined(this.mapObject.tileTranslatePoint) || (this.mapObject.tileTranslatePoint.y === 0 &&
                this.mapObject.tileTranslatePoint.x === 0)) || (ej2_base_1.isNullOrUndefined(this.mapObject.previousTileWidth) ||
                ej2_base_1.isNullOrUndefined(this.mapObject.previousTileHeight))) {
                this.mapObject.previousTileWidth = factorX;
                this.mapObject.previousTileHeight = factorY;
            }
            if (!ej2_base_1.isNullOrUndefined(this.mapObject.tileTranslatePoint) && (ej2_base_1.isNullOrUndefined(centerPosition.x)) &&
                (this.mapObject.zoomSettings.zoomFactor === 1 ||
                    this.mapObject.zoomSettings.zoomFactor !== level || !this.mapObject.defaultState)) {
                Iif ((factorX !== this.mapObject.previousTileWidth || factorY !== this.mapObject.previousTileHeight)) {
                    var xdiff = x - ((this.mapObject.previousTileWidth / 2) - (totalSize / 2));
                    var ydiff = y - ((this.mapObject.previousTileHeight / 2) - (totalSize / 2) + padding);
                    this.mapObject.tileTranslatePoint.x = this.mapObject.tileTranslatePoint.x + xdiff;
                    this.mapObject.tileTranslatePoint.y = this.mapObject.tileTranslatePoint.y + ydiff;
                }
            }
            if (!ej2_base_1.isNullOrUndefined(this.mapObject.tileTranslatePoint) && !this.mapObject.zoomNotApplied) {
                if (this.mapObject.tileTranslatePoint.x !== 0 && this.mapObject.tileTranslatePoint.x !== x
                    && !this.mapObject.centerPositionChanged) {
                    x = this.mapObject.tileTranslatePoint.x;
                }
                if (this.mapObject.tileTranslatePoint.y !== 0 && this.mapObject.tileTranslatePoint.y !== y
                    && !this.mapObject.centerPositionChanged) {
                    y = this.mapObject.tileTranslatePoint.y;
                }
            }
            this.mapObject.translatePoint = new helper_1.Point((x - (0.01 * this.mapObject.zoomSettings.zoomFactor)) / this.mapObject.scale, (y - (0.01 * this.mapObject.zoomSettings.zoomFactor)) / this.mapObject.scale);
            this.mapObject.previousTileWidth = factorX;
            this.mapObject.previousTileHeight = factorY;
            return new helper_1.Point(x, y);
        };
        LayerPanel.prototype.destroy = function () {
            this.mapObject = null;
            this.groupElements = [];
            this.layerObject = null;
            this.currentLayer = null;
            this.rectBounds = null;
            this.tiles = [];
            this.clipRectElement = null;
            this.tileSvgObject = null;
            this.ajaxModule = null;
            this.ajaxResponse = [];
            this.layerGroup = null;
            if (!ej2_base_1.isNullOrUndefined(this.bing)) {
                this.bing.destroy();
            }
            this.bing = null;
        };
        return LayerPanel;
    }());
    exports.LayerPanel = LayerPanel;
});