all files / maps/user-interaction/ zoom.js

89.54% Statements 1292/1443
78.14% Branches 926/1185
98.36% Functions 60/61
89.51% Lines 1289/1440
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 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049   329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329× 329×   119× 119× 119× 119× 119× 119× 119× 119× 119× 119× 119× 119× 119× 119×   107× 107×   12× 12×   119× 118× 118×   117× 117× 117× 117× 117× 117× 117× 117×           114× 114× 114× 114× 114× 114× 114×   117× 117× 117× 13× 13×     104×                                               118×   119× 119×       16× 16× 16× 16× 16× 16×   184× 184× 184× 21× 21× 21×   184× 184× 163×                 21×               184× 184×   21× 21× 21× 21× 21× 21× 21× 21× 21×   21×                                                                                                                                                             186× 186× 186× 21× 21× 21×   186× 186× 165×                 21×               186×                     193× 193× 189× 189×   189×       252× 252× 252× 252× 252× 252× 252× 252× 252× 252× 252×   252× 248× 516× 516× 268× 268× 268× 268× 268× 268× 406× 406×   210×           208× 15× 15× 19× 19× 19× 19× 17×     15×     193× 193× 193× 193×     196× 106× 69×   106× 106× 106× 106× 539× 539× 539× 539× 539× 18× 18× 36×       18×       539×                         106×     106×       106×                                             90× 58× 58× 664× 664× 664× 664× 664× 5515× 5515×   664× 664× 664× 664× 664× 664× 660×       664×         32× 32× 32× 32× 32× 32× 1632× 1581× 1581× 1581× 1581× 1581× 1581× 1581× 1581× 51× 51× 51× 51× 51× 51× 51× 51× 51× 51× 51× 51×             268× 406×     516×   248× 248× 516×   248× 247× 246×         69× 69× 69× 69× 69× 69× 69×       69× 69× 69×   69× 69×       69×         69× 69×   69× 69× 92× 92× 634× 634×             634× 634× 634× 634×     634×     634×     634×     634× 634× 632×   632× 632× 632× 163× 163×   469× 469× 469×     634× 634× 634× 634×   634× 634× 634× 69× 19× 19× 19×       19×       19×         50×   69× 33× 33× 33×     634× 69× 69× 69×               270× 270× 308× 304×   304×   304×   304× 54× 54× 248×     304× 20× 3520× 3520×     304× 22× 25× 25×         5101× 5101× 5101× 5101× 5101× 5101× 5101× 5101× 5101× 5101× 5101× 5101× 5101×   5101× 5101× 5101× 5101×   5101× 5101× 5101× 3520× 3520× 3520×             3520× 3520× 3520× 3520× 3520× 3520× 3520×   3520× 3520×     1581× 1581× 1581× 1581× 1581×   1581×   306× 306× 306× 306× 306× 306× 306× 153× 153× 153×             306× 306× 102× 102× 102× 102×               306× 255× 6366× 6366×       6353× 6353×     13× 13× 13×       255×   306× 51× 1275× 1275×       1274× 1274× 1274× 1274×   1274×                               51× 51×       1581× 357×         787× 787× 787× 787× 787× 787× 787× 787×       787×       787× 787× 787× 402× 214× 214× 214×     188× 188× 188×       385× 34×                   34× 34× 34×       351× 351× 351× 351×                               13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13× 13×   13×   13× 13× 13×             13× 13× 13×             13×                                                         13× 13× 13×   53× 53× 53× 53×   53× 53× 53× 53× 53× 53× 53× 53× 53× 53× 53× 53× 53× 53× 53×   36× 36× 36× 36× 36× 36× 36×           27× 27× 27× 27×   27×   27×   36× 36× 36×     35×     17× 17× 17× 17× 17× 17× 17× 17× 17×             17×                       17×   53×   327× 327×       327× 327× 327× 327× 327×                   327× 327× 327× 327× 327× 327× 1059× 327× 327× 327× 327× 327× 327× 327× 327× 327× 327× 327× 327× 327× 327× 327× 1059× 732× 732×   1059× 1059× 1059× 1059×       1059× 1059× 1059× 1059× 1059× 1059× 1059×   39× 39× 39× 39× 39× 39× 39×   38× 32× 32×               39× 39× 39× 39× 39× 39×     327× 327× 327× 327× 327× 327×   327× 327× 327× 327× 327× 327×   39× 39× 39× 39× 39×   38×     32×   39× 39× 39× 39× 39× 39× 39×     327× 327× 327× 327× 327× 327× 327× 327×   1059×     45× 45× 45× 45× 45× 45×   31× 31×           45× 33× 33×   12×         65× 65× 65× 65× 65×             36× 36× 10×   36× 10×   26× 26×   36× 36× 36× 36× 36×             36×                 13× 13× 13× 13× 13× 13× 13× 10×         10× 10×         65×   65× 65×     58×     128× 76×   52× 52× 104× 104× 52× 52×                                             327× 327× 327× 327× 327×     327× 327× 327× 327×   327× 327× 327× 327× 327× 327× 327×   322× 322×       327×   22× 22×     304×       304×   304×   327× 327× 327× 327×     327× 327× 327×   223× 223× 23×     20×   23× 23× 23×             22× 14× 11×   14×   14×   14×                                       200× 200× 200× 200×         1115× 723× 723× 723× 723×     223× 223× 223× 223× 223×   43× 43× 43×   43× 43×   43× 43×   43× 26×   43× 29×       217× 20× 20×     209× 12× 12×     1059× 1059× 1059×   116× 116× 116× 116× 116× 116× 116× 116× 116× 116× 116×   116× 116×   116× 104× 104×       103×       12× 12× 12× 12×   12×     12×     116×                                       48× 48× 48× 48× 48× 48× 48× 48×     40× 40× 40×   48× 48×   47× 47×     48×         48× 48×       48×               13× 13× 13× 13× 13× 13× 13× 13×                                                   13× 13× 13× 13×   13× 13× 13×       33× 33× 33×     28×           176× 176× 176× 176× 176× 176× 176× 176× 176×   329×   323× 323× 323× 323× 323× 323× 323×   323× 51×   272× 272× 272× 272× 272× 272× 272×   3430×   323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323× 323×        
define(["require", "exports", "../utils/helper", "../utils/helper", "../utils/helper", "../utils/helper", "../utils/helper", "@syncfusion/ej2-base", "../index", "../model/constants", "../utils/helper"], function (require, exports, helper_1, helper_2, helper_3, helper_4, helper_5, ej2_base_1, index_1, constants_1, helper_6) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Zoom = (function () {
        function Zoom(maps) {
            this.isPanModeEnabled = false;
            this.mouseEnter = false;
            this.isTouch = false;
            this.rectZoomingStart = false;
            this.browserName = ej2_base_1.Browser.info.name;
            this.isPointer = ej2_base_1.Browser.isPointer;
            this.handled = false;
            this.isPanningInProgress = false;
            this.isPan = false;
            this.isZoomFinal = false;
            this.isZoomSelection = false;
            this.pinchFactor = 1;
            this.startTouches = [];
            this.mouseDownLatLong = { x: 0, y: 0 };
            this.mouseMoveLatLong = { x: 0, y: 0 };
            this.isSingleClick = false;
            this.maps = maps;
            this.wheelEvent = this.browserName === 'mozilla' ? (this.isPointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';
            this.cancelEvent = this.isPointer ? 'pointerleave' : 'mouseleave';
            this.selectionColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.selectionColor;
            this.fillColor = this.maps.zoomSettings.toolbarSettings.buttonSettings.color;
            this.addEventListener();
        }
        Zoom.prototype.performZooming = function (position, newZoomFactor, type) {
            var _this = this;
            var map = this.maps;
            map.previousProjection = newZoomFactor <= 1.5 ? undefined : map.projectionType;
            map.defaultState = false;
            map.initialCheck = false;
            map.markerZoomedState = map.isMarkerZoomCompleted = false;
            map.zoomPersistence = map.enablePersistence;
            var prevLevel = map.tileZoomLevel;
            var scale = map.previousScale = map.scale;
            var maxZoom = map.zoomSettings.maxZoom;
            var minZoom = map.zoomSettings.minZoom;
            newZoomFactor = maxZoom >= newZoomFactor ? newZoomFactor : maxZoom;
            var isToolbarPerform = true;
            switch (type.toLowerCase()) {
                case 'zoomin':
                    isToolbarPerform = newZoomFactor <= this.maps.zoomSettings.maxZoom;
                    break;
                case 'zoomout':
                    isToolbarPerform = newZoomFactor >= this.maps.zoomSettings.minZoom;
                    break;
            }
            if (isToolbarPerform) {
                var prevTilePoint = map.tileTranslatePoint;
                if ((!map.isTileMap) && ((type === 'ZoomIn' ? newZoomFactor >= minZoom && newZoomFactor <= maxZoom : newZoomFactor >= minZoom)
                    || map.isReset)) {
                    var availSize = map.mapAreaRect;
                    var minBounds = map.baseMapRectBounds['min'];
                    var maxBounds = map.baseMapRectBounds['max'];
                    var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
                    var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
                    var translatePointX = void 0;
                    var translatePointY = void 0;
                    if (newZoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
                        Iif (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
                            mapTotalWidth = availSize.width / 2;
                            mapTotalHeight = availSize.height;
                        }
                        newZoomFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
                        newZoomFactor = newZoomFactor > 1.05 ? 1 : newZoomFactor;
                        map.translatePoint = this.calculateInitalZoomTranslatePoint(newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
                    }
                    else {
                        var point = map.translatePoint;
                        translatePointX = point.x - (((availSize.width / scale) - (availSize.width / newZoomFactor)) / (availSize.width / position.x));
                        translatePointY = point.y - (((availSize.height / scale) - (availSize.height / newZoomFactor)) / (availSize.height / position.y));
                        var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * newZoomFactor;
                        translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
                        translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
                        map.translatePoint = new helper_1.Point(translatePointX, translatePointY);
                    }
                    map.scale = newZoomFactor;
                    map.zoomTranslatePoint = map.translatePoint;
                    if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
                        map.translatePoint = map.previousPoint;
                        map.scale = map.mapScaleValue = map.previousScale;
                    }
                    else {
                        this.applyTransform(map);
                    }
                }
                else Eif ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
                    this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
                    map.tileZoomLevel = newZoomFactor;
                    map.zoomSettings.zoomFactor = newZoomFactor;
                    map.scale = Math.pow(2, newZoomFactor - 1);
                    Iif (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && newZoomFactor <= map.initialZoomLevel) {
                        map.initialCheck = true;
                        map.zoomPersistence = false;
                        map.tileTranslatePoint.x = map.initialTileTranslate.x;
                        map.tileTranslatePoint.y = map.initialTileTranslate.y;
                        newZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
                        map.scale = Math.pow(2, newZoomFactor - 1);
                    }
                    map.mapScaleValue = isNaN(map.mapScaleValue) ? 1 : map.mapScaleValue;
                    map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
                    map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
                    Iif (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
                        map.translatePoint = map.tileTranslatePoint = new helper_1.Point(0, 0);
                        map.scale = map.previousScale;
                        map.tileZoomLevel = prevLevel;
                        map.zoomSettings.zoomFactor = map.previousScale;
                    }
                    else {
                        Eif (document.querySelector('.GroupElement')) {
                            document.querySelector('.GroupElement').style.display = 'none';
                        }
                        Iif (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                            document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
                        }
                        this.markerLineAnimation(map);
                        map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
                        var animationDuration = this.maps.layersCollection[0].animationDuration === 0 && ej2_base_1.animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                        setTimeout(function () {
                            _this.applyTransform(_this.maps);
                            Iif (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
                                document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                            }
                        }, animationDuration);
                    }
                }
                this.triggerZoomComplete(map, prevLevel, type);
            }
            this.maps.zoomNotApplied = false;
            Iif (this.maps.isDevice) {
                this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
            }
        };
        Zoom.prototype.calculateInitalZoomTranslatePoint = function (newZoomFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map) {
            mapTotalWidth *= newZoomFactor;
            mapTotalHeight *= newZoomFactor;
            var widthDiff = minBounds['x'] !== 0 && map.translateType === 'layers' ? map.availableSize.width - availSize.width : 0;
            var translatePointX = availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2))) - widthDiff;
            var translatePointY = availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)));
            return new helper_1.Point(translatePointX, translatePointY);
        };
        Zoom.prototype.triggerZoomEvent = function (prevTilePoint, prevLevel, type) {
            var map = this.maps;
            var zoomArgs;
            if (map.isTileMap) {
                map.mapScaleValue = ej2_base_1.isNullOrUndefined(map.mapScaleValue) ? 1 : map.mapScaleValue;
                map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
                map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
            }
            var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
            if (!map.isTileMap) {
                zoomArgs = {
                    cancel: false, name: 'zoom', type: type, maps: map,
                    tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
                    tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale },
                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
                };
            }
            else {
                zoomArgs = {
                    cancel: false, name: 'zoom', type: type, maps: map,
                    tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
                    tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale },
                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
                };
            }
            map.trigger('zoom', zoomArgs);
            return zoomArgs.cancel;
        };
        Zoom.prototype.getTileTranslatePosition = function (prevLevel, currentLevel, position, type) {
            var map = this.maps;
            var tileDefaultSize = 256;
            var padding = type === 'ZoomOut' ? 10 : (type === 'Reset' && currentLevel > 1) ? 0 : 10;
            var bounds = map.availableSize;
            var prevSize = Math.pow(2, prevLevel) * 256;
            var totalSize = Math.pow(2, currentLevel) * 256;
            var x = ((position.x - map.tileTranslatePoint.x) / prevSize) * 100;
            var y = ((position.y - map.tileTranslatePoint.y) / prevSize) * 100;
            map.tileTranslatePoint.x = (currentLevel === 1) ? (bounds.width / 2) - ((tileDefaultSize * 2) / 2) :
                position.x - ((x * totalSize) / 100);
            map.tileTranslatePoint.y = (currentLevel === 1) ? ((bounds.height / 2) - ((tileDefaultSize * 2) / 2) + (padding * 2)) :
                position.y - ((y * totalSize) / 100);
        };
        Zoom.prototype.performRectZooming = function () {
            this.isDragZoom = true;
            var map = this.maps;
            var size = map.availableSize;
            map.previousProjection = map.projectionType;
            var prevLevel = map.tileZoomLevel;
            var prevTilePoint = map.tileTranslatePoint;
            var zoomRect = this.zoomingRect;
            var maxZoom = map.zoomSettings.maxZoom;
            var minZoom = map.zoomSettings.minZoom;
            var isZoomCancelled;
            if (zoomRect.height > 0 && zoomRect.width > 0) {
                var x = this.zoomingRect.x + (this.zoomingRect.width / 2);
                var y = this.zoomingRect.y + (this.zoomingRect.height / 2);
                var zoomCalculationFactor = void 0;
                if (!map.isTileMap) {
                    var scale = map.previousScale = map.scale;
                    zoomCalculationFactor = scale + Math.round((((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2));
                    zoomCalculationFactor = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
                    var translatePoint = map.previousPoint = map.translatePoint;
                    Eif (zoomCalculationFactor <= maxZoom) {
                        var translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomCalculationFactor)) / (size.width / x));
                        var translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
                        map.translatePoint = new helper_1.Point(translatePointX, translatePointY);
                    }
                    map.scale = zoomCalculationFactor < this.maps.zoomSettings.maxZoom ? zoomCalculationFactor : this.maps.zoomSettings.maxZoom;
                    isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
                    if (isZoomCancelled) {
                        map.translatePoint = map.previousPoint;
                        map.scale = map.previousScale;
                    }
                    map.zoomTranslatePoint = map.translatePoint;
                }
                else {
                    zoomCalculationFactor = prevLevel + (Math.round(prevLevel + (((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2)));
                    zoomCalculationFactor = (zoomCalculationFactor >= minZoom && zoomCalculationFactor <= maxZoom) ? zoomCalculationFactor : maxZoom;
                    map.zoomSettings.zoomFactor = zoomCalculationFactor;
                    this.getTileTranslatePosition(prevLevel, zoomCalculationFactor, { x: x, y: y });
                    map.tileZoomLevel = zoomCalculationFactor;
                    map.translatePoint.x = (map.tileTranslatePoint.x - (0.5 * Math.pow(2, zoomCalculationFactor))) /
                        (Math.pow(2, zoomCalculationFactor));
                    map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, zoomCalculationFactor))) /
                        (Math.pow(2, zoomCalculationFactor));
                    map.scale = (Math.pow(2, zoomCalculationFactor));
                    isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
                    Eif (isZoomCancelled) {
                        map.translatePoint = map.tileTranslatePoint = new helper_1.Point(0, 0);
                        map.scale = map.tileZoomLevel = map.zoomSettings.zoomFactor = prevLevel;
                    }
                    else {
                        map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
                    }
                }
                if (!isZoomCancelled) {
                    map.mapScaleValue = zoomCalculationFactor;
                    this.applyTransform(map, true);
                    this.maps.zoomNotApplied = false;
                    this.zoomingRect = null;
                }
            }
            this.isZoomFinal = this.isZoomSelection && Math.round(map.scale) === this.maps.zoomSettings.maxZoom;
            this.triggerZoomComplete(map, prevLevel, '');
            this.removeToolbarOpacity(map.scale, this.maps.element.id + '_Zooming_');
        };
        Zoom.prototype.setInteraction = function (newInteraction) {
            this.lastScale = 1;
            this.interaction = newInteraction;
        };
        Zoom.prototype.updateInteraction = function () {
            if (this.fingers === 2) {
                this.setInteraction('zoom');
            }
            else {
                this.setInteraction(null);
            }
        };
        Zoom.prototype.performPinchZooming = function (e) {
            var map = this.maps;
            var prevLevel = map.tileZoomLevel;
            var zoomCalculationFactor = this.pinchFactor;
            var isZoomCancelled;
            var prevTilePoint = map.tileTranslatePoint;
            Eif (!map.isTileMap) {
                var availSize = map.mapAreaRect;
                map.isMarkerZoomCompleted = false;
                map.previousScale = map.scale;
                map.previousPoint = map.translatePoint;
                map.previousProjection = map.projectionType;
                var scale = helper_2.calculateScale(this.touchStartList, this.touchMoveList);
                var touchCenter = helper_2.getTouchCenter(helper_2.getTouches(this.touchMoveList, this.maps));
                var newScale = scale / this.lastScale;
                this.lastScale = scale;
                this.pinchFactor *= newScale;
                this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
                var minBounds = map.baseMapRectBounds['min'];
                var maxBounds = map.baseMapRectBounds['max'];
                var mapTotalHeight = Math.abs(minBounds['y'] - maxBounds['y']);
                var mapTotalWidth = Math.abs(minBounds['x'] - maxBounds['x']);
                var translatePoint = map.translatePoint;
                var translatePointX = void 0;
                var translatePointY = void 0;
                if (zoomCalculationFactor < 1.2 && map.projectionType !== 'Eckert5') {
                    Iif (mapTotalWidth === 0 || mapTotalHeight === 0 || mapTotalWidth === mapTotalHeight) {
                        mapTotalWidth = availSize.width / 2;
                        mapTotalHeight = availSize.height;
                    }
                    zoomCalculationFactor = parseFloat(Math.min(availSize.width / mapTotalWidth, availSize.height / mapTotalHeight).toFixed(2));
                    zoomCalculationFactor = zoomCalculationFactor > 1.05 ? 1 : zoomCalculationFactor;
                    map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomCalculationFactor, mapTotalWidth, mapTotalHeight, availSize, minBounds, map);
                }
                else {
                    var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomCalculationFactor;
                    translatePointX = translatePoint.x - (((availSize.width / map.scale) - (availSize.width / zoomCalculationFactor)) / (availSize.width / touchCenter.x));
                    translatePointY = translatePoint.y - (((availSize.height / map.scale) - (availSize.height / zoomCalculationFactor)) / (availSize.height / touchCenter.y));
                    translatePointX = (currentHeight < map.mapAreaRect.height) ? (availSize.x + ((-(minBounds['x'])) + ((availSize.width / 2) - (mapTotalWidth / 2)))) : translatePointX;
                    translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
                    map.translatePoint = new helper_1.Point(translatePointX, translatePointY);
                }
                map.scale = zoomCalculationFactor;
                isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
                Iif (isZoomCancelled) {
                    map.translatePoint = map.previousPoint;
                    map.scale = map.previousScale;
                }
            }
            else {
                var touchCenter = this.getTouchCenterPoint();
                var distance = Math.sqrt(Math.pow((this.touchMoveList[0].pageX - this.touchMoveList[1].pageX), 2) + Math.pow((this.touchMoveList[0].pageY - this.touchMoveList[1].pageY), 2));
                var factor = map.tileZoomLevel;
                if (!ej2_base_1.isNullOrUndefined(this.pinchDistance)) {
                    if (this.pinchDistance > distance) {
                        factor = factor - 1;
                    }
                    else if (this.pinchDistance < distance) {
                        factor = factor + 1;
                    }
                    factor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.maps.zoomSettings.minZoom, factor));
                    if (factor !== map.tileZoomLevel) {
                        this.pinchFactor = factor;
                        map.previousScale = map.scale;
                        map.tileZoomLevel = this.pinchFactor;
                        map.scale = Math.pow(2, map.tileZoomLevel - 1);
                        this.getTileTranslatePosition(prevLevel, this.pinchFactor, { x: touchCenter.x, y: touchCenter.y }, null);
                        map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.scale)) / map.scale;
                        map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.scale)) / map.scale;
                        isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
                        if (isZoomCancelled) {
                            map.translatePoint = map.tileTranslatePoint = new helper_1.Point(0, 0);
                            map.scale = map.previousScale;
                            map.tileZoomLevel = prevLevel;
                            map.zoomSettings.zoomFactor = map.previousScale;
                        }
                        else {
                            map.mapLayerPanel.generateTiles(factor, map.tileTranslatePoint);
                        }
                    }
                }
                this.pinchDistance = distance;
            }
            map.mapScaleValue = zoomCalculationFactor;
            Eif (!isZoomCancelled) {
                this.applyTransform(map);
            }
            this.triggerZoomComplete(map, prevLevel, '');
            Iif (ej2_base_1.Browser.isDevice) {
                this.removeToolbarOpacity(map.isTileMap ? Math.round(map.tileZoomLevel) : map.scale, map.element.id + '_Zooming_');
            }
        };
        Zoom.prototype.getTouchCenterPoint = function () {
            var touchList = [];
            for (var i = 0; i < this.touchMoveList.length; i++) {
                touchList.push(this.getMousePosition(this.touchMoveList[i].pageX, this.touchMoveList[i].pageY));
            }
            return {
                x: (touchList[0].x + touchList[1].x) / 2,
                y: (touchList[0].y + touchList[1].y) / 2
            };
        };
        Zoom.prototype.triggerZoomComplete = function (map, prevLevel, type) {
            Eif (map.zoomSettings.enable) {
                var zoomArgs = void 0;
                if (map.isTileMap) {
                    map.mapScaleValue = ej2_base_1.isNullOrUndefined(map.mapScaleValue) ? 1 : map.mapScaleValue;
                    map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
                    map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
                }
                var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
                if (!map.isTileMap) {
                    zoomArgs = {
                        cancel: false, name: 'zoomComplete', type: type, maps: map,
                        tileTranslatePoint: {}, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
                        tileZoomLevel: {}, scale: { previous: map.previousScale, current: map.scale },
                        minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
                        minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
                    };
                }
                else {
                    zoomArgs = {
                        cancel: false, name: 'zoomComplete', type: type, maps: map,
                        tileTranslatePoint: { previous: map.tileTranslatePoint, current: map.tileTranslatePoint }, translatePoint: { previous: map.previousPoint, current: map.translatePoint },
                        tileZoomLevel: { previous: prevLevel, current: map.tileZoomLevel }, scale: { previous: map.previousScale, current: map.scale },
                        minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
                        minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
                    };
                }
                this.maps.trigger('zoomComplete', zoomArgs);
            }
        };
        Zoom.prototype.drawZoomRectangle = function () {
            var map = this.maps;
            var down = this.mouseDownPoints;
            var move = this.mouseMovePoints;
            var border = { width: 1, color: this.maps.themeStyle.rectangleZoomBorderColor };
            var width = Math.abs(move.x - down.x);
            var height = Math.abs(move.y - down.y);
            var x = ((move.x > down.x) ? down.x : down.x - width);
            var y = ((move.y > down.y) ? down.y : down.y - height);
            Eif ((x > map.mapAreaRect.x && x < (map.mapAreaRect.x + map.mapAreaRect.width)) &&
                (y > map.mapAreaRect.y) && (y < map.mapAreaRect.y + map.mapAreaRect.height)) {
                this.zoomingRect = new helper_1.Rect(x, y, width, height);
                var rectSVGObject = map.renderer.createSvg({
                    id: map.element.id + '_Selection_Rect_Zooming',
                    width: map.availableSize.width,
                    height: map.availableSize.height,
                    style: 'position: absolute;'
                });
                var rectOption = new helper_2.RectOption(map.element.id + '_ZoomRect', this.maps.themeStyle.rectangleZoomFillColor, border, this.maps.themeStyle.rectangleZoomFillOpacity, this.zoomingRect, 0, 0, '', '3');
                rectSVGObject.appendChild(map.renderer.drawRectangle(rectOption));
                helper_1.getElementByID(map.element.id + '_Secondary_Element').appendChild(rectSVGObject);
            }
        };
        Zoom.prototype.animateTransform = function (element, animate, x, y, scale) {
            var duration = this.currentLayer.animationDuration === 0 && ej2_base_1.animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
            if (!animate || duration === 0 || this.maps.isTileMap) {
                Eif (!(this.maps.isTileMap && element.id.indexOf('_Polygons_Group') > -1)) {
                    element.setAttribute('transform', 'scale(' + (scale) + ') translate( ' + x + ' ' + y + ' )');
                }
                return;
            }
            Eif (!this.maps.isTileMap) {
                helper_3.zoomAnimate(element, 0, duration, new helper_3.MapLocation(x, y), scale, this.maps.mapAreaRect, this.maps);
            }
        };
        Zoom.prototype.applyTransform = function (maps, animate, isPanning) {
            var _this = this;
            var layerIndex;
            this.templateCount = 0;
            var markerStyle;
            var scale = maps.scale;
            var x = maps.translatePoint.x;
            var y = maps.translatePoint.y;
            var currentLabelIndex = 0;
            maps.zoomShapeCollection = [];
            this.isPanningInProgress = isPanning || false;
            if (document.getElementById(maps.element.id + '_mapsTooltip')) {
                helper_4.removeElement(maps.element.id + '_mapsTooltip');
            }
            if (this.layerCollectionEle) {
                var _loop_1 = function (i) {
                    var layerElement = this_1.layerCollectionEle.childNodes[i];
                    if (layerElement.tagName === 'g') {
                        this_1.templateCount++;
                        this_1.index = layerElement.id.indexOf('_LayerIndex_') > -1 && parseFloat(layerElement.id.split('_LayerIndex_')[1].split('_')[0]);
                        this_1.currentLayer = maps.layersCollection[this_1.index];
                        var factor_1 = maps.mapLayerPanel.calculateFactor(this_1.currentLayer);
                        var elementCount = layerElement.childElementCount;
                        var _loop_2 = function (j) {
                            var currentEle = layerElement.childNodes[j];
                            if (!(currentEle.id.indexOf('_Markers_Group') > -1) && (!(currentEle.id.indexOf('_bubble_Group') > -1))
                                && (!(currentEle.id.indexOf('_dataLableIndex_Group') > -1))) {
                                if (maps.isTileMap && (currentEle.id.indexOf('_line_Group') > -1)) {
                                    currentEle.remove();
                                    Iif (layerElement.children.length > 0 && layerElement.children[0]) {
                                        layerElement.insertBefore(maps.navigationLineModule.renderNavigation(this_1.currentLayer, maps.tileZoomLevel, this_1.index), layerElement.children[1]);
                                    }
                                    else {
                                        layerElement.appendChild(maps.navigationLineModule.renderNavigation(this_1.currentLayer, maps.tileZoomLevel, this_1.index));
                                    }
                                }
                                else if (maps.isTileMap && (currentEle.id.indexOf('_Polygons_Group') > -1)) {
                                    Eif (this_1.currentLayer.polygonSettings.polygons.length > 0) {
                                        this_1.currentLayer.polygonSettings.polygons.map(function (polygonSettings, polygonIndex) {
                                            var markerData = polygonSettings.points;
                                            var path = helper_4.calculatePolygonPath(maps, maps.tileZoomLevel, _this.currentLayer, markerData);
                                            var element = document.getElementById(maps.element.id + '_LayerIndex_' + _this.index + '_PolygonIndex_' + polygonIndex);
                                            if (!ej2_base_1.isNullOrUndefined(element)) {
                                                element.setAttribute('d', path);
                                            }
                                        });
                                        document.getElementById(maps.element.id + '_LayerIndex_' + this_1.index + '_Polygons_Group').style.visibility = '';
                                    }
                                }
                                else Eif (currentEle.id.indexOf('Legend') === -1) {
                                    index_1.changeBorderWidth(currentEle, this_1.index, scale, maps);
                                    maps.zoomTranslatePoint = maps.translatePoint;
                                    this_1.animateTransform(currentEle, animate, x, y, scale);
                                }
                            }
                            else if (currentEle.id.indexOf('_Markers_Group') > -1) {
                                if ((!this_1.isPanModeEnabled || !isPanning) && !ej2_base_1.isNullOrUndefined(currentEle.childNodes[0])) {
                                    this_1.markerTranslates(currentEle.childNodes[0], factor_1, x, y, scale, 'Marker', layerElement);
                                }
                                currentEle = layerElement.childNodes[j];
                                var markerAnimation_1;
                                Eif (!ej2_base_1.isNullOrUndefined(currentEle) && currentEle.id.indexOf('Markers') !== -1) {
                                    Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
                                        _this.markerTranslate(childNode, factor_1, x, y, scale, 'Marker', animate);
                                        var dataIndex = parseInt(childNode['id'].split('_dataIndex_')[1].split('_')[0], 10);
                                        var markerIndex = parseInt(childNode['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
                                        markerAnimation_1 = _this.currentLayer.markerSettings[markerIndex].animationDuration > 0 || ej2_base_1.animationMode === 'Enable';
                                        if (_this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length > 0) {
                                            var markerSelectionValues = _this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex];
                                            for (var x_1 = 0; x_1 < _this.currentLayer.markerSettings[markerIndex].initialMarkerSelection.length; x_1++) {
                                                if (_this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['latitude'] ===
                                                    markerSelectionValues['latitude'] ||
                                                    _this.currentLayer.markerSettings[markerIndex].initialMarkerSelection[x_1]['longitude'] ===
                                                        markerSelectionValues['longitude']) {
                                                    maps.markerSelection(_this.currentLayer.markerSettings[markerIndex].selectionSettings, maps, currentEle.children[k], _this.currentLayer.markerSettings[markerIndex].dataSource[dataIndex]);
                                                }
                                            }
                                        }
                                        Iif (((_this.currentLayer.animationDuration > 0 || ej2_base_1.animationMode === 'Enable') || ((maps.layersCollection[0].animationDuration > 0 || ej2_base_1.animationMode === 'Enable') && _this.currentLayer.type === 'SubLayer')) && !_this.isPanModeEnabled) {
                                            if (maps.isTileMap) {
                                                var groupElement = document.querySelector('.GroupElement');
                                                if (groupElement && !(document.querySelector('.ClusterGroupElement')) && markerAnimation_1) {
                                                    groupElement.style.display = 'none';
                                                }
                                            }
                                            else {
                                                markerStyle = 'visibility:hidden';
                                                currentEle.style.cssText = markerStyle;
                                            }
                                        }
                                    });
                                    Iif (this_1.isPanModeEnabled && maps.markerModule.sameMarkerData.length > 0) {
                                        helper_4.clusterSeparate(maps.markerModule.sameMarkerData, maps, currentEle, true);
                                    }
                                    else if (maps.markerModule.sameMarkerData.length > 0) {
                                        maps.markerModule.sameMarkerData = [];
                                        Iif (document.getElementById(maps.element.id + '_mapsTooltip')) {
                                            helper_4.removeElement(maps.element.id + '_mapsTooltip');
                                        }
                                    }
                                    Iif (document.getElementById(maps.element.id + '_mapsTooltip') && maps.mapsTooltipModule.tooltipTargetID.indexOf('_MarkerIndex_')
                                        && !this_1.isPanModeEnabled) {
                                        var mapsTooltip = maps.mapsTooltipModule;
                                        var tooltipElement = currentEle.querySelector('#' + mapsTooltip.tooltipTargetID);
                                        if (!ej2_base_1.isNullOrUndefined(tooltipElement)) {
                                            if (tooltipElement['style']['visibility'] === 'hidden') {
                                                helper_4.removeElement(maps.element.id + '_mapsTooltip');
                                            }
                                            else {
                                                var x_2 = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[1]);
                                                var y_1 = parseFloat(tooltipElement.getAttribute('transform').split('(')[1].split(')')[0].split(' ')[2]);
                                                if (maps.isTileMap) {
                                                    x_2 += +helper_4.getElement(maps.element.id + '_tile_parent')['style']['left'].split('px')[0];
                                                    y_1 += +helper_4.getElement(maps.element.id + '_tile_parent')['style']['top'].split('px')[0];
                                                }
                                                mapsTooltip.svgTooltip.location.x = x_2;
                                                mapsTooltip.svgTooltip.location.y = y_1;
                                                mapsTooltip.svgTooltip.enableAnimation = false;
                                            }
                                        }
                                    }
                                }
                            }
                            else if (currentEle.id.indexOf('_bubble_Group') > -1) {
                                var childElement = void 0;
                                for (var k = 0; k < currentEle.childElementCount; k++) {
                                    childElement = currentEle.childNodes[k];
                                    layerIndex = parseFloat(childElement.id.split('_LayerIndex_')[1].split('_')[0]);
                                    var bubleIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[0]);
                                    var dataIndex = parseFloat(childElement.id.split('_BubbleIndex_')[1].split('_')[2]);
                                    for (var l = 0; l < maps.bubbleModule.bubbleCollection.length; l++) {
                                        var bubbleCollection = maps.bubbleModule.bubbleCollection[l];
                                        if (bubbleCollection['LayerIndex'] === layerIndex && bubbleCollection['BubbleIndex'] === bubleIndex &&
                                            bubbleCollection['DataIndex'] === dataIndex) {
                                            var centerX = bubbleCollection['center']['x'];
                                            var centerY = bubbleCollection['center']['y'];
                                            var currentX = ((centerX + x) * scale);
                                            var currentY = ((centerY + y) * scale);
                                            var duration = this_1.currentLayer.animationDuration === 0 && ej2_base_1.animationMode === 'Enable' ? 1000 : this_1.currentLayer.animationDuration;
                                            if (!animate || duration === 0) {
                                                childElement.setAttribute('transform', 'translate( ' + currentX + ' ' + currentY + ' )');
                                            }
                                            else {
                                                helper_3.smoothTranslate(childElement, 0, duration, new helper_3.MapLocation(currentX, currentY));
                                            }
                                            break;
                                        }
                                    }
                                }
                            }
                            else Eif (currentEle.id.indexOf('_dataLableIndex_Group') > -1 && !ej2_base_1.isNullOrUndefined(maps.layers[this_1.index])) {
                                maps.zoomLabelPositions = [];
                                maps.zoomLabelPositions = maps.dataLabelModule.dataLabelCollections;
                                var labelAnimate_1 = !maps.isTileMap && animate;
                                var intersect_1 = [];
                                Array.prototype.forEach.call(currentEle.childNodes, function (childNode, k) {
                                    if (currentEle.childNodes[k]['id'].indexOf('_LabelIndex_') > -1) {
                                        var labelIndex = parseFloat(currentEle.childNodes[k]['id'].split('_LabelIndex_')[1].split('_')[0]);
                                        var zoomShapeWidth = currentEle.childNodes[k].id;
                                        maps.zoomShapeCollection.push(zoomShapeWidth);
                                        _this.dataLabelTranslate(currentEle.childNodes[k], factor_1, x, y, scale, 'DataLabel', labelAnimate_1, currentLabelIndex, isPanning, intersect_1);
                                        currentLabelIndex++;
                                        var dataLabel = maps.layers[_this.index].dataLabelSettings;
                                        var border = dataLabel.border;
                                        if (k > 0 && border['width'] > 1) {
                                            Eif (currentEle.childNodes[k - 1]['id'].indexOf('_rectIndex_') > -1 && !ej2_base_1.isNullOrUndefined(maps.zoomLabelPositions[labelIndex])) {
                                                var labelX = ((maps.zoomLabelPositions[labelIndex]['location']['x'] + x) * scale);
                                                var labelY = ((maps.zoomLabelPositions[labelIndex]['location']['y'] + y) * scale);
                                                var zoomtext = currentEle.childNodes[k]['textContent'];
                                                var style = maps.layers[_this.index].dataLabelSettings.textStyle;
                                                var zoomtextSize = helper_3.measureText(zoomtext, style);
                                                var padding = 5;
                                                var rectElement = currentEle.childNodes[k - 1];
                                                var rectX = labelX - zoomtextSize['width'] / 2;
                                                var rectY = labelY - zoomtextSize['height'] / 2 - padding;
                                                rectElement['setAttribute']('x', rectX);
                                                rectElement['setAttribute']('y', rectY);
                                            }
                                        }
                                    }
                                });
                            }
                        };
                        for (var j = 0; j < elementCount; j++) {
                            _loop_2(j);
                        }
                    }
                    maps.arrangeTemplate();
                };
                var this_1 = this;
                for (var i = 0; i < this.layerCollectionEle.childElementCount; i++) {
                    _loop_1(i);
                }
                if (!ej2_base_1.isNullOrUndefined(this.currentLayer)) {
                    if (!animate || this.currentLayer.animationDuration === 0 || maps.isTileMap) {
                        this.processTemplate(x, y, scale, maps);
                    }
                }
            }
        };
        Zoom.prototype.markerTranslates = function (element, factor, x, y, scale, type, layerElement) {
            var _this = this;
            var templateFn;
            var nullCount = 0;
            var markerCounts = 0;
            var markerTemplateCounts = 0;
            var layerIndex = parseInt((element ? element : layerElement).id.split('_LayerIndex_')[1].split('_')[0], 10);
            var markerSVGObject = this.maps.renderer.createGroup({
                id: this.maps.element.id + '_Markers_Group',
                class: 'GroupElement'
            });
            markerSVGObject.style.pointerEvents = 'auto';
            Eif (document.getElementById(markerSVGObject.id)) {
                helper_4.removeElement(markerSVGObject.id);
            }
            var mapsAreaRect = this.maps.mapAreaRect;
            var markerTemplateElements = ej2_base_1.createElement('div', {
                id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_Markers_Template_Group',
                className: 'template'
            });
            markerTemplateElements.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
                'top:' + mapsAreaRect.y + 'px;' +
                'left:' + mapsAreaRect.x + 'px;' +
                'height:' + mapsAreaRect.height + 'px;' +
                'width:' + mapsAreaRect.width + 'px;';
            Eif (document.getElementById(markerTemplateElements.id)) {
                helper_4.removeElement(markerTemplateElements.id);
            }
            var currentLayers = this.maps.layersCollection[layerIndex];
            Array.prototype.forEach.call(currentLayers.markerSettings, function (markerSettings, markerIndex) {
                var markerDatas = markerSettings.dataSource;
                Array.prototype.forEach.call(markerDatas, function (data, dataIndex) {
                    _this.maps.markerNullCount = markerIndex >= 0 && dataIndex === 0 ? 0 : _this.maps.markerNullCount;
                    var eventArgs = {
                        template: markerSettings.template, data: data, maps: _this.maps, marker: markerSettings,
                        cancel: false, name: index_1.markerRendering, fill: markerSettings.fill, colorValuePath: markerSettings.colorValuePath,
                        shapeValuePath: markerSettings.shapeValuePath, height: markerSettings.height,
                        width: markerSettings.width, imageUrl: markerSettings.imageUrl, imageUrlValuePath: markerSettings.imageUrlValuePath, shape: markerSettings.shape,
                        border: markerSettings.border
                    };
                    eventArgs = helper_5.markerShapeChoose(eventArgs, data);
                    eventArgs = helper_4.markerColorChoose(eventArgs, data);
                    _this.maps.trigger('markerRendering', eventArgs, function (MarkerArgs) {
                        Iif (markerSettings.shapeValuePath !== eventArgs.shapeValuePath) {
                            eventArgs = helper_5.markerShapeChoose(eventArgs, data);
                        }
                        Iif (markerSettings.colorValuePath !== eventArgs.colorValuePath) {
                            eventArgs = helper_4.markerColorChoose(eventArgs, data);
                        }
                        var lati = (!ej2_base_1.isNullOrUndefined(markerSettings.latitudeValuePath)) ?
                            Number(helper_6.getValueFromObject(data, markerSettings.latitudeValuePath)) : !ej2_base_1.isNullOrUndefined(data['latitude']) ?
                            parseFloat(data['latitude']) : !ej2_base_1.isNullOrUndefined(data['Latitude']) ? data['Latitude'] : null;
                        var long = (!ej2_base_1.isNullOrUndefined(markerSettings.longitudeValuePath)) ?
                            Number(helper_6.getValueFromObject(data, markerSettings.longitudeValuePath)) : !ej2_base_1.isNullOrUndefined(data['longitude']) ?
                            parseFloat(data['longitude']) : !ej2_base_1.isNullOrUndefined(data['Longitude']) ? data['Longitude'] : null;
                        var offset = markerSettings.offset;
                        if (!eventArgs.cancel && markerSettings.visible && !ej2_base_1.isNullOrUndefined(long) && !ej2_base_1.isNullOrUndefined(lati)) {
                            var markerID = _this.maps.element.id + '_LayerIndex_' + layerIndex + '_MarkerIndex_'
                                + markerIndex + '_dataIndex_' + dataIndex;
                            var location_1 = (_this.maps.isTileMap) ? helper_1.convertTileLatLongToPoint(new helper_3.MapLocation(long, lati), _this.maps.tileZoomLevel, _this.maps.tileTranslatePoint, true) : helper_1.convertGeoToPoint(lati, long, factor, currentLayers, _this.maps);
                            var transPoint = { x: x, y: y };
                            if (eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
                                markerTemplateCounts++;
                                helper_4.markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, markerTemplateElements, location_1, transPoint, scale, offset, _this.maps);
                            }
                            else Eif (!eventArgs.template && (!isNaN(location_1.x) && !isNaN(location_1.y))) {
                                markerCounts++;
                                helper_3.marker(eventArgs, markerSettings, markerDatas, dataIndex, location_1, transPoint, markerID, offset, scale, _this.maps, markerSVGObject);
                            }
                        }
                        nullCount += (!isNaN(lati) && !isNaN(long)) ? 0 : 1;
                        markerTemplateCounts += (eventArgs.cancel) ? 1 : 0;
                        markerCounts += (eventArgs.cancel) ? 1 : 0;
                        _this.maps.markerNullCount = (ej2_base_1.isNullOrUndefined(lati) || ej2_base_1.isNullOrUndefined(long))
                            ? _this.maps.markerNullCount + 1 : _this.maps.markerNullCount;
                        var markerDataLength = markerDatas.length - _this.maps.markerNullCount;
                        var isMarkersClustered = false;
                        if (markerSVGObject.childElementCount === (markerDataLength - markerTemplateCounts - nullCount) && (type !== 'Template')) {
                            if (_this.maps.isTileMap) {
                                var polygonsElement = document.getElementById(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygons_Group');
                                var polygonElement = document.getElementById(_this.maps.element.id + '_LayerIndex_' + layerIndex + '_Polygon_Group');
                                Iif (!ej2_base_1.isNullOrUndefined(polygonsElement)) {
                                    polygonsElement.insertAdjacentElement('afterend', markerSVGObject);
                                }
                                else {
                                    Iif (!ej2_base_1.isNullOrUndefined(polygonElement)) {
                                        polygonElement.insertAdjacentElement('afterend', markerSVGObject);
                                    }
                                    else {
                                        layerElement.insertBefore(markerSVGObject, layerElement.firstElementChild);
                                    }
                                }
                            }
                            else {
                                layerElement.appendChild(markerSVGObject);
                            }
                            if (currentLayers.markerClusterSettings.allowClustering) {
                                _this.maps.svgObject.appendChild(markerSVGObject);
                                _this.maps.element.appendChild(_this.maps.svgObject);
                                isMarkersClustered = helper_3.clusterTemplate(currentLayers, markerSVGObject, _this.maps, layerIndex, markerSVGObject, layerElement, true, true);
                            }
                        }
                        if (markerTemplateElements.childElementCount === (markerDataLength - markerCounts - nullCount) && helper_1.getElementByID(_this.maps.element.id + '_Secondary_Element')) {
                            helper_1.getElementByID(_this.maps.element.id + '_Secondary_Element').appendChild(markerTemplateElements);
                            Eif (scale >= 1) {
                                if (currentLayers.markerClusterSettings.allowClustering && !isMarkersClustered) {
                                    helper_3.clusterTemplate(currentLayers, markerTemplateElements, _this.maps, layerIndex, markerSVGObject, layerElement, false, true);
                                }
                            }
                        }
                    });
                });
            });
        };
        Zoom.prototype.processTemplate = function (x, y, scale, maps) {
            var currentLabelIndex = 0;
            for (var i = 0; i < this.templateCount; i++) {
                var factor = maps.mapLayerPanel.calculateFactor(this.currentLayer);
                var markerTemplateElement = helper_1.getElementByID(maps.element.id + '_LayerIndex_' +
                    i + '_Markers_Template_Group');
                var datalabelTemplateElemement = helper_1.getElementByID(maps.element.id + '_LayerIndex_'
                    + i + '_Label_Template_Group');
                var polygonElement = helper_1.getElementByID(maps.element.id + '_LayerIndex_'
                    + i + '_Polygons_Group');
                if ((!ej2_base_1.isNullOrUndefined(markerTemplateElement)) && markerTemplateElement.childElementCount > 0) {
                    markerTemplateElement.style.visibility = 'visible';
                    for (var k = 0; k < markerTemplateElement.childElementCount; k++) {
                        this.markerTranslate(markerTemplateElement.childNodes[k], factor, x, y, scale, 'Template');
                    }
                }
                if ((!ej2_base_1.isNullOrUndefined(datalabelTemplateElemement)) && datalabelTemplateElemement.childElementCount > 0) {
                    for (var k = 0; k < datalabelTemplateElemement.childElementCount; k++) {
                        this.dataLabelTranslate(datalabelTemplateElemement.childNodes[k], factor, x, y, scale, 'Template', false, currentLabelIndex);
                        currentLabelIndex++;
                    }
                }
                if (!ej2_base_1.isNullOrUndefined(polygonElement)) {
                    for (var k = 0; k < polygonElement.childElementCount; k++) {
                        var width = maps.layersCollection[i].polygonSettings.polygons[k].borderWidth;
                        polygonElement.childNodes[k].childNodes[0].setAttribute('stroke-width', (width / scale).toString());
                    }
                }
            }
        };
        Zoom.prototype.dataLabelTranslate = function (element, factor, x, y, scale, type, animate, currentLabelIndex, isPanning, intersect) {
            if (animate === void 0) { animate = false; }
            var labelCollection = this.maps.dataLabelModule.dataLabelCollections;
            var text;
            var trimmedLable;
            var style = this.maps.layers[this.index].dataLabelSettings.textStyle;
            var zoomtext;
            var zoomtextSize;
            var zoomtrimLabel;
            var layerIndex = parseFloat(element.id.split('_LayerIndex_')[1].split('_')[0]);
            var shapeIndex = parseFloat(element.id.split('_shapeIndex_')[1].split('_')[0]);
            var labelIndex;
            Eif (element.id.indexOf('_LabelIndex_') > -1) {
                labelIndex = parseFloat(element.id.split('_LabelIndex_')[1].split('_')[0]);
            }
            var duration = this.currentLayer.animationDuration === 0 && ej2_base_1.animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
            var label = labelCollection[currentLabelIndex];
            var index = currentLabelIndex;
            Eif (label['layerIndex'] === layerIndex && label['shapeIndex'] === shapeIndex
                && label['labelIndex'] === labelIndex) {
                var labelX = label['location']['x'];
                var labelY = label['location']['y'];
                if (type === 'Template') {
                    var locationX = 0;
                    var locationY = 0;
                    Iif (this.maps.isTileMap) {
                        zoomtext = label['dataLabelText'];
                        zoomtextSize = helper_3.measureText(zoomtext, style);
                        locationX = ((labelX + x) * scale) - (zoomtextSize['width'] / 2);
                        locationY = ((labelY + y) * scale) - (zoomtextSize['height']);
                    }
                    else {
                        var layerEle = helper_1.getElementByID(this.maps.element.id + '_Layer_Collections');
                        labelX = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - labelX)) * scale);
                        labelY = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - labelY)) * scale);
                        var layerOffset = layerEle.getBoundingClientRect();
                        var elementOffset = element.parentElement.getBoundingClientRect();
                        locationX = ((labelX) + (layerOffset.left - elementOffset.left));
                        locationY = ((labelY) + (layerOffset.top - elementOffset.top));
                    }
                    element.style.left = locationX + 'px';
                    element.style.top = locationY + 'px';
                }
                else {
                    labelX = ((labelX + x) * scale);
                    labelY = ((labelY + y) * scale);
                    zoomtext = label['dataLabelText'];
                    Eif (!animate || duration === 0) {
                        element.setAttribute('transform', 'translate( ' + labelX + ' ' + labelY + ' )');
                    }
                    if ((ej2_base_1.isNullOrUndefined(isPanning) || !isPanning) && (this.maps.layers[this.index].dataLabelSettings.smartLabelMode !== 'None' ||
                        this.maps.layers[this.index].dataLabelSettings.intersectionAction !== 'None')) {
                        zoomtextSize = helper_1.measureTextElement(zoomtext, style);
                        var start = labelY - zoomtextSize['height'] / 2;
                        var end = labelY + zoomtextSize['height'] / 2;
                        var xpositionEnds = labelX + zoomtextSize['width'] / 2;
                        var xpositionStart = labelX - zoomtextSize['width'] / 2;
                        var textLocations = { rightWidth: xpositionEnds, leftWidth: xpositionStart, heightTop: start, heightBottom: end };
                        if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Hide') {
                            Eif (scale > 1) {
                                text = ((this.maps.dataLabelShape[index] * scale) >= zoomtextSize['width']) ? zoomtext : '';
                                element.textContent = text;
                            }
                            else {
                                text = (this.maps.dataLabelShape[index] >= zoomtextSize['width']) ? zoomtext : '';
                                element.textContent = text;
                            }
                        }
                        var widthList = [];
                        if (this.maps.layers[this.index].dataLabelSettings.smartLabelMode === 'Trim') {
                            Eif (scale > 1) {
                                zoomtrimLabel = helper_3.textTrim((this.maps.dataLabelShape[index] * scale), zoomtext, style, zoomtextSize.width, true, widthList);
                                text = zoomtrimLabel;
                                element.textContent = text;
                            }
                            else {
                                zoomtrimLabel = helper_3.textTrim(this.maps.dataLabelShape[index], zoomtext, style, zoomtextSize.width, true, widthList);
                                text = zoomtrimLabel;
                                element.textContent = text;
                            }
                        }
                        if (this.maps.layers[this.index].dataLabelSettings.intersectionAction === 'Hide') {
                            for (var m = 0; m < intersect.length; m++) {
                                Eif (!ej2_base_1.isNullOrUndefined(intersect[m])) {
                                    if (textLocations['leftWidth'] > intersect[m]['rightWidth']
                                        || textLocations['rightWidth'] < intersect[m]['leftWidth']
                                        || textLocations['heightTop'] > intersect[m]['heightBottom']
                                        || textLocations['heightBottom'] < intersect[m]['heightTop']) {
                                        text = !ej2_base_1.isNullOrUndefined(text) ? text : zoomtext;
                                        element.textContent = text;
                                    }
                                    else {
                                        text = '';
                                        element.textContent = text;
                                        break;
                                    }
                                }
                            }
                            intersect.push(textLocations);
                        }
                        if (this.maps.layers[this.index].dataLabelSettings.intersectionAction === 'Trim') {
                            for (var j = 0; j < intersect.length; j++) {
                                Eif (!ej2_base_1.isNullOrUndefined(intersect[j])) {
                                    if (textLocations['rightWidth'] < intersect[j]['leftWidth']
                                        || textLocations['leftWidth'] > intersect[j]['rightWidth']
                                        || textLocations['heightBottom'] < intersect[j]['heightTop']
                                        || textLocations['heightTop'] > intersect[j]['heightBottom']) {
                                        trimmedLable = !ej2_base_1.isNullOrUndefined(text) ? text : zoomtext;
                                        Eif (scale > 1) {
                                            var trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
                                            trimmedLable = helper_3.textTrim((this.maps.dataLabelShape[index] * scale), trimmedLable, style, trimmedWidth, true);
                                        }
                                        element.textContent = trimmedLable;
                                    }
                                    else {
                                        Eif (textLocations['leftWidth'] > intersect[j]['leftWidth']) {
                                            var width = intersect[j]['rightWidth'] - textLocations['leftWidth'];
                                            var difference = width - (textLocations['rightWidth'] - textLocations['leftWidth']);
                                            text = !ej2_base_1.isNullOrUndefined(text) ? text : zoomtext;
                                            var trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
                                            trimmedLable = helper_3.textTrim(difference, text, style, trimmedWidth, true);
                                            element.textContent = trimmedLable;
                                            break;
                                        }
                                        if (textLocations['leftWidth'] < intersect[j]['leftWidth']) {
                                            var width = textLocations['rightWidth'] - intersect[j]['leftWidth'];
                                            var difference = Math.abs(width - (textLocations['rightWidth'] - textLocations['leftWidth']));
                                            text = !ej2_base_1.isNullOrUndefined(text) ? text : zoomtext;
                                            var trimmedWidth = widthList.length > 0 ? widthList[0] : zoomtextSize.width;
                                            trimmedLable = helper_3.textTrim(difference, text, style, trimmedWidth, true);
                                            element.textContent = trimmedLable;
                                            break;
                                        }
                                    }
                                }
                            }
                            intersect.push(textLocations);
                            if (ej2_base_1.isNullOrUndefined(trimmedLable)) {
                                trimmedLable = helper_3.textTrim((this.maps.dataLabelShape[index] * scale), zoomtext, style, zoomtextSize.width, true);
                                element.textContent = trimmedLable;
                            }
                        }
                    }
                    if (animate || duration > 0) {
                        helper_3.smoothTranslate(element, 0, duration, new helper_3.MapLocation(labelX, labelY));
                    }
                }
            }
        };
        Zoom.prototype.markerTranslate = function (element, factor, x, y, scale, type, animate) {
            if (animate === void 0) { animate = false; }
            var layerIndex = parseInt(element.id.split('_LayerIndex_')[1].split('_')[0], 10);
            var markerIndex = parseInt(element.id.split('_MarkerIndex_')[1].split('_')[0], 10);
            var dataIndex = parseInt(element.id.split('_dataIndex_')[1].split('_')[0], 10);
            var layer = this.maps.layersCollection[layerIndex];
            var marker = layer.markerSettings[markerIndex];
            Eif (!ej2_base_1.isNullOrUndefined(marker) && !ej2_base_1.isNullOrUndefined(marker.dataSource) && !ej2_base_1.isNullOrUndefined(marker.dataSource[dataIndex])) {
                var lng = (!ej2_base_1.isNullOrUndefined(marker.longitudeValuePath)) ?
                    Number(helper_6.getValueFromObject(marker.dataSource[dataIndex], marker.longitudeValuePath)) :
                    !ej2_base_1.isNullOrUndefined(marker.dataSource[dataIndex]['longitude']) ? parseFloat(marker.dataSource[dataIndex]['longitude']) :
                        !ej2_base_1.isNullOrUndefined(marker.dataSource[dataIndex]['Longitude']) ? parseFloat(marker.dataSource[dataIndex]['Longitude']) : 0;
                var lat = (!ej2_base_1.isNullOrUndefined(marker.latitudeValuePath)) ?
                    Number(helper_6.getValueFromObject(marker.dataSource[dataIndex], marker.latitudeValuePath)) :
                    !ej2_base_1.isNullOrUndefined(marker.dataSource[dataIndex]['latitude']) ? parseFloat(marker.dataSource[dataIndex]['latitude']) :
                        !ej2_base_1.isNullOrUndefined(marker.dataSource[dataIndex]['Latitude']) ? parseFloat(marker.dataSource[dataIndex]['Latitude']) : 0;
                var duration = this.currentLayer.animationDuration === 0 && ej2_base_1.animationMode === 'Enable' ? 1000 : this.currentLayer.animationDuration;
                var location_2 = (this.maps.isTileMap) ? helper_1.convertTileLatLongToPoint(new helper_1.Point(lng, lat), this.maps.tileZoomLevel, this.maps.tileTranslatePoint, true) : helper_1.convertGeoToPoint(lat, lng, factor, layer, this.maps);
                if (this.maps.isTileMap) {
                    if (type === 'Template') {
                        var templateOffset = element.getBoundingClientRect();
                        element.style.left = ((location_2.x - (templateOffset.width / 2)) + marker.offset.x) + 'px';
                        element.style.top = ((location_2.y - (templateOffset.height / 2)) + marker.offset.y) + 'px';
                    }
                    else {
                        location_2.x += marker.offset.x;
                        location_2.y += marker.offset.y;
                        element.setAttribute('transform', 'translate( ' + location_2.x + ' ' + location_2.y + ' )');
                    }
                }
                else {
                    if (type === 'Template') {
                        Iif (duration > 0) {
                            location_2.x = ((Math.abs(this.maps.baseMapRectBounds['min']['x'] - location_2.x)) * scale);
                            location_2.y = ((Math.abs(this.maps.baseMapRectBounds['min']['y'] - location_2.y)) * scale);
                            var layerOffset = helper_1.getElementByID(this.maps.element.id + '_Layer_Collections').getBoundingClientRect();
                            var elementOffset = element.parentElement.getBoundingClientRect();
                            element.style.left = (((location_2.x) + (layerOffset.left - elementOffset.left)) + marker.offset.x) + 'px';
                            element.style.top = (((location_2.y) + (layerOffset.top - elementOffset.top)) + marker.offset.y) + 'px';
                            element.style.transform = 'translate(-50%, -50%)';
                        }
                        else {
                            var elementOffset = element.getBoundingClientRect();
                            element.style.left = ((location_2.x + x) * scale) + marker.offset.x - this.maps.mapAreaRect.x - (elementOffset.width / 2) + 'px';
                            element.style.top = ((location_2.y + y) * scale) + marker.offset.y - this.maps.mapAreaRect.y - (elementOffset.height / 2) + 'px';
                        }
                    }
                    else {
                        location_2.x = (((location_2.x + x) * scale) + marker.offset.x);
                        location_2.y = (((location_2.y + y) * scale) + marker.offset.y);
                        Eif (!animate || duration === 0) {
                            element.setAttribute('transform', 'translate( ' + location_2.x + ' ' + location_2.y + ' )');
                        }
                        else {
                            helper_3.smoothTranslate(element, 0, duration, location_2);
                        }
                    }
                }
            }
        };
        Zoom.prototype.markerLineAnimation = function (map) {
            Eif (map.isTileMap) {
                for (var i = 0; i < map.layersCollection.length; i++) {
                    var markerTemplateElement = helper_1.getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Markers_Template_Group');
                    var lineElement = helper_1.getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_line_Group');
                    var polygonElement = helper_1.getElementByID(this.maps.element.id + '_LayerIndex_' + i + '_Polygons_Group');
                    Eif (!ej2_base_1.isNullOrUndefined(markerTemplateElement)) {
                        markerTemplateElement.style.visibility = 'hidden';
                    }
                    Iif (!ej2_base_1.isNullOrUndefined(lineElement)) {
                        lineElement.style.visibility = 'hidden';
                    }
                    if (!ej2_base_1.isNullOrUndefined(polygonElement)) {
                        polygonElement.style.visibility = 'hidden';
                    }
                }
            }
        };
        Zoom.prototype.panning = function (direction, xDifference, yDifference, event) {
            var map = this.maps;
            var panArgs;
            var down = this.mouseDownPoints;
            var move = this.mouseMovePoints;
            var scale = map.scale;
            map.markerZoomedState = false;
            map.zoomPersistence = map.enablePersistence;
            map.defaultState = false;
            map.initialCheck = false;
            var translatePoint = map.translatePoint;
            var prevTilePoint = map.tileTranslatePoint;
            var x;
            var y;
            xDifference = !ej2_base_1.isNullOrUndefined(xDifference) ? xDifference : (down.x - move.x);
            yDifference = !ej2_base_1.isNullOrUndefined(yDifference) ? yDifference : (down.y - move.y);
            var layerX = event.type.indexOf('mouse') > -1 || event.type.indexOf('key') > -1 ? event['layerX'] : event.touches[0].pageX;
            var layerY = event.type.indexOf('mouse') > -1 || event.type.indexOf('key') > -1 ? event['layerY'] : event.touches[0].pageY;
            this.maps.mergeCluster();
            Eif (!map.isTileMap) {
                var marginTop = helper_3.getProcessedMarginValue(map.margin.top);
                var legendElement = document.getElementById(map.element.id + '_Legend_Group');
                var legendHeight = !ej2_base_1.isNullOrUndefined(legendElement) ? legendElement.getClientRects()[0].height : 0;
                x = translatePoint.x - xDifference / scale;
                y = translatePoint.y - yDifference / scale;
                var layerRect = helper_1.getElementByID(map.element.id + '_Layer_Collections').getBoundingClientRect();
                var elementRect = helper_1.getElementByID(map.element.id + '_svg').getBoundingClientRect();
                var panningXDirection = ((xDifference < 0 ? layerRect.left <= (elementRect.left + map.mapAreaRect.x) :
                    ((layerRect.left + layerRect.width + map.mapAreaRect.x) >= (elementRect.width))));
                var panningYDirection = ((yDifference < 0 ? layerRect.top <= (elementRect.top + map.mapAreaRect.y) :
                    ((layerRect.top + layerRect.height + legendHeight + marginTop) >= (elementRect.top + elementRect.height))));
                var location_3 = this.maps.getGeoLocation(this.maps.layersCollection.length - 1, layerX, layerY);
                var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
                panArgs = {
                    cancel: false, name: constants_1.pan, maps: map,
                    tileTranslatePoint: {}, translatePoint: { previous: translatePoint, current: new helper_1.Point(x, y) },
                    scale: map.scale, tileZoomLevel: map.tileZoomLevel, latitude: location_3['latitude'], longitude: location_3['longitude'],
                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
                };
                map.trigger(constants_1.pan, panArgs);
                Eif (!panArgs.cancel) {
                    if (panningXDirection && panningYDirection) {
                        map.translatePoint = new helper_1.Point(x, y);
                        this.applyTransform(map, false, true);
                    }
                    else Iif (panningXDirection) {
                        map.translatePoint = new helper_1.Point(x, map.translatePoint.y);
                        this.applyTransform(map, false, true);
                    }
                    else if (panningYDirection) {
                        map.translatePoint = new helper_1.Point(map.translatePoint.x, y);
                        this.applyTransform(map, false, true);
                    }
                }
                this.maps.zoomNotApplied = false;
            }
            else if (this.maps.tileZoomLevel > 1) {
                x = map.tileTranslatePoint.x - xDifference;
                y = map.tileTranslatePoint.y - yDifference;
                map.tileTranslatePoint.x = x;
                map.tileTranslatePoint.y = y;
                if ((map.tileTranslatePoint.y > -10 && yDifference < 0) || ((map.tileTranslatePoint.y < -((Math.pow(2, this.maps.tileZoomLevel) - 2) * 256) && yDifference > 0))) {
                    map.tileTranslatePoint.x = x + xDifference;
                    map.tileTranslatePoint.y = y + yDifference;
                }
                map.translatePoint.x = (map.tileTranslatePoint.x) / map.scale;
                map.translatePoint.y = (map.tileTranslatePoint.y) / map.scale;
                var location_4 = this.maps.getTileGeoLocation(layerX, layerY);
                var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
                panArgs = {
                    cancel: false, name: constants_1.pan, maps: map,
                    tileTranslatePoint: { previous: prevTilePoint, current: map.tileTranslatePoint },
                    translatePoint: { previous: translatePoint, current: map.translatePoint }, scale: map.scale,
                    tileZoomLevel: map.tileZoomLevel, latitude: location_4['latitude'], longitude: location_4['longitude'],
                    minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
                    minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
                };
                map.trigger(constants_1.pan, panArgs);
                map.mapLayerPanel.generateTiles(map.tileZoomLevel, map.tileTranslatePoint, 'Pan');
                this.applyTransform(map, false, true);
                map.translatePoint.x = (map.tileTranslatePoint.x - xDifference) / map.scale;
                map.translatePoint.y = (map.tileTranslatePoint.y - yDifference) / map.scale;
            }
            map.zoomTranslatePoint = map.translatePoint;
            this.mouseDownPoints = this.mouseMovePoints;
            this.isSingleClick = false;
        };
        Zoom.prototype.toolBarZooming = function (zoomFactor, type) {
            var _this = this;
            var map = this.maps;
            map.initialCheck = map.isMarkerZoomCompleted = false;
            map.defaultState = ((type === 'Reset' && zoomFactor === 1 && !(map.zoomSettings.resetToInitial && map.applyZoomReset))
                || (type === 'ZoomOut' && zoomFactor === 1));
            var prevLevel = map.tileZoomLevel;
            var scale = map.previousScale = map.scale;
            map.markerZoomedState = false;
            map.zoomPersistence = map.enablePersistence;
            map.mapScaleValue = zoomFactor;
            var maxZoom = map.zoomSettings.maxZoom;
            var minZoom = map.zoomSettings.minZoom;
            var size = map.mapAreaRect;
            var translatePoint = map.previousPoint = map.translatePoint;
            var prevTilePoint = map.tileTranslatePoint;
            map.previousProjection = type === 'Reset' ? undefined : map.projectionType;
            zoomFactor = (type === 'ZoomOut') ? (Math.round(zoomFactor) === 1 ? 1 : zoomFactor) : zoomFactor;
            zoomFactor = (type === 'Reset') ? minZoom : (Math.round(zoomFactor) === 0) ? 1 : zoomFactor;
            zoomFactor = (minZoom > zoomFactor && type === 'ZoomIn') ? minZoom + 1 : zoomFactor;
            if ((!map.isTileMap) && (type === 'ZoomIn' ? zoomFactor >= minZoom && Math.round(zoomFactor) <= maxZoom : zoomFactor >= minZoom
                || map.isReset)) {
                var min = map.baseMapRectBounds['min'];
                var max = map.baseMapRectBounds['max'];
                var mapWidth = Math.abs(max['x'] - min['x']);
                var mapHeight = Math.abs(min['y'] - max['y']);
                var translatePointX = void 0;
                var translatePointY = void 0;
                if (zoomFactor < 1.2 && map.projectionType !== 'Eckert5') {
                    Iif (mapHeight === 0 || mapWidth === 0 || mapHeight === mapWidth) {
                        mapWidth = size.width / 2;
                        mapHeight = size.height;
                    }
                    zoomFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
                    zoomFactor = zoomFactor > 1.05 ? 1 : zoomFactor;
                    map.translatePoint = this.calculateInitalZoomTranslatePoint(zoomFactor, mapWidth, mapHeight, size, min, map);
                }
                else {
                    translatePointX = translatePoint.x - (((size.width / scale) - (size.width / zoomFactor)) / 2);
                    translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomFactor)) / 2);
                    var currentHeight = Math.abs(map.baseMapRectBounds['max']['y'] - map.baseMapRectBounds['min']['y']) * zoomFactor;
                    translatePointX = (currentHeight < map.mapAreaRect.height) ? (size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2))))
                        : translatePointX;
                    translatePointY = (currentHeight < map.mapAreaRect.height) ? (size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2))))
                        : translatePointY;
                    map.translatePoint = new helper_1.Point(translatePointX, translatePointY);
                }
                map.zoomTranslatePoint = map.translatePoint;
                map.scale = zoomFactor;
                if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
                    map.translatePoint = map.zoomTranslatePoint = map.previousPoint;
                    map.scale = map.previousScale;
                }
                else {
                    this.applyTransform(map, true);
                }
            }
            else Eif ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
                var tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
                map.scale = Math.pow(2, tileZoomFactor - 1);
                map.tileZoomLevel = tileZoomFactor;
                Eif (map.previousScale !== map.scale || map.isReset) {
                    map.zoomSettings.zoomFactor = zoomFactor;
                    var position = { x: map.availableSize.width / 2, y: map.availableSize.height / 2 };
                    this.getTileTranslatePosition(prevLevel, tileZoomFactor, position, type);
                    Iif (map.zoomSettings.resetToInitial && map.applyZoomReset && type === 'Reset' || (type === 'ZoomOut' && map.zoomSettings.resetToInitial && map.applyZoomReset && tileZoomFactor <= map.initialZoomLevel)) {
                        map.initialCheck = true;
                        map.zoomPersistence = false;
                        map.tileTranslatePoint.x = map.initialTileTranslate.x;
                        map.tileTranslatePoint.y = map.initialTileTranslate.y;
                        tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
                    }
                    if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
                        map.translatePoint = map.tileTranslatePoint = new helper_1.Point(0, 0);
                        map.scale = map.previousScale;
                        map.tileZoomLevel = prevLevel;
                        map.zoomSettings.zoomFactor = map.previousScale;
                    }
                    else {
                        map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
                        map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
                        Iif (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
                            document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
                        }
                        Eif (document.querySelector('.GroupElement')) {
                            document.querySelector('.GroupElement').style.display = 'none';
                        }
                        this.markerLineAnimation(map);
                        map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
                        var animationDuration = this.maps.layersCollection[0].animationDuration === 0 && ej2_base_1.animationMode === 'Enable' ? 1000 : this.maps.layersCollection[0].animationDuration;
                        setTimeout(function () {
                            if (type === 'ZoomOut' || type === 'Reset') {
                            }
                            _this.applyTransform(_this.maps, true);
                            Iif (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
                                document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
                            }
                            _this.maps.isAddLayer = false;
                        }, animationDuration);
                    }
                }
                this.maps.zoomNotApplied = false;
            }
            this.triggerZoomComplete(map, prevLevel, type);
        };
        Zoom.prototype.createZoomingToolbars = function () {
            var map = this.maps;
            this.toolBarGroup = map.renderer.createGroup({
                id: map.element.id + '_Zooming_KitCollection',
                opacity: map.theme.toLowerCase() === 'fluentdark' ? 0.6 : 0.3
            });
            var xSpacing = 15;
            var ySpacing = 15;
            var toolbar = map.zoomSettings.toolbarSettings;
            var button = map.zoomSettings.toolbarSettings.buttonSettings;
            this.maps.toolbarProperties = {
                toolBarOrientation: toolbar.orientation,
                highlightColor: button.highlightColor,
                selectionColor: button.selectionColor,
                horizontalAlignment: toolbar.horizontalAlignment,
                verticalAlignment: toolbar.verticalAlignment,
                color: button.color,
                shapeOpacity: button.opacity,
                borderOpacity: button.borderOpacity
            };
            var buttonRadius = button.radius || map.themeStyle.zoomButtonRadius;
            var cx = buttonRadius / 4;
            var cy = buttonRadius / 4;
            var radius = buttonRadius / 2;
            var padding = button.padding;
            var orientation = this.maps.toolbarProperties.toolBarOrientation;
            var toolbarCollection = map.zoomSettings.toolbarSettings.buttonSettings.toolbarItems.map(function (value) { return value; });
            xSpacing = (buttonRadius / 4) + (button.borderWidth / 2) + padding;
            ySpacing = (buttonRadius / 4) + (button.borderWidth / 2) + padding;
            var shadowElement = '<filter id="chart_shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="5"/>';
            shadowElement += '<feOffset dx="-3" dy="4" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="1"/>';
            shadowElement += '</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
            var toolBarLength = toolbarCollection.length;
            var toolWidth = (orientation === 'Horizontal') ? ((toolBarLength * buttonRadius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth)) : (buttonRadius + button.borderWidth + (2 * padding));
            var toolHeight = (orientation === 'Horizontal') ? (buttonRadius + button.borderWidth + (2 * padding)) : ((toolBarLength * buttonRadius) + (toolBarLength * padding) + padding + (toolBarLength * button.borderWidth));
            var defElement = map.renderer.createDefs();
            defElement.innerHTML = shadowElement;
            this.toolBarGroup.appendChild(defElement);
            var outerElement = map.renderer.drawRectangle(new helper_2.RectOption(map.element.id + '_Zooming_Rect', toolbar.backgroundColor, { color: toolbar.borderColor, width: toolbar.borderWidth, opacity: toolbar.borderOpacity }, toolbar.borderOpacity, new helper_1.Rect((toolbar.borderWidth / 2), (toolbar.borderWidth / 2), (toolWidth - toolbar.borderWidth), (toolHeight - toolbar.borderWidth)), 0, 0));
            this.toolBarGroup.appendChild(outerElement);
            var scaleX = (buttonRadius - (button.borderWidth / 2)) / 30;
            for (var i = 0; i < toolbarCollection.length; i++) {
                if (i !== 0) {
                    xSpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? (xSpacing + (buttonRadius + padding) + button.borderWidth) : xSpacing;
                    ySpacing = (map.toolbarProperties.toolBarOrientation === 'Horizontal') ? ySpacing : (ySpacing + (buttonRadius + padding) + button.borderWidth);
                }
                var toolbar_1 = toolbarCollection[i];
                var pathStroke = !ej2_base_1.isNullOrUndefined(this.maps.toolbarProperties.color) ? this.maps.toolbarProperties.color : this.maps.themeStyle.zoomFillColor;
                var borderColor = button.borderColor || (this.maps.themeStyle.zoomBorderColor || this.maps.themeStyle.zoomFillColor);
                this.currentToolbarEle = map.renderer.createGroup({
                    id: map.element.id + '_Zooming_ToolBar_' + toolbar_1 + '_Group',
                    transform: 'translate( ' + xSpacing + ' ' + ySpacing + ' ) '
                });
                this.currentToolbarEle.setAttribute('class', 'e-maps-toolbar');
                this.currentToolbarEle.appendChild(map.renderer.drawCircle(new helper_1.CircleOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1 + '_Rect', button.fill, { color: borderColor, width: button.borderWidth, opacity: button.borderOpacity }, button.opacity, cx, cy, radius, '')));
                var opacity = 1;
                var direction = '';
                var fill = button.fill;
                this.selectionColor = this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor;
                switch (toolbar_1.toLowerCase()) {
                    case 'zoom': {
                        var fillColor = void 0;
                        var strokeColor = void 0;
                        direction = 'M0.001,14.629L1.372,16l4.571-4.571v-0.685l0.228-0.274c1.051,0.868,2.423,1.417,3.885,1.417c3.291,0,';
                        direction += '5.943-2.651,5.943-5.943S13.395,0,10.103,0S4.16,2.651,4.16,5.943c0,1.508,0.503,2.834,1.417,3.885l-0.274,0.228H4.571';
                        direction = direction + 'L0.001,14.629L0.001,14.629z M5.943,5.943c0-2.285,1.828-4.114,4.114-4.114s4.114,1.828,4.114,';
                        this.currentToolbarEle.setAttribute('class', (this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : ''));
                        if (this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
                            fillColor = fill;
                            strokeColor = pathStroke;
                        }
                        else if (this.maps.zoomSettings.enablePanning && this.maps.zoomSettings.enableSelectionZooming) {
                            fillColor = fill;
                            strokeColor = pathStroke;
                        }
                        else if (!this.maps.zoomSettings.enablePanning && !this.maps.zoomSettings.enableSelectionZooming) {
                            fillColor = fill;
                            strokeColor = pathStroke;
                        }
                        else Eif (!this.maps.zoomSettings.enablePanning && this.maps.zoomSettings.enableSelectionZooming) {
                            fillColor = this.maps.themeStyle.zoomFillColor;
                            strokeColor = pathStroke;
                        }
                        else {
                            fillColor = this.selectionColor;
                            strokeColor = this.selectionColor;
                        }
                        var zoomPath = map.renderer.drawPath(new helper_1.PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, fillColor, 1, strokeColor, opacity, opacity, null, direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z'));
                        zoomPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                        this.currentToolbarEle.appendChild(zoomPath);
                        this.zoomElements = this.currentToolbarEle;
                        this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                        break;
                    }
                    case 'zoomin':
                        direction = 'M 8, 0 L 8, 16 M 0, 8 L 16, 8';
                        var zoomInPath = map.renderer.drawPath(new helper_1.PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1 + '_Path', fill, 3, pathStroke, 1, 1, null, direction));
                        zoomInPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                        this.currentToolbarEle.appendChild(zoomInPath);
                        this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                        break;
                    case 'zoomout':
                        direction = 'M 0, 8 L 16, 8';
                        var zoomOutPath = map.renderer.drawPath(new helper_1.PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, fill, 3, pathStroke, 1, 1, null, direction));
                        zoomOutPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                        this.currentToolbarEle.appendChild(zoomOutPath);
                        this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                        break;
                    case 'pan': {
                        var color = void 0;
                        direction = 'M5,3h2.3L7.275,5.875h1.4L8.65,3H11L8,0L5,3z M3,11V8.7l2.875,0.025v-1.4L3,7.35V5L0,8L3,';
                        direction += '11z M11,13H8.7l0.025-2.875h-1.4L7.35,13H5l3,3L11,13z M13,5v2.3l-2.875-0.025v1.4L13,8.65V11l3-3L13,5z';
                        this.currentToolbarEle.setAttribute('class', (this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : ''));
                        if (this.maps.zoomSettings.enablePanning && this.maps.zoomModule.isDragZoom) {
                            color = this.selectionColor || this.maps.themeStyle.zoomFillColor;
                        }
                        else if (!this.maps.zoomSettings.enablePanning) {
                            color = this.selectionColor || this.maps.themeStyle.zoomFillColor;
                            this.currentToolbarEle.setAttribute('class', '');
                        }
                        else {
                            color = fill || this.maps.themeStyle.zoomFillColor;
                        }
                        var panPath = map.renderer.drawPath(new helper_1.PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, color, 1, pathStroke, opacity, opacity, null, direction));
                        panPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                        this.currentToolbarEle.appendChild(panPath);
                        this.panColor = color;
                        this.panElements = this.currentToolbarEle;
                        this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                        break;
                    }
                    case 'reset':
                        direction = 'M12.364,8h-2.182l2.909,3.25L16,8h-2.182c0-3.575-2.618-6.5-5.818-6.5c-1.128,0-2.218,0.366-3.091,';
                        direction += '1.016l1.055,1.178C6.581,3.328,7.272,3.125,8,3.125C10.4,3.125,12.363,5.319,12.364,8L12.364,8z M11.091,';
                        direction += '13.484l-1.055-1.178C9.419,12.672,8.728,12.875,8,12.875c-2.4,0-4.364-2.194-4.364-4.875h2.182L2.909,4.75L0,8h2.182c0,';
                        var resetPath = map.renderer.drawPath(new helper_1.PathOption(map.element.id + '_Zooming_ToolBar_' + toolbar_1, fill, null, pathStroke, 1, 1, null, direction + '3.575,2.618,6.5,5.818,6.5C9.128,14.5,10.219,14.134,11.091,13.484L11.091,13.484z'));
                        resetPath.setAttribute('transform', 'scale( ' + scaleX + ',' + scaleX + ' )');
                        this.currentToolbarEle.appendChild(resetPath);
                        this.wireEvents(this.currentToolbarEle, this.performToolBarAction);
                        break;
                }
                this.toolBarGroup.appendChild(this.currentToolbarEle);
            }
        };
        Zoom.prototype.performToolBarAction = function (e) {
            var target = e.target;
            e.stopImmediatePropagation();
            var isTouch = e.pointerType === 'touch' || e.pointerType === '2' || (e.type.indexOf('touch') > -1);
            var toolbar = target.id.split('_Zooming_ToolBar_')[1].split('_')[0];
            var isToolbarPerform = true;
            switch (toolbar.toLowerCase()) {
                case 'zoomin':
                    isToolbarPerform = (this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) + 1 <= this.maps.zoomSettings.maxZoom;
                    break;
                case 'zoomout':
                    var scaleValue = this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale;
                    isToolbarPerform = (this.maps.projectionType === 'Miller' || this.maps.projectionType === 'Winkel3' ||
                        this.maps.projectionType === 'AitOff') ? Math.round(scaleValue) - 1 >= this.maps.zoomSettings.minZoom :
                        (scaleValue) - 1 >= this.maps.zoomSettings.minZoom;
                    break;
                case 'reset':
                    isToolbarPerform = Math.round(this.maps.isTileMap ? this.maps.tileZoomLevel : this.maps.scale) !== this.maps.zoomSettings.minZoom;
                    break;
            }
            if (isTouch && isToolbarPerform) {
                this.handled = true;
                this.performZoomingByToolBar(toolbar);
            }
            else if ((e.type === 'mousedown' || e.type === 'pointerdown') && !this.handled && isToolbarPerform) {
                this.handled = false;
                this.performZoomingByToolBar(toolbar);
            }
            else {
                this.handled = false;
            }
        };
        Zoom.prototype.performZoomingByToolBar = function (type) {
            var map = this.maps;
            map.isReset = false;
            var scale = 0;
            var stateColor = this.fillColor || this.maps.themeStyle.zoomFillColor;
            switch (type.toLowerCase()) {
                case 'zoom':
                    this.panColor = stateColor;
                    this.zoomColor = this.maps.zoomSettings.enableSelectionZooming ? this.selectionColor : stateColor;
                    this.applySelection(this.zoomElements, this.zoomColor);
                    this.applySelection(this.panElements, this.panColor);
                    this.isPan = false;
                    this.isZoomSelection = this.maps.zoomSettings.enableSelectionZooming;
                    break;
                case 'pan':
                    this.panColor = this.maps.zoomSettings.enablePanning ? this.selectionColor : stateColor;
                    this.zoomColor = stateColor;
                    if (!this.maps.zoomSettings.enablePanning) {
                        this.applySelection(this.zoomElements, this.selectionColor);
                        this.applySelection(this.panElements, this.panColor);
                    }
                    else {
                        this.applySelection(this.zoomElements, (this.fillColor || stateColor));
                        this.applySelection(this.panElements, this.panColor);
                    }
                    this.isPan = this.maps.zoomSettings.enablePanning;
                    this.isZoomSelection = false;
                    break;
                case 'zoomin':
                    map.staticMapZoom = map.tileZoomLevel;
                    if (map.staticMapZoom > 0 && map.staticMapZoom < map.zoomSettings.maxZoom) {
                        map.staticMapZoom += 1;
                    }
                    if (map.isTileMap && map.tileZoomLevel >= map.zoomSettings.minZoom && map.tileZoomLevel < map.zoomSettings.maxZoom) {
                        this.toolBarZooming(map.tileZoomLevel + 1, 'ZoomIn');
                    }
                    else Eif (!map.isTileMap) {
                        this.toolBarZooming(map.scale + 1, 'ZoomIn');
                    }
                    scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
                    Eif (!this.isZoomSelection) {
                        Eif (scale === map.zoomSettings.maxZoom || scale > 1 || (scale === 1 && this.maps.isTileMap)) {
                            this.applySelection(this.zoomElements, stateColor);
                            this.applySelection(this.panElements, map.zoomSettings.enablePanning ? this.selectionColor : stateColor);
                        }
                        else if (scale === 1 && !this.maps.isTileMap) {
                            this.applySelection(this.zoomElements, stateColor);
                            this.applySelection(this.panElements, stateColor);
                        }
                    }
                    break;
                case 'zoomout':
                    map.staticMapZoom = map.tileZoomLevel;
                    map.markerCenterLatitude = null;
                    map.markerCenterLongitude = null;
                    this.toolBarZooming((map.isTileMap ? map.tileZoomLevel : map.scale) - 1, 'ZoomOut');
                    scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
                    if (!this.isPan && this.isZoomSelection) {
                        this.panColor = stateColor;
                        this.zoomColor = this.selectionColor;
                        this.applySelection(this.zoomElements, this.selectionColor);
                        this.applySelection(this.panElements, this.panColor);
                    }
                    else {
                        if (scale <= 1 && !map.isTileMap) {
                            this.applySelection(this.panElements, stateColor);
                        }
                        else {
                            this.applySelection(this.panElements, map.zoomSettings.enablePanning ? this.selectionColor : stateColor);
                        }
                    }
                    break;
                case 'reset':
                    map.staticMapZoom = map.zoomSettings.enable ? map.zoomSettings.zoomFactor : 0;
                    map.markerCenterLatitude = null;
                    map.markerCenterLongitude = null;
                    this.isZoomSelection = false;
                    this.isPan = map.zoomSettings.enablePanning;
                    this.toolBarZooming(map.zoomSettings.minZoom, 'Reset');
                    if ((this.isPan && !this.isZoomSelection) || (!this.isPan && this.isZoomSelection)) {
                        Iif (!this.maps.zoomSettings.enablePanning) {
                            this.applySelection(this.zoomElements, this.selectionColor);
                            this.applySelection(this.panElements, stateColor);
                        }
                        else {
                            this.applySelection(this.zoomElements, stateColor);
                            this.applySelection(this.panElements, this.selectionColor);
                        }
                    }
                    else Eif (!this.isPan && !this.isZoomSelection) {
                        this.applySelection(this.zoomElements, stateColor);
                        this.applySelection(this.panElements, stateColor);
                    }
            }
            this.panningStyle(type.toLowerCase());
        };
        Zoom.prototype.panningStyle = function (toolbar) {
            var svg = helper_1.getElementByID(this.maps.element.id + '_svg');
            if (toolbar === 'pan' || (this.isPanModeEnabled && toolbar !== 'reset')) {
                svg.setAttribute('class', 'e-maps-panning');
            }
            else {
                svg.setAttribute('class', '');
            }
        };
        Zoom.prototype.applySelection = function (elements, color) {
            if (!elements) {
                return;
            }
            var childElement;
            for (var i = 0; i < elements.childElementCount; i++) {
                childElement = elements.childNodes[i];
                if (childElement.tagName !== 'circle') {
                    childElement.setAttribute('fill', (elements.id.indexOf('Pan') > -1 ? color : 'transparent'));
                    childElement.setAttribute('stroke', color);
                }
            }
        };
        Zoom.prototype.showTooltip = function (e) {
            var text = e.target.id.split('_Zooming_ToolBar_')[1].split('_')[0];
            var tooltip = this.maps.zoomSettings.toolbarSettings.tooltipSettings;
            var tooltipSettings = {
                visible: tooltip.visible,
                fill: tooltip.fill,
                borderOpacity: tooltip.borderOpacity,
                borderWidth: tooltip.borderWidth,
                borderColor: tooltip.borderColor,
                fontColor: tooltip.fontColor,
                fontFamily: tooltip.fontFamily,
                fontStyle: tooltip.fontStyle,
                fontWeight: tooltip.fontWeight,
                fontSize: tooltip.fontSize || '10px',
                fontOpacity: tooltip.fontOpacity
            };
            tooltipSettings.fontFamily = this.maps.themeStyle.fontFamily;
            Eif (!this.isTouch) {
                helper_2.createTooltip('EJ2_Map_Toolbar_Tip', this.maps.getLocalizedLabel(text), (e.pageY + 10), (e.pageX + 10), tooltipSettings);
                Iif (this.maps.isDevice) {
                    clearTimeout(this.clearTimeout);
                    this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
                }
            }
        };
        Zoom.prototype.removeTooltip = function () {
            Eif (helper_1.getElementByID('EJ2_Map_Toolbar_Tip')) {
                ej2_base_1.remove(helper_1.getElementByID('EJ2_Map_Toolbar_Tip'));
            }
        };
        Zoom.prototype.alignToolBar = function () {
            var map = this.maps;
            var padding = 10;
            var element = ej2_base_1.createElement('div', { id: map.element.id + '_ToolBar' });
            element.style.cssText = 'position:absolute;z-index:2';
            var rectSVGObject = map.renderer.createSvg({
                id: map.element.id + '_Zooming_ToolBar', width: 10, height: 10
            });
            rectSVGObject.appendChild(this.toolBarGroup);
            element.appendChild(rectSVGObject);
            Eif (helper_1.getElementByID(map.element.id + '_Secondary_Element')) {
                helper_1.getElementByID(map.element.id + '_Secondary_Element').appendChild(element);
            }
            var toolBarSize = this.toolBarGroup.getBoundingClientRect();
            rectSVGObject.setAttribute('height', (toolBarSize.height + map.zoomSettings.toolbarSettings.borderWidth).toString());
            rectSVGObject.setAttribute('width', (toolBarSize.width + map.zoomSettings.toolbarSettings.borderWidth).toString());
            var size = !ej2_base_1.isNullOrUndefined(map.totalRect) ? map.totalRect : map.mapAreaRect;
            var x = 0;
            var y = 0;
            switch (map.toolbarProperties.verticalAlignment) {
                case 'Near':
                    y = size.y;
                    break;
                case 'Center':
                    y = (size.height / 2) - (toolBarSize.height / 2);
                    break;
                case 'Far':
                    y = (size.height - toolBarSize.height) - padding;
                    break;
            }
            switch (map.toolbarProperties.horizontalAlignment) {
                case 'Near':
                    x = size.x;
                    break;
                case 'Center':
                    x = (size.width / 2) - (toolBarSize.width / 2);
                    break;
                case 'Far':
                    Iif (!ej2_base_1.isNullOrUndefined(map.legendModule) && map.legendSettings.position === 'Left') {
                        x = size.width + size.x - toolBarSize.width - padding;
                    }
                    else {
                        x = (size.width - toolBarSize.width) - padding;
                    }
                    break;
            }
            element.style.left = x + 'px';
            element.style.top = y + 'px';
            var color = this.maps.toolbarProperties.highlightColor || this.maps.themeStyle.zoomSelectionColor;
            var 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; } ' +
                '.e-maps-popup-close { display: block; opacity: 0; }';
            var style = document.createElement('style');
            style.appendChild(document.createTextNode(css));
            element.appendChild(style);
        };
        Zoom.prototype.removeToolbarOpacity = function (factor, id) {
            Eif (!ej2_base_1.isNullOrUndefined(this.maps) && this.maps.zoomModule && this.maps.zoomSettings.enable) {
                if (helper_1.getElementByID(this.maps.element.id + '_Zooming_KitCollection') && id.indexOf(this.maps.element.id + '_Zooming_') > -1) {
                    if (this.maps.isDevice) {
                        helper_1.getElementByID(this.maps.element.id + '_Zooming_KitCollection').setAttribute('opacity', '1');
                        this.removeToolbarClass('', '', '', '', '');
                    }
                    else {
                        this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', 'e-maps-toolbar', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', 'e-maps-toolbar');
                    }
                    var toolbarShapeOpacity = this.maps.toolbarProperties.shapeOpacity;
                    var toolbarButtonOpacity = this.maps.toolbarProperties.borderOpacity;
                    if (this.maps.isTileMap && (factor <= 1.1 || this.maps.zoomSettings.minZoom === factor)) {
                        Eif (!this.maps.isDevice) {
                            this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', '', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', '');
                        }
                        Eif (this.maps.zoomSettings.enablePanning) {
                            this.removePanColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
                        }
                        Iif (this.isZoomSelection && this.maps.zoomSettings.enableSelectionZooming && !this.maps.isReset) {
                            this.removeZoomColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
                            this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
                        }
                        this.removeZoomOpacity((this.maps.zoomSettings.enableSelectionZooming ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enableSelectionZooming ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity, 0.3, 0.3, (this.maps.zoomSettings.enablePanning ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enablePanning ? toolbarButtonOpacity : 0.3), 0.3, 0.3);
                    }
                    else if ((factor <= 1.1 || this.maps.zoomSettings.minZoom === factor)) {
                        if (!this.maps.isDevice) {
                            this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', '', '', '');
                        }
                        if (!this.isZoomSelection && this.maps.zoomSettings.enablePanning) {
                            this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
                        }
                        if (this.isZoomSelection && this.maps.zoomSettings.enableSelectionZooming && !this.maps.isReset) {
                            this.removeZoomColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
                            this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
                        }
                        this.removeZoomOpacity((this.maps.zoomSettings.enableSelectionZooming ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enableSelectionZooming ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3);
                    }
                    else if (factor < this.maps.zoomSettings.maxZoom) {
                        Eif (!this.maps.isDevice) {
                            this.removeToolbarClass(this.maps.zoomSettings.enableSelectionZooming ? 'e-maps-toolbar' : '', 'e-maps-toolbar', 'e-maps-toolbar', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', 'e-maps-toolbar');
                        }
                        Eif (!this.maps.zoomModule.isZoomFinal) {
                            this.removeZoomOpacity((this.maps.zoomSettings.enableSelectionZooming ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enableSelectionZooming ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity, toolbarShapeOpacity, toolbarButtonOpacity, (this.maps.zoomSettings.enablePanning ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enablePanning ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity);
                        }
                        else {
                            this.maps.zoomModule.isZoomFinal = false;
                        }
                        if (this.isZoomSelection && this.maps.zoomSettings.enableSelectionZooming) {
                            this.removeZoomColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
                            Iif (this.maps.zoomModule.isPan && this.maps.zoomSettings.enablePanning) {
                                this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
                            }
                        }
                        else Eif (!this.isZoomSelection && this.maps.zoomSettings.enablePanning) {
                            this.removePanColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
                            if (this.maps.zoomSettings.enableSelectionZooming) {
                                this.removeZoomColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
                            }
                        }
                    }
                    else {
                        Eif (!this.maps.isDevice) {
                            this.removeToolbarClass('', '', 'e-maps-toolbar', this.maps.zoomSettings.enablePanning ? 'e-maps-toolbar' : '', 'e-maps-toolbar');
                        }
                        this.removeZoomOpacity(0.3, 0.3, 0.3, 0.3, toolbarShapeOpacity, toolbarButtonOpacity, (this.maps.zoomSettings.enablePanning ? toolbarShapeOpacity : 0.3), (this.maps.zoomSettings.enablePanning ? toolbarButtonOpacity : 0.3), toolbarShapeOpacity, toolbarButtonOpacity);
                        Eif (this.maps.zoomSettings.enableSelectionZooming) {
                            this.removeZoomColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
                        }
                        Eif (!this.isZoomSelection && this.maps.zoomSettings.enablePanning) {
                            this.removePanColor(this.maps.toolbarProperties.selectionColor || this.maps.themeStyle.zoomSelectionColor);
                        }
                    }
                }
                else {
                    Eif (!this.maps.isDevice) {
                        this.removePanColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
                        this.removeZoomColor(this.maps.toolbarProperties.color || this.maps.themeStyle.zoomFillColor);
                        this.removeZoomOpacity(1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
                    }
                }
            }
        };
        Zoom.prototype.setOpacity = function (circleId, pathId, circleOpacity, pathOpacity) {
            if (helper_1.getElementByID(this.maps.element.id + circleId)) {
                helper_1.getElementByID(this.maps.element.id + circleId).setAttribute('stroke-opacity', circleOpacity.toString());
                helper_1.getElementByID(this.maps.element.id + circleId).setAttribute('fill-opacity', circleOpacity.toString());
                helper_1.getElementByID(this.maps.element.id + pathId).setAttribute('stroke-opacity', pathOpacity.toString());
                helper_1.getElementByID(this.maps.element.id + pathId).setAttribute('fill-opacity', pathOpacity.toString());
            }
        };
        Zoom.prototype.removeZoomOpacity = function (zoomOpacity, zoomStrokeOpacity, zoomInOpacity, zoomInStrokeOpacity, zoomOutOpacity, zoomOutStrokeOpacity, panOpacity, panStrokeOpacity, resetOpacity, resetStrokeOpacity) {
            this.setOpacity('_Zooming_ToolBar_Zoom_Rect', '_Zooming_ToolBar_Zoom', zoomStrokeOpacity, zoomOpacity);
            this.setOpacity('_Zooming_ToolBar_ZoomIn_Rect', '_Zooming_ToolBar_ZoomIn_Path', zoomInStrokeOpacity, zoomInOpacity);
            this.setOpacity('_Zooming_ToolBar_ZoomOut_Rect', '_Zooming_ToolBar_ZoomOut', zoomOutStrokeOpacity, zoomOutOpacity);
            this.setOpacity('_Zooming_ToolBar_Pan_Rect', '_Zooming_ToolBar_Pan', panStrokeOpacity, panOpacity);
            this.setOpacity('_Zooming_ToolBar_Reset_Rect', '_Zooming_ToolBar_Reset', resetStrokeOpacity, resetOpacity);
        };
        Zoom.prototype.removeToolbarClass = function (zoomClassStyle, zoomInClassStyle, zoomOutClassStyle, panClassStyle, resetClassStyle) {
            Eif (helper_1.getElementByID(this.maps.element.id + '_Zooming_KitCollection')) {
                Eif (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_ZoomIn_Group')) {
                    helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_ZoomIn_Group').setAttribute('class', zoomInClassStyle);
                }
                Eif (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_ZoomOut_Group')) {
                    helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_ZoomOut_Group').setAttribute('class', zoomOutClassStyle);
                }
                Eif (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_Reset_Group')) {
                    helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_Reset_Group').setAttribute('class', resetClassStyle);
                }
                if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_Zoom_Group') && this.maps.zoomSettings.enableSelectionZooming) {
                    helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom_Group').setAttribute('class', zoomClassStyle);
                }
                if (document.getElementById(this.maps.element.id + '_Zooming_ToolBar_Pan_Group') && this.maps.zoomSettings.enablePanning) {
                    helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan_Group').setAttribute('class', panClassStyle);
                }
            }
        };
        Zoom.prototype.removePanColor = function (selectionColor) {
            if (helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan_Rect') && this.maps.zoomSettings.enablePanning) {
                helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan').setAttribute('fill', selectionColor);
                helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_Pan').setAttribute('stroke', selectionColor);
            }
        };
        Zoom.prototype.removeZoomColor = function (selectionColor) {
            if (helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom_Rect') && this.maps.zoomSettings.enableSelectionZooming) {
                helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom').setAttribute('fill', 'transparent');
                helper_1.getElementByID(this.maps.element.id + '_Zooming_ToolBar_Zoom').setAttribute('stroke', selectionColor);
            }
        };
        Zoom.prototype.wireEvents = function (element, process) {
            ej2_base_1.EventHandler.add(element, ej2_base_1.Browser.touchStartEvent, process, this);
            ej2_base_1.EventHandler.add(element, 'mouseover', this.showTooltip, this);
            ej2_base_1.EventHandler.add(element, 'mouseout', this.removeTooltip, this);
        };
        Zoom.prototype.mapMouseWheel = function (e) {
            Eif (this.maps.zoomSettings.enable && this.maps.zoomSettings.mouseWheelZoom) {
                var map = this.maps;
                map.markerZoomedState = false;
                map.zoomPersistence = map.enablePersistence;
                var position = this.getMousePosition(e.pageX, e.pageY);
                var prevLevel = map.tileZoomLevel;
                var prevScale = map.scale;
                var delta = 1;
                var staticMaxZoomLevel = map.zoomSettings.maxZoom;
                var value = (map.isTileMap) ? prevLevel : prevScale;
                Eif (((position.x > map.mapAreaRect.x) && (position.x < (map.mapAreaRect.x + map.mapAreaRect.width))) &&
                    (position.y > map.mapAreaRect.y) && position.y < (map.mapAreaRect.y + map.mapAreaRect.height)) {
                    e.preventDefault();
                    var direction = (this.browserName === 'mozilla' && !this.isPointer) ?
                        -(e.detail) / 3 > 0 ? 'ZoomIn' : 'ZoomOut' : (e.wheelDelta / 120) > 0 ? 'ZoomIn' : 'ZoomOut';
                    if (direction === 'ZoomIn') {
                        map.mapScaleValue = value + delta;
                        if (map.isTileMap) {
                            map.staticMapZoom = map.tileZoomLevel;
                            Eif (map.staticMapZoom > 0 && map.staticMapZoom < staticMaxZoomLevel) {
                                map.staticMapZoom += 1;
                                this.performZooming(position, (value + delta), direction);
                            }
                        }
                        else {
                            this.performZooming(position, (value + delta), direction);
                        }
                    }
                    else {
                        map.mapScaleValue = value - delta;
                        map.isReset = (map.mapScaleValue < 1) ? true : false;
                        map.staticMapZoom = map.tileZoomLevel;
                        if (map.mapScaleValue === 1) {
                            map.markerCenterLatitude = null;
                            map.markerCenterLongitude = null;
                        }
                        Iif (map.staticMapZoom > 1 && map.staticMapZoom < staticMaxZoomLevel) {
                            map.staticMapZoom -= 1;
                        }
                        this.performZooming(position, (value - delta), direction);
                    }
                }
                this.removeToolbarOpacity(map.mapScaleValue, (!this.maps.isDevice ? (!ej2_base_1.isNullOrUndefined(e.target) ? e.target['id'] :
                    this.maps.element.id) : this.maps.element.id + '_Zooming_'));
            }
        };
        Zoom.prototype.doubleClick = function (e) {
            var pageX = e.pageX;
            var pageY = e.pageY;
            var tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
            Eif (this.maps.zoomSettings.enable && this.maps.zoomSettings.doubleClickZoom
                && !(e.target['id'].indexOf('_Zooming_') > -1) && ej2_base_1.isNullOrUndefined(tooltipElement)) {
                var position = this.getMousePosition(pageX, pageY);
                var map = this.maps;
                var prevLevel = map.tileZoomLevel;
                var prevScale = map.scale;
                map.mapScaleValue = map.mapScaleValue + 1;
                var value = (map.isTileMap) ? prevLevel : prevScale;
                Eif (((position.x > map.mapAreaRect.x) && (position.x < (map.mapAreaRect.x + map.mapAreaRect.width))) &&
                    (position.y > map.mapAreaRect.y) && position.y < (map.mapAreaRect.y + map.mapAreaRect.height)) {
                    this.performZooming(position, (value + 1), 'ZoomIn');
                }
            }
        };
        Zoom.prototype.mouseDownHandler = function (e) {
            var pageX;
            var pageY;
            var target;
            var touches = null;
            var element = e.target;
            if (e.type === 'touchstart') {
                this.isTouch = true;
                touches = e.touches;
                target = e.target;
                pageX = touches[0].pageX;
                pageY = touches[0].pageY;
            }
            else {
                pageX = e.pageX;
                pageY = e.pageY;
                target = e.target;
            }
            if (!this.isTouch) {
                e.preventDefault();
            }
            Iif (!this.maps.zoomSettings.enablePanning) {
                this.isPan = this.isPanModeEnabled = this.panColor !== this.selectionColor ? this.maps.zoomSettings.enablePanning
                    : this.zoomColor === this.selectionColor;
            }
            else {
                this.isPan = this.isPanModeEnabled = !this.isZoomSelection;
            }
            this.mouseDownLatLong = { x: pageX, y: pageY };
            var scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
            this.rectZoomingStart = ((this.isZoomSelection && scale < this.maps.zoomSettings.maxZoom) && this.maps.zoomSettings.enable);
            this.mouseDownPoints = this.getMousePosition(pageX, pageY);
            if (this.isTouch && touches !== null) {
                this.firstMove = true;
                this.pinchFactor = this.maps.scale;
                this.fingers = touches.length;
            }
            this.isSingleClick = true;
        };
        Zoom.prototype.mouseMoveHandler = function (e) {
            var pageX;
            var pageY;
            var map = this.maps;
            var touchArg;
            var target;
            var touches = null;
            var zoom = this.maps.zoomSettings;
            if (e.type === 'touchmove') {
                this.isTouch = true;
                target = e.target;
                touches = e.touches;
                pageX = touches[0].pageX;
                pageY = touches[0].pageY;
            }
            else {
                pageX = e.pageX;
                pageY = e.pageY;
                target = e.target;
            }
            Eif (helper_1.getElementByID(map.element.id + '_Zooming_KitCollection')) {
                if (target.id.indexOf('_Zooming_') > -1) {
                    helper_1.getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', '1');
                }
                else Eif (!map.isDevice) {
                    helper_1.getElementByID(map.element.id + '_Zooming_KitCollection').setAttribute('opacity', map.theme.toLowerCase() === 'fluentdark' ? '0.6' : '0.3');
                }
            }
            if (this.isTouch) {
                Eif (this.maps.zoomSettings.pinchZooming && touches !== null) {
                    if (this.firstMove && touches.length === 2) {
                        this.rectZoomingStart = false;
                        this.updateInteraction();
                        this.touchStartList = helper_2.targetTouches(e);
                    }
                    else Eif (touches.length === 2 && this.touchStartList.length === 2) {
                        this.touchMoveList = helper_2.targetTouches(e);
                        e.preventDefault();
                        this.rectZoomingStart = false;
                        this.performPinchZooming(e);
                    }
                    this.firstMove = false;
                }
            }
            this.mouseMovePoints = this.getMousePosition(pageX, pageY);
            if (zoom.enable && this.isPanModeEnabled && this.maps.markerDragId.indexOf('_MarkerIndex_') === -1 && ((ej2_base_1.Browser.isDevice && touches.length >= 1) || !ej2_base_1.Browser.isDevice)) {
                e.preventDefault();
                this.maps.element.style.cursor = 'pointer';
                this.mouseMoveLatLong = { x: pageX, y: pageY };
                if ((this.mouseDownLatLong['x'] !== this.mouseMoveLatLong['x']) && (this.mouseDownLatLong['y'] !== this.mouseMoveLatLong['y'])) {
                    Eif (this.maps.zoomSettings.enablePanning) {
                        this.panning('None', null, null, e);
                    }
                    this.mouseDownLatLong['x'] = pageX;
                    this.mouseDownLatLong['y'] = pageY;
                }
            }
            if (this.isTouch ? (touches !== null && touches.length === 1 && this.rectZoomingStart) : this.rectZoomingStart) {
                e.preventDefault();
                var scale = this.maps.isTileMap ? Math.round(this.maps.tileZoomLevel) : Math.round(this.maps.mapScaleValue);
                Eif (this.maps.zoomSettings.enableSelectionZooming && scale < this.maps.zoomSettings.maxZoom) {
                    this.drawZoomRectangle();
                }
                else {
                    this.rectZoomingStart = false;
                    this.isPan = true;
                }
            }
        };
        Zoom.prototype.mouseUpHandler = function (e) {
            this.rectZoomingStart = false;
            this.isSingleClick = this.isSingleClick ? true : false;
            this.isTouch = false;
            this.touchStartList = [];
            this.touchMoveList = [];
            this.lastScale = 1;
            this.maps.element.style.cursor = 'auto';
            if (this.isPanModeEnabled && this.maps.zoomSettings.enablePanning && !ej2_base_1.isNullOrUndefined(this.maps.previousPoint) &&
                (!this.maps.isTileMap ? (this.maps.translatePoint.x !== this.maps.previousPoint.x && this.maps.translatePoint.y !== this.maps.previousPoint.y)
                    : this.isPanningInProgress)) {
                var pageX = void 0;
                var pageY = void 0;
                var layerX = 0;
                var layerY = 0;
                var target = void 0;
                var element = e.target;
                if (e.type.indexOf('touch') !== -1) {
                    var touchArg = e;
                    layerX = pageX = touchArg.changedTouches[0].pageX;
                    pageY = touchArg.changedTouches[0].pageY;
                    layerY = pageY - (this.maps.isTileMap ? 10 : 0);
                    target = touchArg.target;
                    this.maps.mouseClickEvent = { x: pageX, y: pageY };
                }
                else {
                    pageX = e.pageX;
                    pageY = e.pageY;
                    layerX = e['layerX'];
                    layerY = e['layerY'] - (this.maps.isTileMap ? 10 : 0);
                    target = e.target;
                }
                var panCompleteEventArgs = void 0;
                var minMaxLatitudeLongitude = this.maps.getMinMaxLatitudeLongitude();
                Eif (!this.maps.isTileMap) {
                    this.maps.mouseClickEvent['x'] = this.maps.mouseDownEvent['x'];
                    this.maps.mouseClickEvent['y'] = this.maps.mouseDownEvent['y'];
                    var location_5 = this.maps.getClickLocation(element.id, pageX, pageY, element, pageX, pageY);
                    panCompleteEventArgs = {
                        cancel: false, name: 'panComplete', maps: this.maps,
                        tileTranslatePoint: {}, translatePoint: { previous: this.maps.previousPoint, current: this.maps.translatePoint },
                        scale: this.maps.scale, tileZoomLevel: this.maps.tileZoomLevel, latitude: !ej2_base_1.isNullOrUndefined(location_5) ?
                            location_5.latitude : 0, longitude: !ej2_base_1.isNullOrUndefined(location_5) ? location_5.longitude : 0,
                        minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
                        minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
                    };
                }
                else {
                    var location_6 = this.maps.getTileGeoLocation(layerX, layerY);
                    panCompleteEventArgs = {
                        cancel: false, name: 'panComplete', maps: this.maps,
                        tileTranslatePoint: { previous: this.maps.tileTranslatePoint, current: this.maps.tileTranslatePoint },
                        translatePoint: { previous: this.maps.previousPoint, current: this.maps.translatePoint }, scale: this.maps.scale,
                        tileZoomLevel: this.maps.tileZoomLevel, latitude: location_6.latitude, longitude: location_6.longitude,
                        minLatitude: minMaxLatitudeLongitude.minLatitude, maxLatitude: minMaxLatitudeLongitude.maxLatitude,
                        minLongitude: minMaxLatitudeLongitude.minLongitude, maxLongitude: minMaxLatitudeLongitude.maxLongitude
                    };
                }
                this.maps.trigger('panComplete', panCompleteEventArgs);
            }
            this.isPanModeEnabled = false;
            this.isPanningInProgress = false;
            var zoomRectElement = helper_1.getElementByID(this.maps.element.id + '_Selection_Rect_Zooming');
            if (zoomRectElement && this.maps.zoomSettings.enable && this.maps.zoomSettings.enableSelectionZooming) {
                ej2_base_1.remove(zoomRectElement);
                this.performRectZooming();
            }
            this.mouseMoveLatLong = { x: 0, y: 0 };
            this.mouseDownLatLong = { x: 0, y: 0 };
            this.pinchDistance = null;
        };
        Zoom.prototype.mouseCancelHandler = function (e) {
            this.isPanModeEnabled = false;
            this.isTouch = false;
            this.rectZoomingStart = false;
            var zoomRectElement = helper_1.getElementByID(this.maps.element.id + '_Selection_Rect_Zooming');
            if (zoomRectElement && this.maps.zoomSettings.enable) {
                ej2_base_1.remove(zoomRectElement);
                this.performRectZooming();
            }
        };
        Zoom.prototype.click = function (e) {
            var map = this.maps;
            var tooltipElement = e.target.closest('#' + this.maps.element.id + '_mapsTooltipparent_template');
            if ((map.markerModule && map.markerModule.sameMarkerData.length > 0) ||
                (e.target['id'].indexOf('MarkerIndex') > -1 && e.target['id'].indexOf('cluster') === -1) || !ej2_base_1.isNullOrUndefined(tooltipElement)) {
                return null;
            }
            if (this.isSingleClick && map.zoomSettings.zoomOnClick && !(e.target['id'].indexOf('_Zooming_') > -1) && !map.zoomSettings.doubleClickZoom
                && (this.zoomColor !== this.selectionColor)) {
                var pageX = e.pageX;
                var pageY = e.pageY;
                var position = this.getMousePosition(pageX, pageY);
                var prevLevel = map.tileZoomLevel;
                var prevScale = map.scale;
                map.mapScaleValue = map.mapScaleValue + 1;
                var value = (map.isTileMap) ? prevLevel : prevScale;
                if (((position.x > map.mapAreaRect.x) && (position.x < (map.mapAreaRect.x + map.mapAreaRect.width))) &&
                    (position.y > map.mapAreaRect.y) && position.y < (map.mapAreaRect.y + map.mapAreaRect.height)) {
                    this.performZooming(position, (value + 1), 'ZoomIn');
                }
            }
        };
        Zoom.prototype.getMousePosition = function (pageX, pageY) {
            var map = this.maps;
            var elementRect = map.element.getBoundingClientRect();
            var pageXOffset = map.element.ownerDocument.defaultView.pageXOffset;
            var pageYOffset = map.element.ownerDocument.defaultView.pageYOffset;
            var clientTop = map.element.ownerDocument.documentElement.clientTop;
            var clientLeft = map.element.ownerDocument.documentElement.clientLeft;
            var positionX = elementRect.left + pageXOffset - clientLeft;
            var positionY = elementRect.top + pageYOffset - clientTop;
            return new helper_1.Point(Math.abs(pageX - positionX), Math.abs(pageY - positionY));
        };
        Zoom.prototype.addEventListener = function () {
            if (this.maps.isDestroyed) {
                return;
            }
            ej2_base_1.EventHandler.add(this.maps.element, this.wheelEvent, this.mapMouseWheel, this);
            ej2_base_1.EventHandler.add(this.maps.element, 'click', this.click, this);
            ej2_base_1.EventHandler.add(this.maps.element, 'dblclick', this.doubleClick, this);
            this.maps.on(ej2_base_1.Browser.touchMoveEvent, this.mouseMoveHandler, this);
            this.maps.on(ej2_base_1.Browser.touchStartEvent, this.mouseDownHandler, this);
            this.maps.on(ej2_base_1.Browser.touchEndEvent, this.mouseUpHandler, this);
            ej2_base_1.EventHandler.add(this.maps.element, this.cancelEvent, this.mouseCancelHandler, this);
        };
        Zoom.prototype.removeEventListener = function () {
            if (this.maps.isDestroyed) {
                return;
            }
            ej2_base_1.EventHandler.remove(this.maps.element, this.wheelEvent, this.mapMouseWheel);
            ej2_base_1.EventHandler.remove(this.maps.element, 'click', this.click);
            ej2_base_1.EventHandler.remove(this.maps.element, 'dblclick', this.doubleClick);
            this.maps.off(ej2_base_1.Browser.touchMoveEvent, this.mouseMoveHandler);
            this.maps.off(ej2_base_1.Browser.touchStartEvent, this.mouseDownHandler);
            this.maps.off(ej2_base_1.Browser.touchEndEvent, this.mouseUpHandler);
            ej2_base_1.EventHandler.remove(this.maps.element, this.cancelEvent, this.mouseCancelHandler);
        };
        Zoom.prototype.getModuleName = function () {
            return 'Zoom';
        };
        Zoom.prototype.destroy = function () {
            this.toolBarGroup = null;
            this.currentToolbarEle = null;
            this.zoomingRect = null;
            this.zoomElements = null;
            this.panElements = null;
            this.baseTranslatePoint = null;
            this.touchStartList = null;
            this.touchMoveList = null;
            this.previousTouchMoveList = null;
            this.mouseDownPoints = null;
            this.mouseMovePoints = null;
            this.startTouches = [];
            this.mouseDownLatLong = null;
            this.mouseMoveLatLong = null;
            this.removeEventListener();
            this.layerCollectionEle = null;
            this.currentLayer = null;
            this.pinchDistance = null;
            this.maps = null;
        };
        return Zoom;
    }());
    exports.Zoom = Zoom;
});