1<!DOCTYPE html> 2<html lang="id"> 3 <head> 4 <!-- meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 7 <meta http-equiv="x-ua-compatible" content="ie=edge"> 8 <meta name="author" content="Banyumili"> 9 <meta property="og:site_name" content="Banyumili"> 10 <link rel="canonical" href="https://www.banyumilitravel.id/outlet"> 11 <meta name="csrf-token" content="4BVSH96GAJ02llQcr35IXzT2Wws6sjv5R16xcWsn"> 12 13 14 15 16 <!-- title --> 17 <title>Lokasi Pool / Outlet Banyumili Travel: Alamat & No. Telp</title> 18 19 <meta name="description" content="Temukan alamat dan nomor telepon outlet pool Banyumili Travel terdekat dengan lokasimu. Tersedia di Kota Balikpapan Bontang Sangatta Samarinda."> 20 21 <meta name="keywords" content="pool travel banyumili, outlet banyumili travel"> 22 23 <!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 23-24
23 24<script async src="https://www.googletagmanager.com/gtag/js?id=
24G-NDY6LN70BZ
vendor: 12 bytes, line 24
24"></script>
25<script> 26
vendor: 146 bytes, lines 26-29
26window.dataLayer = window.dataLayer || []; 27 function gtag() { dataLayer.push(arguments); } 28 gtag('js', new Date()); 29 gtag('config', '
29G-NDY6LN70BZ
vendor: 8 bytes, lines 29-30
29'); 30
30</script>
30 31 <!-- Google Tag Manager --> 32
32<script>
vendor: 364 bytes, lines 32-37
32 33 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 34 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 35 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 36 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 37 })(window,document,'script','dataLayer','
37GTM-K8Q3ZF46
vendor: 8 bytes, lines 37-38
37'); 38
38</script>
38 39 <!-- End Google Tag Manager --> 40 41 42 43 <link href="https://www.banyumilitravel.id/global/css/default-head.css?v=3.0" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> 44 <noscript> 45 <link rel="stylesheet" href="/global/css/default-head.css?v=3.0"> 46 </noscript> 47 <!-- shortcut icon --> 48 <link rel="shortcut icon" href="https://www.banyumilitravel.id/default/banyumili/images/icon/favicon.png"> 49 <!-- bootstrap --> 50 <link href="https://www.banyumilitravel.id/default/banyumili/css/bootstrap.min.css?v=3.0"rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> 51 <!-- flatpickr --> 52 <link href="https://www.banyumilitravel.id/default/banyumili/css/flatpickr.min.css?v=3.0" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> 53 <!-- slimselect --> 54 <link href="https://www.banyumilitravel.id/default/banyumili/css/slimselect.min.css?v=3.0" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> 55 56 <!-- font awesome --> 57 <link rel="stylesheet" type="text/css" href="https://www.banyumilitravel.id/fontawesome-5.8.1/css/all.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> 58 <!-- custom --> 59 60 <link href="https://www.banyumilitravel.id/default/banyumili/css/custom.css?v=3.0" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> 61 <link href="https://www.banyumilitravel.id/global/css/custom-tailwind.css?v=3.0" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> 62 63 <link rel="stylesheet" type="text/css" href="https://www.banyumilitravel.id/global/css/gocaptcha-client.css"> 64 65 <style> 66 .border-seat { 67 border-radius: 16px; 68 border: 1px solid #E5E7EB; 69 } 70 71 .pcapital { 72 text-transform: capitalize !important; 73 } 74 75 .text-lowercase.pcapital, 76 .pcapital.text-lowercase { 77 text-transform: capitalize !important; 78 } 79 80 .shadow-cstm { 81 box-shadow: 0 8px 24px 0 #959da51f; 82 } 83 84 /* Button umum */ 85 .btn, 86 .btn:hover, 87 .btn:focus, 88 .btn:active, 89 .btn:focus-visible, 90 .btn:not(:disabled):not(.disabled):active { 91 outline: none !important; 92 box-shadow: none !important; 93 } 94 95 /* Link */ 96 a, 97 a:hover, 98 a:focus, 99 a:active, 100 a:focus-visible { 101 outline: none !important; 102 box-shadow: none !important; 103 } 104 105 /* Image */ 106 img, 107 img:focus, 108 img:active, 109 img:focus-visible { 110 outline: none !important; 111 box-shadow: none !important; 112 } 113 114 /* Accordion Bootstrap 5 */ 115 .accordion-button, 116 .accordion-button:hover, 117 .accordion-button:focus, 118 .accordion-button:active, 119 .accordion-button:focus-visible, 120 .accordion-button:not(.collapsed) { 121 outline: none !important; 122 box-shadow: none !important; 123 } 124 125 /* Accordion Bootstrap 4 / card header */ 126 .card-header, 127 .card-header:focus, 128 .card-header:active, 129 .card-header .btn, 130 .card-header .btn:hover, 131 .card-header .btn:focus, 132 .card-header .btn:active, 133 .card-header .btn:focus-visible { 134 outline: none !important; 135 box-shadow: none !important; 136 } 137 138 /* Elemen accordion yang memakai data-toggle / data-bs-toggle */ 139 [data-toggle="collapse"], 140 [data-toggle="collapse"]:focus, 141 [data-toggle="collapse"]:active, 142 [data-bs-toggle="collapse"], 143 [data-bs-toggle="collapse"]:focus, 144 [data-bs-toggle="collapse"]:active { 145 outline: none !important; 146 box-shadow: none !important; 147 -webkit-tap-highlight-color: transparent; 148 } 149 </style> 150 151 <link rel="stylesheet" href="https://www.banyumilitravel.id/global/css/leaflet.css"/> 152 <link rel="stylesheet" href="https://www.banyumilitravel.id/global/css/MarkerCluster.css"/> 153 <link rel="stylesheet" href="https://www.banyumilitravel.id/global/css/MarkerCluster.Default.css"/> 154 <style> 155 .form-control { 156 height: calc(2.25rem + 2px) !important; 157 padding: .375rem .75rem !important; 158 line-height: 1.5 !important; 159 background-color: #fff !important; 160 border-radius: .25rem8 !important; 161 } 162 163 .form-control:focus { 164 border: 1px solid #2563EB !important; 165 } 166 167 .semi-bold { 168 font-weight: 600; 169 } 170 171 .text-all { 172 color: #2563EB; 173 } 174 175 #map { 176 min-height: 80vh; 177 border-radius: 12px; 178 } 179 180 .search-input-wrapper { 181 position: relative; 182 } 183 184 .search-input-wrapper input { 185 padding-right: 40px; 186 border-radius: 10px; 187 height: 39px; 188 border: none; 189 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 190 font-size: 14px; 191 } 192 193 .search-icon { 194 position: absolute; 195 right: 12px; 196 top: 50%; 197 transform: translateY(-50%); 198 color: #9CA3AF; 199 font-size: 16px; 200 cursor: pointer; 201 } 202 203 .search-box { 204 position: absolute; 205 z-index: 999; 206 top: 30px; 207 left: 60px; 208 width: 300px; 209 } 210 211 #search-result { 212 background: #ffffff; 213 border-radius: 10px; 214 margin-top: 12px; 215 max-height: 300px; 216 overflow-y: auto; 217 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 218 } 219 220 .filter-toggle { 221 position: absolute; 222 top: 30px; 223 left: 370px; 224 z-index: 999; 225 background: #ffffff; 226 padding: 8px 12px; 227 border-radius: 8px; 228 cursor: pointer; 229 font-size: 14px; 230 font-weight: 600; 231 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 232 } 233 234 .filter-circle { 235 display: inline-flex; 236 align-items: center; 237 justify-content: center; 238 background-color: #2563EB; 239 color: #ffffff; 240 font-size: 12px;
241 width: 20px; 242 height: 20px; 243 border-radius: 50%; 244 } 245 246 #filter-kota-wrapper, 247 #filter-tipe { 248 transition: all 0.3s ease; 249 } 250 251 #filter-panel { 252 position: absolute; 253 top: 80px; 254 left: 370px; 255 width: 300px; 256 max-height: 400px; 257 overflow-y: auto; 258 background: #ffffff; 259 border-radius: 10px; 260 padding: 15px; 261 z-index: 999; 262 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 263 } 264 265 #filter-panel input[type="checkbox"] { 266 appearance: none; 267 -webkit-appearance: none; 268 width: 18px; 269 height: 18px; 270 border: 2px solid #D1D5DB; 271 border-radius: 4px; 272 cursor: pointer; 273 position: relative; 274 transition: all 0.2s ease; 275 } 276 277 #filter-panel input[type="checkbox"]:checked { 278 background-color: #2eb841; 279 border-color: #2eb841; 280 } 281 282 #filter-panel input[type="checkbox"]:checked::after { 283 content: ""; 284 position: absolute; 285 left: 5px; 286 top: 1px; 287 width: 5px; 288 height: 10px; 289 border: solid white; 290 border-width: 0 2px 2px 0; 291 transform: rotate(45deg); 292 } 293 294 #filter-panel input[type="checkbox"]:hover { 295 border-color: #2eb841; 296 } 297 298 .legend-box { 299 position: absolute; 300 z-index: 999; 301 top: 30px; 302 right: 60px; 303 background: #ffffff; 304 padding: 10px 15px; 305 border-radius: 10px; 306 font-size: 14px; 307 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 308 } 309 310 .refresh-map { 311 position: absolute; 312 top: 30px; 313 left: 480px; 314 z-index: 999; 315 background: #ffffff; 316 padding: 8px 10px; 317 border-radius: 8px; 318 cursor: pointer; 319 box-shadow: 0 10px 30px rgba(0,0,0,0.1); 320 font-size: 14px; 321 display: flex; 322 align-items: center; 323 justify-content: center; 324 } 325 326 #info-card { 327 position: absolute; 328 z-index: 999; 329 top: 80px; 330 left: 60px; 331 width: 300px; 332 background: #ffffff; 333 border-radius: 12px; 334 padding: 15px; 335 box-shadow: 0 10px 30px rgba(0,0,0,0.1); 336 } 337 338 .search-item { 339 padding: 10px; 340 cursor: pointer; 341 } 342 343 .search-item:hover { 344 background: #f3f4f6; 345 } 346 347 .badge-pool { 348 background:#F5F5F5; 349 color:#000000; 350 font-weight: 600; 351 padding: 4px 12px; 352 font-size: 10px; 353 float: right; 354 } 355 356 .button-wa { 357 background-color: #F0FDF4; 358 color: #16A34A !important; 359 padding: 8px 16px; 360 border-radius: 12px !important; 361 box-shadow: none !important; 362 } 363 364 .button-maps { 365 background-color: #2563EB; 366 color: #ffffff !important; 367 padding: 8px 16px; 368 border-radius: 12px !important; 369 box-shadow: none !important; 370 } 371 372 #outlet-count-badge { 373 position: absolute; 374 bottom: 20px; 375 left: 50%; 376 transform: translateX(-50%); 377 z-index: 999; 378 background: #ffffff; 379 padding: 8px 16px; 380 border-radius: 999px; 381 font-weight: 600; 382 font-size: 14px; 383 box-shadow: 0 10px 30px rgba(0,0,0,0.1); 384 } 385 386 .icon-col { 387 width: 10%; 388 flex-shrink: 0; 389 } 390 391 .text-col { 392 flex: 1; 393 padding-right: 10px; 394 width: 62%; 395 } 396 397 .badge-col { 398 width: 28%; 399 flex-shrink: 0; 400 text-align: right; 401 } 402 403 @media(max-width:768px){ 404 .search-box { 405 left: 30px; 406 top: 10px; 407 } 408 409 .search-input-wrapper { 410 width: 54%; 411 } 412 413 .search-result { 414 width: 100%; 415 } 416 417 .filter-toggle { 418 width: 26%; 419 left: 200px; 420 top: 10px; 421 font-size: 12px; 422 } 423 424 #info-card, #filter-panel { 425 top: 60px; 426 left: 37px; 427 } 428 429 .refresh-map { 430 width: 10%; 431 left: 305px; 432 top: 10px; 433 } 434 435 .legend-box { 436 top: auto; 437 bottom: 20px; 438 left: 50%; 439 transform: translateX(-50%); 440 right: auto; 441 display: flex; 442 gap: 10px; 443 align-items: center; 444 width: 60%; 445 padding: 6px; 446 font-size: 12px; 447 } 448 449 #outlet-count-badge { 450 bottom: 60px; 451 font-size: 12px; 452 } 453 } 454 455 </style> 456 457 </head> 458 <body> 459 <!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 459-460
459 460<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
460GTM-K8Q3ZF46
vendor: 91 bytes, lines 460-462
460" 461 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 462
462<!-- End Google Tag Manager (noscript) --> 463 464 465 466 <!-- SCRIPTS --> 467 <!-- jquery --> 468
468<script src="https://www.banyumilitravel.id/default/banyumili/js/jquery-3.3.1.min.js?v=3.0"></script>
468 469 <!-- bootstrap tooltips --> 470
470<script src="https://www.banyumilitravel.id/default/banyumili/js/popper.min.js?v=3.0" ></script>
470 471 <!-- bootstrap --> 472
472<script src="https://www.banyumilitravel.id/default/banyumili/js/bootstrap.min.js?v=3.0"></script>
472 473 <!-- flatpickr --> 474
474<script src="https://www.banyumilitravel.id/default/banyumili/js/flatpickr.js?v=3.0"></script>
474 475
475<script type="text/javascript" src="https://www.banyumilitravel.id/global/js/flatpickr.id.js?v=3.0" ></script>
475 476 <!-- slimselect --> 477
477<script src="https://www.banyumilitravel.id/default/banyumili/js/slimselect.min.js?v=3.0" ></script>
477 478 <!-- filterinput --> 479
479<script src="https://www.banyumilitravel.id/default/banyumili/js/filterinput.js?v=3.0" ></script>
479 480
480<script src="https://www.banyumilitravel.id/global/js/moment.js?v=3.0" ></script>
480 481
481<script type="text/javascript" src="https://www.banyumilitravel.id/global/js/date-id.js?v=3.0"></script>
481 482 483
483<script type="text/javascript"> 484 function applyPcapital(root) { 485 var container = root || document; 486 var elements = container.querySelectorAll ? container.querySelectorAll('.pcapital') : []; 487 488 function titleCaseText(value) { 489 return value.toLowerCase().replace(/(^|[\s\-\/(])([a-z])/g, function(match, prefix, letter) { 490 return prefix + letter.toUpperCase(); 491 }); 492 } 493 494 function transformTextNodes(node) { 495 if (node.nodeType === 3) { 496 if (node.nodeValue.replace(/\s/g, '') !== '') { 497 node.nodeValue = titleCaseText(node.nodeValue); 498 } 499 return; 500 } 501 502 if (node.nodeType !== 1 || /^(script|style|textarea|input)$/i.test(node.nodeName)) { 503 return; 504 } 505 506 for (var i = 0; i < node.childNodes.length; i++) { 507 transformTextNodes(node.childNodes[i]); 508 } 509 } 510 511 for (var i = 0; i < elements.length; i++) { 512 transformTextNodes(elements[i]); 513 } 514 } 515 516 document.addEventListener("DOMContentLoaded", function() { 517 applyPcapital(); 518 519 $('#close-alert-copy').click(function(){ 520 $('#alert-copy').removeClass('d-block'); 521 }); 522 }); 523 524 function copyTeks(){ 525 var textToCopy = $("#kode-bayar").select().val(); 526 // navigator clipboard api needs a secure context (https) 527 if (navigator.clipboard && window.isSecureContext) { 528 // navigator clipboard api method' 529 $('#alert-copy').addClass('d-block'); 530 return navigator.clipboard.writeText(textToCopy); 531 } else { 532 // text area method 533 let textArea = document.createElement("textarea"); 534 textArea.value = textToCopy; 535 // make the textarea out of viewport 536 textArea.style.position = "fixed"; 537 textArea.style.left = "-999999px"; 538 textArea.style.top = "-999999px"; 539 document.body.appendChild(textArea); 540 textArea.focus(); 541 textArea.select(); 542 $('#alert-copy').addClass('d-block'); 543 return new Promise((res, rej) => { 544 // here the magic happens 545 document.execCommand('copy') ? res() : rej(); 546 textArea.remove(); 547 }); 548 } 549 } 550 551 function handleEmailClick(email) { 552 const s = encodeURIComponent("Hallo Banyumili"); 553 const b = encodeURIComponent("Saya ingin bertanya"); 554 555 const mailto = `mailto:${email}?subject=${s}&body=${b}`; 556 const gmailWeb = `https://mail.google.com/mail/?view=cm&fs=1&to=${email}&su=${s}&body=${b}`; 557 558 const ua = navigator.userAgent; 559 const isMobile = /Android|iPhone|iPad|iPod/i.test(ua); 560 const isChromeDesktop = ua.includes("Chrome") && !ua.includes("Mobile"); 561 const isEdgeDesktop = ua.includes("Edg") && !ua.includes("Mobile"); 562 563 // MOBILE â gunakan MAILTO (ini satu-satunya yang buka compose) 564 if (isMobile) { 565 window.location.href = mailto; 566 return; 567 } 568 569 // DESKTOP Chrome / Edge 570 if (isChromeDesktop || isEdgeDesktop) { 571 window.open(gmailWeb, "_blank"); 572 return; 573 } 574 575 // DESKTOP lain: mailto â fallback Gmail 576 window.location.href = mailto; 577 578 setTimeout(() => { 579 if (!document.hidden) window.open(gmailWeb, "_blank"); 580 }, 700); 581 } 582 </script>
582 583 584 585 <style> 586 .gap-6{ 587 gap:6px; 588 } 589 590 #download-apps { 591 border-radius: 6px; 592 padding: 4px 8px; 593 width: auto; 594 } 595</style> 596 597 <div class=" sticky-top mr-0 "> 598 599 <nav aria-label="Navigasi Utama" data-i18n-aria-label="navPrimaryAria" class="navbar navbar-expand-xl navbar-light bg-light " style="box-shadow: 0 0px 7px #505050cc;"> 600 <a class="navbar-brand ml-lg-5 d-flex" href="https://www.banyumilitravel.id"> 601 <div class="align-content-center"> 602 <img src="https://www.banyumilitravel.id/default/banyumili/images/icon/logo.png" class="img-fluid logo-navbar "> 603 </div> 604 </a> 605 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation" style="outline:none"> 606 <span class="navbar-toggler-icon"></span> 607 </button> 608 609 <div class="collapse navbar-collapse" id="navbarColor03"> 610 <ul class="navbar-nav mr-auto font-bold-o"> 611 <li class="nav-item ml-lg-2"> 612 <a target="_blank" href="https://www.banyumilitravel.id/download/app" 613 class="nav-link d-inline-block pointer cursor-pointer" 614 id="download-apps" 615 > 616 <i class="fa fa-mobile pr-1"></i> 617 <span class="pointer cursor-pointer" data-i18n="navDownloadApp">Download App</span> 618 </a> 619 </li> 620 </ul> 621 622 <ul class="navbar-nav ml-auto font-bold-o"> 623 624 625 <li class="nav-item 626 "> 627 <a class="nav-link 628 " 629 href="https://www.banyumilitravel.id" 630 data-i18n-id="Beranda" 631 data-i18n-en="Beranda">Beranda 632 </a> 633 </li> 634 <li class="nav-item 635 636 active 637 "> 638 <a class="nav-link 639 " 640 href="https://www.banyumilitravel.id/outlet" 641 data-i18n-id="Outlet" 642 data-i18n-en="Outlet">Outlet 643 </a> 644 </li> 645 <li class="nav-item 646 "> 647 <a class="nav-link 648 " 649 href="https://www.banyumilitravel.id/blog" 650 data-i18n-id="Blog" 651 data-i18n-en="Blog">Blog 652 </a> 653 </li> 654 <li class="nav-item 655 "> 656 <a class="nav-link 657 " 658 href="https://www.banyumilitravel.id/pembayaran" 659 data-i18n-id="Cara Bayar" 660 data-i18n-en="Cara Bayar">Cara Bayar 661 </a> 662 </li> 663 <li class="nav-item 664 "> 665 <a class="nav-link 666 " 667 href="https://www.banyumilitravel.id/paket/cekpaket" 668 data-i18n-id="Lacak Paket" 669 data-i18n-en="Lacak Paket">Lacak Paket 670 </a> 671 </li> 672 <li class="nav-item 673 "> 674 <a class="nav-link 675 " 676 href="https://www.banyumilitravel.id/kontak" 677 data-i18n-id="Kontak" 678 data-i18n-en="Kontak">Kontak 679 </a> 680 </li> 681 682 <form class="form-inline my-2 my-lg-0"> 683 <li class="nav-item order-2"> 684 <a href="https://www.banyumilitravel.id/masuk" class="nav-link ddaccount btn-masuk"> 685 <i class="fa fa-user-circle pr-2"></i>
686 <span data-i18n="navRegisterLogin">Daftar/Masuk</span> 687 </a> 688 </li> 689 690 <a class="nav-link btn-secondary text-white bubble-inline btn-sm my-2 my-sm-0 font-bold-o btn-tiket order-1 mr-3" 691 href="https://www.banyumilitravel.id/book/cekbook" 692 style="font-size: 1rem;"> 693 <i class="fas fa-ticket-alt pr-2" aria-hidden="true"></i><span data-i18n="navCheckTicket">Cek Tiket</span> 694 </a> 695 </ul> 696 </form> 697 </div> 698 </nav> 699 700 </div> 701 702 703<nav class="d-none d-lg-block nav-border" style="border-bottom: 2px solid #ebebeb;"> 704 <div class="container"> 705 <div class="d-flex"> 706 </div> 707 </div> 708</nav> 709 710 711 712<div class="modal fade dark-backdrop" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="logoutModal"> 713 <div class="modal-dialog modal-dialog-centered modal-sm" role="document"> 714 <div class="modal-content"> 715 <div class="modal-body text-center"> 716 <p class="pb-0 mb-0" data-i18n="logoutConfirmation">Yakin Ingin Keluar ?</p> 717 </div> 718 <div class="modal-footer border-0 mx-auto"> 719 <button class="btn btn-danger f0kom9 px-4 py-1" data-dismiss="modal" data-i18n="commonNo">Tidak</button> 720 <button class="btn btn-primary f0kom9 px-4 py-1" onclick="logout()" data-i18n="commonYes">Ya</button> 721 </div> 722 </div> 723 </div> 724</div> 725
726<script> 727 async function logout() { 728 try { 729 // ⿡ Panggil endpoint Laravel untuk hapus session backend 730 await fetch("https://www.banyumilitravel.id/logout", { 731 method: 'POST', 732 headers: { 733 'X-CSRF-TOKEN': '4BVSH96GAJ02llQcr35IXzT2Wws6sjv5R16xcWsn', 734 }, 735 }); 736 } catch (e) { 737 console.warn('Gagal logout backend (session Laravel), lanjut hapus di frontend.'); 738 } 739 740 // ⿢ Hapus semua cookie yang berkaitan dengan login 741 document.cookie = "tokenLoginMember=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; 742 document.cookie = "user_info_telp=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; 743 document.cookie = "user_info_login=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; 744 745 // ⿣ Bersihkan localStorage & sessionStorage 746 localStorage.clear(); 747 sessionStorage.clear(); 748 749 // ⿤ Redirect ke halaman login 750 window.location.replace("https://www.banyumilitravel.id/masuk"); 751 } 752</script>
752 753 754 <div class="container-fluid px-0" style="min-height: 80vh"> 755 <section class="pt-5 pb-4 text-center"> 756 <div class=""> 757 <h1 class="font-weight-bold fs-24 heading-title "><span data-i18n="outletPageTitle">Lokasi Outlet</span> Banyumili</h1> 758 <p class="text-muted" data-i18n="outletPageDescription">Cari outlet berdasarkan lokasi dan temukan pool fisik atau virtual point di dekatmu.</p> 759 </div> 760 </section> 761 762 763 <section class="pb-5"> 764 <div class="container-fluid position-relative px-4"> 765 <!-- SEARCH --> 766 <div class="search-box"> 767 <div class="search-input-wrapper"> 768 <input type="text" id="search" class="form-control" placeholder="Cari outlet..." data-i18n-placeholder="outletSearchPlaceholder"> 769 <span class="search-icon" id="search-icon"> 770 <img id="search-img" src="https://www.banyumilitravel.id/global/images/icon/ic-search.png" alt="" class="img-fluid mt-n1" width="15"> 771 </span> 772 </div> 773 <div id="search-result"></div> 774 </div> 775 776 <!-- FILTER BUTTON --> 777 <div class="filter-toggle" onclick="toggleFilter()"> 778 <img src="https://www.banyumilitravel.id/global/images/pool/setting.svg" alt="" class="img-fluid"> 779 <span data-i18n="outletFilter">Filter</span> <div class="filter-count filter-circle">0</div> 780 </div> 781 782 <!-- REFRESH --> 783 <div class="refresh-map" onclick="refreshMap()"> 784 <img src="https://www.banyumilitravel.id/global/images/pool/reload.png" alt="" class="img-fluid" width="20"> 785 </div> 786 787 <!-- FILTER PANEL --> 788 <div id="filter-panel" class="d-none"> 789 <div class="d-flex justify-content-between mb-2"> 790 <span class="fs-14 semi-bold"><span data-i18n="outletFilter">Filter</span> (<span class="filter-count">0</span>)</span> 791 <span id="reset-btn" onclick="resetFilter()" 792 class="text-danger fs-14 semi-bold" style="cursor:pointer; display:none;"> 793 <span data-i18n="outletReset">Reset</span> 794 </span> 795 </div> 796 797 <!-- TIPE --> 798 <div class="fs-14"> 799 <div onclick="toggleSection('tipe')" class="d-flex justify-content-between pointer mb-2"> 800 <span class="semi-bold" data-i18n="outletType">Tipe</span><span><i id="icon-tipe" class="fa fa-angle-up"></i></span> 801 </div> 802 <div id="filter-tipe"> 803 <div class="d-flex justify-content-between"> 804 <div> 805 <label><input type="checkbox" value="1"> <span data-i18n="outletVirtualPoint">Virtual Point</span></label> 806 </div> 807 <div> 808 <span id="count-virtual" class="text-muted"></span> 809 </div> 810 </div> 811 <div class="d-flex justify-content-between"> 812 <div> 813 <label><input type="checkbox" value="0"> <span data-i18n="outletPhysicalPool">Pool Fisik</span></label> 814 </div> 815 <div> 816 <span id="count-fisik" class="text-muted"></span> 817 </div> 818 </div> 819 </div> 820 </div> 821 822 <!-- KOTA --> 823 <div class="fs-14 mt-2"> 824 <hr> 825 <div onclick="toggleSection('kota')" class="d-flex justify-content-between pointer mb-2"> 826 <span class="semi-bold" data-i18n="outletCity">Kota</span><span><i id="icon-kota" class="fa fa-angle-up"></i></span> 827 </div> 828 <div id="filter-kota-wrapper"> 829 <div id="filter-kota"></div>
830 <div class="text-all mt-2 pointer fs-12" onclick="toggleAllKota()"></div> 831 </div> 832 </div> 833 </div> 834 835 <!-- LEGEND --> 836 <div class="legend-box"> 837 <span> 838 <img src="https://www.banyumilitravel.id/global/images/pool/fisik.svg" class="mt-n1" width="20"> <span data-i18n="outletPhysicalPool">Pool Fisik</span> 839 </span> 840 <span class="d-block d-lg-none text-muted">|</span> 841 <span> 842 <img src="https://www.banyumilitravel.id/global/images/pool/virtual.svg" width="20" class="mt-n1 ml-2"> <span data-i18n="outletVirtualPoint">Virtual Point</span> 843 </span> 844 </div> 845 846 <!-- MAP --> 847 <div id="map"></div> 848 849 <!-- SEO --> 850 <section class="seo-outlet d-none"> 851 <h2><span data-i18n="outletIn">Outlet di</span> Balikpapan</h2> 852 <h3>Balikpapan Bandara - Balikpapan</h3> 853 <h3>Balikpapan Kota - Balikpapan</h3> 854 <h2><span data-i18n="outletIn">Outlet di</span> Bontang</h2> 855 <h3>Bontang Simpang 3 Bontang - Bontang</h3> 856 <h2><span data-i18n="outletIn">Outlet di</span> Kutai Timur</h2> 857 <h3>Sangatta - Kutai Timur</h3> 858 <h2><span data-i18n="outletIn">Outlet di</span> Samarinda</h2> 859 <h3>Samarinda Bandara - Samarinda</h3> 860 <h3>Samarinda Kota - Samarinda</h3> 861 </section> 862 863 <!-- OUTLET COUNT --> 864 <div id="outlet-count-badge"> 865 <span id="total-outlet"></span> <span data-i18n="outletAvailable">Outlet Tersedia</span> 866 </div> 867 868 <!-- FLOATING CARD --> 869 <div id="info-card" class="d-none"></div> 870 </div> 871 </section> 872 873 </div> 874 875 876 <footer class="font-small new-page-footer pt-4 position-relative mycontainer"> 877 <div class="container px-xl-5 text-center text-md-left pt-3"> 878 <div class="row border-bottom-footer"> 879 <div class="col-xl-4 mb-3 mt-2"> 880 <img src="https://www.banyumilitravel.id/default/banyumili/images/icon/logo.png" alt="Logo" class="logo-footer mb-4"> 881 882 <a target="_blank" href="https://www.instagram.com/banyumilitravel" class="pb-2"> 883 <div class="d-flex align-items-center justify-content-center justify-content-md-start mb-2"> 884 <div class="mr-1 my-auto flex-shrink-0"> 885 <div class="icon-medsos"> 886 <img src="https://www.banyumilitravel.id/global/images/sosmed/instagram-eid.png" 887 class="img-fluid" 888 alt="icon" 889 width="36"> 890 </div> 891 </div> 892 <div class="footer-text text-center text-lg-left my-auto"> 893 banyumilitravel 894 </div> 895 </div> 896 </a> 897 <a target="_blank" href="https://www.facebook.com/banyumilitrans" class="pb-2"> 898 <div class="d-flex align-items-center justify-content-center justify-content-md-start mb-2"> 899 <div class="mr-1 my-auto flex-shrink-0"> 900 <div class="icon-medsos"> 901 <img src="https://www.banyumilitravel.id/global/images/sosmed/facebook-eid.png" 902 class="img-fluid" 903 alt="icon" 904 width="36"> 905 </div> 906 </div> 907 <div class="footer-text text-center text-lg-left my-auto"> 908 banyumilitrans 909 </div> 910 </div> 911 </a> 912 <a target="_blank" href="https://www.tiktok.com/@banyumilitravel" class="pb-2"> 913 <div class="d-flex align-items-center justify-content-center justify-content-md-start mb-2"> 914 <div class="mr-1 my-auto flex-shrink-0"> 915 <div class="icon-medsos"> 916 <img src="https://www.banyumilitravel.id/global/images/sosmed/tiktok-ei
916d.png" 917 class="img-fluid" 918 alt="icon" 919 width="36"> 920 </div> 921 </div> 922 <div class="footer-text text-center text-lg-left my-auto"> 923 @banyumilitravel 924 </div> 925 </div> 926 </a> 927 <a target="_blank" href="https://www.tiktok.com/@banyumilitravel" class="pb-2"> 928 <div class="d-flex align-items-center justify-content-center justify-content-md-start mb-2"> 929 <div class="mr-1 my-auto flex-shrink-0"> 930 <div class="icon-medsos"> 931 <img src="https://www.banyumilitravel.id/global/images/sosmed/youtube-eid.png" 932 class="img-fluid" 933 alt="icon" 934 width="36"> 935 </div> 936 </div> 937 <div class="footer-text text-center text-lg-left my-auto"> 938 @banyumilitravel 939 </div> 940 </div> 941 </a> 942 943 944 <div class="d-flex align-items-start justify-content-center justify-content-md-start mb-2"> 945 <div class="mr-1 flex-shrink-0"> 946 <img src="https://www.banyumilitravel.id/global/images/sosmed/location-eid.png" alt="icon" width="36"> 947 </div> 948 <div> 949 <p class="footer-text text-left mb-0"> 950 Jl. Karya Etam No. 12, Sangatta Utara, Kec. Sangatta Utara, Kabupaten Kutai Timur, Kalimantan Timur 75683 951 </p> 952 </div> 953 </div> 954 </div> 955 <div class="col-md-6 col-xl-2 mb-lg-0 mb-3 mt-2 pl-xl-2"> 956 <h5 class="footer-title pb-1" data-i18n="footerMainRoutes">Layanan Rute Utama</h5> 957 <ul class="list-group" style="list-style: none;"> 958 <li class="pb-2"> 959 <a href="https://www.banyumilitravel.id/blog/travel-sangatta" class="footer-text">Travel Sangatta</a> 960 </li> 961 <li class="pb-2"> 962 <a href="https://www.banyumilitravel.id/blog/travel-balikpapan" class="footer-text">Travel Balikpapan</a> 963 </li> 964 <li class="pb-2"> 965 <a href="https://www.banyumilitravel.id/blog/travel-samarinda" class="footer-text">Travel Samarinda</a> 966 </li> 967 <li class="pb-2"> 968 <a href="https://www.banyumilitravel.id/blog/travel-bontang" class="footer-text">Travel Bontang</a> 969 </li> 970 </ul> 971 </div> 972 <div class="col-md-6 col-xl-2 mb-lg-0 mb-3 mt-2 pl-xl-5"> 973 <h5 class="footer-title pb-1" data-i18n="footerOthers">Lainnya</h5> 974 <ul class="list-group" style="list-style: none;"> 975 <li class="pb-2"> 976 <a href="https://www.banyumilitravel.id/outlet" class="footer-text" data-i18n="navOutlet">Outlet</a> 977 </li> 978 <li class="pb-2"> 979 <a href="https://www.banyumilitravel.id/pembayaran" class="footer-text" data-i18n="footerPaymentGuide">Cara Bayar</a> 980 </li> 981 <li class="pb-2"> 982 <a href="https://www.banyumilitravel.id/kontak" class="footer-text" data-i18n="footerContact">Kontak</a> 983 </li> 984 <li class="pb-2"> 985 <a href="https://www.banyumilitravel.id/blog" class="footer-text" data-i18n="navBlog">Blog</a> 986 </li> 987 </ul> 988 </div> 989 <div class="col-md-6 col-xl-2 mb-lg-0 mb-3 mt-2"> 990 <h5 class="footer-title pb-1" data-i18n="footerCallCenter">Call Center</h5> 991 <ul class="list-group" style="list-style: none;"> 992 <li class="pb-2 footer-text"> 993 <a class="footer-text" 994 target="_blank" 995 href="https://wa.me/6282141864864"> 996 <div class="d-flex align-items-center justify-content-center justify-content-md-start"> 997 <div class="mr-1 align-content-center flex-shrink-0"> 998 <img src="https://www.banyumilitravel.id/global/images/sosmed/whatsapp-eid.png" 999 class="img-fluid" 1000 alt="icon" 1001 width="36"> 1002 </div> 1003 <div> 1004 1005 <p class="mb-0 footer-title" style="font-size:16px !important;"> 1006 Admin Sangatta 1007 </p> 1008 1009 <div class="my-auto"> 1010 082141864864 1011 </div> 1012 </div> 1013 </div> 1014 </a> 1015 </li> 1016 <li class="pb-2 footer-text"> 1017 <a class="footer-text" 1018 target="_blank" 1019 href="https://wa.me/6282141864864"> 1020 <div class="d-flex align-items-center justify-content-center justify-content-md-start"> 1021 <div class="mr-1 align-content-center flex-shrink-0"> 1022 <img src="https://www.banyumilitravel.id/global/images/sosmed/whatsapp-eid.png" 1023 class="img-fluid" 1024 alt="icon" 1025 width="36"> 1026 </div> 1027 <div> 1028 1029 <p class="mb-0 footer-title" style="font-size:16px !important;"> 1030 Admin Balik Papan 1031 </p> 1032 1033 <div class="my-auto"> 1034 082141864864 1035 </div> 1036 </div> 1037 </div> 1038 </a> 1039 </li> 1040 </ul> 1041 </div> 1042 <div class="col-md-6 col-xl-2 mb-lg-0 mb-3 mt-2 pl-xl-5"> 1043 <h5 class="footer-title pb-1" data-i18n="footerDownloadApp">Unduh Aplikasi</h5> 1044 <a href="https://play.google.com/store/apps/details?id=id.co.tbk.android.banyumili" target="_blank"> 1045 <img src="https://www.banyumilitravel.id/global/images/playstore.png" 1046 alt="" 1047 class="img-fluid pb-2" 1048 width="120"> 1049 </a> 1050 <br> 1051 <a href="https://apps.apple.com/app/banyumili/id6498587668" target="_blank"> 1052 <img src="https://www.banyumilitravel.id/global/images/appstore.png" 1053 alt="" 1054 class="img-fluid pb-2" 1055 width="120"> 1056 </a> 1057 <br> 1058 </div> 1059 </div> 1060 </div> 1061 <div class="container"> 1062 <div class="row"> 1063 <div class="col-12"> 1064 <h6 class="text-center font-bold-o py-4 footer-text-bottom mb-0"> 1065 © 2026 Banyumili. <span data-i18n="footerAllRightsReserved">Semua Hak Dilindungi Undang-Undang</span> 1066 <br>
1067 <span data-i18n="footerEmail">Email</span>: [email protected] 1068 </h6> 1069 </div> 1070 </div> 1071 </div> 1072</footer> 1073 1074 <div class="modal fade" id="modal-load" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="modal-load-label" aria-hidden="true"> 1075 <div class="modal-dialog modal-dialog-centered"> 1076 <div class="spinner-border m-auto text-light" role="status" style="width: 60px; height:60px;"> 1077 <span class="sr-only" data-i18n="commonLoading">Loading...</span> 1078 </div> 1079 </div> 1080</div> 1081
1082<script> 1083 function showLoadPage(){ 1084 $('#modal-load').modal({ 1085 show: true 1086 }) 1087 } 1088 1089 function hideLoadPage(){ 1090 $('#modal-load').modal('hide') 1091 } 1092 1093 function resetModalPagePadding(){ 1094 if ($('.modal.show').length === 0) { 1095 $('body').removeClass('modal-open').css('padding-right', ''); 1096 $('.fixed-top, .fixed-bottom, .is-fixed, .sticky-top').each(function(){ 1097 const element = $(this); 1098 const originalPaddingRight = element.data('padding-right'); 1099 const originalMarginRight = element.data('margin-right'); 1100 1101 if (originalPaddingRight !== undefined) { 1102 element.css('padding-right', originalPaddingRight).removeData('padding-right'); 1103 } 1104 1105 if (originalMarginRight !== undefined) { 1106 element.css('margin-right', originalMarginRight).removeData('margin-right'); 1107 } 1108 }); 1109 1110 $('.sticky-top.mr-0').each(function(){ 1111 this.style.removeProperty('padding-right'); 1112 this.style.removeProperty('margin-right'); 1113 }); 1114 $('.modal-backdrop').remove(); 1115 } 1116 } 1117 1118 $(window).on('pageshow', function(){ 1119 $('#modal-load').removeClass('show').hide(); 1120 resetModalPagePadding(); 1121 }); 1122 1123 $(document).on('hidden.bs.modal', function(){ 1124 resetModalPagePadding(); 1125 }); 1126</script>
1126 1127 1128 1129 1130 1131
1131<script src="https://www.banyumilitravel.id/global/js/leaflet.js"></script>
1131 1132
1132<script src="https://www.banyumilitravel.id/global/js/leaflet.markercluster.js"></script>
1132 1133
1133<script> 1134 function outletT(key) { 1135 return window.PortalI18n ? window.PortalI18n.t(key) : key; 1136 } 1137 1138 /* ================= DATA ================= */ 1139 let outlets = []; 1140 let selectedKota = []; 1141 1142 outlets.push({ 1143 ...{"id":"60","kode":"BPN","nama":"BALIKPAPAN BANDARA","telpon":"081223099991\t","no_whatsapp":"","jam_buka":"00:00","jam_tutup":"00:00","alamat":"JL. MARSMA. R. ISWAHYUDI.","patokan_alamat":"","url_map":"https:\/\/www.google.com\/maps\/place\/Bandar Udara Internasional Sultan Aji Muhammad Sulaiman Sepinggan Balikpapan\/@-1.2677976,116.8916437,17z\/data=!4m14!1m7!3m6!1s0x2df1472e0db8bd79:0x3c24197833beca60!2sBandar Udara Internasional Sultan Aji Muhammad Sulaiman Sepinggan Balikpapan!8m2!3d-1.2677976!4d116.894224!16zL20vMDc1MGZ0!3m5!1s0x2df1472e0db8bd79:0x3c24197833beca60!8m2!3d-1.2677976!4d116.894224!16zL20vMDc1MGZ0?entry=ttu","latitude":"-1.2677976","longitude":"116.894224","kota":"BALIKPAPAN","kode_pos":"76115","operasional_area":"","flag_bandara":1,"flag_agen":1,"flag_aktif":1,"flag_virtual_outlet":1,"flag_travel":0,"flag_paket":1,"img":"https:\/\/asmat.b-cdn.net\/BYM\/kota\/6471.jpg","img_outlet_base64":"","jam_operasional":"00:00-00:00","daftar_layanan":[],"rating":0,"jarak":""}, 1144 // override / normalisasi 1145 kota: "balikpapan", 1146 lat: -1.2677976, 1147 lng: 116.894224, 1148 flag_virtual_outlet: 1 1149 }); 1150 outlets.push({ 1151 ...{"id":"78","kode":"BPNKOTA","nama":"BALIKPAPAN KOTA","telpon":"081223099991","no_whatsapp":"","jam_buka":"00:00","jam_tutup":"00:00","alamat":"PVQ85VW DAMAI, KOTA BALIKPAPAN, KALIMANTAN TIMUR","patokan_alamat":"","url_map":"https:\/\/www.google.com\/maps\/place\/\/@-1.2620074,116.8646292,17z\/data=!4m6!1m5!3m4!2zMcKwMTUnNDMuMiJTIDExNsKwNTInMDEuOSJF!8m2!3d-1.2620074!4d116.8672041?hl=id","latitude":"-1.2620074","longitude":"116.8672041","kota":"BALIKPAPAN","kode_pos":"76115","operasional_area":"","flag_bandara":1,"flag_agen":0,"flag_aktif":1,"flag_virtual_outlet":1,"flag_travel":0,"flag_paket":1,"img":"https:\/\/asmat.b-cdn.net\/BYM\/kota\/6471.jpg","img_outlet_base64":"","jam_operasional":"00:00-00:00","daftar_layanan":[],"rating":0,"jarak":""}, 1152 // override / normalisasi 1153 kota: "balikpapan", 1154 lat: -1.2620074, 1155 lng: 116.8672041, 1156 flag_virtual_outlet: 1 1157 }); 1158 outlets.push({ 1159 ...{"id":"72","kode":"BTG","nama":"BONTANG SIMPANG 3 BONTANG","telpon":"082141864864","no_whatsapp":"","jam_buka":"06:00","jam_tutup":"21:00","alamat":"SIMPANG 3 BONTANG","patokan_alamat":"","url_map":"https:\/\/maps.app.goo.gl\/2RwJ1ccW49vcs4wM8","latitude":"0.1411319\u00b0","longitude":"117.4287445\u00b0","kota":"BONTANG","kode_pos":"512345","operasional_area":"","flag_bandara":1,"flag_agen":0,"flag_aktif":1,"flag_virtual_outlet":1,"flag_travel":0,"flag_paket":1,"img":"https:\/\/asmat.b-cdn.net\/BYM\/kota\/6474.jpg","img_outlet_base64":"","jam_operasional":"06:00-21:00","daftar_layanan":[],"rating":0,"jarak":""}, 1160 // override / normalisasi 1161 kota: "bontang", 1162 lat: 0.1411319, 1163 lng: 117.4287445, 1164 flag_virtual_outlet: 1 1165 }); 1166 outlets.push({ 1167 ...{"id":"57","kode":"SGT","nama":"SANGATTA","telpon":"082141864864\t","no_whatsapp":"","jam_buka":"00:00","jam_tutup":"00:00","alamat":"JL KARYA ETAM NO 52 RT 12, SANGATTA, KUTAI TIMUR ","patokan_alamat":"","url_map":"https:\/\/maps.app.goo.gl\/eNFTJAjZK8Q7EQUs5","latitude":"0.5005618","longitude":"117.5348091","kota":"KUTAI TIMUR","kode_pos":"75683","operasional_area":"","flag_bandara":1,"flag_agen":0,"flag_aktif":1,"flag_virtual_outlet":0,"flag_travel":0,"flag_paket":1,"img":"https:\/\/asmat.b-cdn.net\/BYM\/kota\/6404.jpg","img_outlet_base64":"","jam_operasional":"00:00-00:00","daftar_layanan":[],"rating":0,"jarak":""}, 1168 // override / normalisasi 1169 kota: "kutai timur", 1170 lat: 0.5005618, 1171 lng: 117.5348091, 1172 flag_virtual_outlet: 0 1173 }); 1174 outlets.push({ 1175 ...{"id":"66","kode":"SRI","nama":"SAMARINDA BANDARA","telpon":"","no_whatsapp":"","jam_buka":"00:00","jam_tutup":"00:00","alamat":"BANDARA AAP SAMARINDA","patokan_alamat":"","url_map":"Jl. Poros S
1175amarinda - Bontang, Sungai Siring, Kec. Samarinda Utara, Kota Samarinda, Kalimantan Timur 75119","latitude":"-0.3709861","longitude":"117.2570579","kota":"SAMARINDA","kode_pos":"75119","operasional_area":"","flag_bandara":1,"flag_agen":0,"flag_aktif":1,"flag_virtual_outlet":0,"flag_travel":1,"flag_paket":1,"img":"https:\/\/asmat.b-cdn.net\/BYM\/kota\/6472.jpg","img_outlet_base64":"","jam_operasional":"00:00-00:00","daftar_layanan":[],"rating":0,"jarak":""}, 1176 // override / normalisasi 1177 kota: "samarinda", 1178 lat: -0.3709861, 1179 lng: 117.2570579, 1180 flag_virtual_outlet: 0 1181 }); 1182 outlets.push({ 1183 ...{"id":"82","kode":"SRIKOTA","nama":"SAMARINDA KOTA","telpon":"082141864864","no_whatsapp":"","jam_buka":"00:00","jam_tutup":"00:00","alamat":"SAMARINDA KOTA","patokan_alamat":"","url_map":"https:\/\/maps.app.goo.gl\/BFeEcLSh8uqwiYNe8","latitude":"-0.502312","longitude":"117.1201332","kota":"SAMARINDA","kode_pos":"75263","operasional_area":"","flag_bandara":1,"flag_agen":0,"flag_aktif":1,"flag_virtual_outlet":1,"flag_travel":0,"flag_paket":1,"img":"https:\/\/asmat.b-cdn.net\/BYM\/kota\/6472.jpg","img_outlet_base64":"","jam_operasional":"00:00-00:00","daftar_layanan":[],"rating":0,"jarak":""}, 1184 // override / normalisasi 1185 kota: "samarinda", 1186 lat: -0.502312, 1187 lng: 117.1201332, 1188 flag_virtual_outlet: 1 1189 }); 1190 1191 // FILTER VALID COORDINATE 1192 outlets = outlets.filter(o => o.lat && o.lng); 1193 1194 // console.log("OUTLETS FINAL:", outlets); 1195 1196 updateTotalBadge(outlets.length); 1197 1198 function updateTotalBadge(count){ 1199 $('#total-outlet').text(count); 1200 } 1201 1202 1203 /* ================= MAP ================= */ 1204 var map = L.map('map', { 1205 zoomControl: false // matikan default 1206 }).setView([-6.9, 107.6], 10); 1207 1208 // pindah ke kanan bawah 1209 L.control.zoom({ 1210 position: 'bottomright' 1211 }).addTo(map); 1212 1213 L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.svg').addTo(map); 1214 1215 let markerCluster = L.markerClusterGroup({ 1216 iconCreateFunction: function(cluster) { 1217 let count = cluster.getChildCount(); 1218 1219 return L.divIcon({ 1220 html: `<div style=" 1221 background:#2563EB; 1222 color:#fff; 1223 border-radius:50%; 1224 width:40px; 1225 height:40px; 1226 display:flex; 1227 align-items:center; 1228 justify-content:center; 1229 font-weight:600; 1230 ">${count}</div>`, 1231 className: 'custom-cluster', 1232 iconSize: [40, 40] 1233 }); 1234 } 1235 }); 1236 1237 function renderMarkers(data){ 1238 markerCluster.clearLayers(); 1239 1240 let bounds = []; 1241 1242 data.forEach(item => { 1243 1244 let icon = L.icon({ 1245 iconUrl: item.flag_virtual_outlet 1246 ? 'https://www.banyumilitravel.id/global/images/pool/virtual.svg' 1247 : 'https://www.banyumilitravel.id/global/images/pool/fisik.svg', 1248 iconSize: [32, 40], 1249 iconAnchor: [16, 40], 1250 popupAnchor: [0, -35] 1251 }); 1252 1253 let marker = L.marker([item.lat, item.lng], {icon}); 1254 1255 marker.on('click', () => showCard(item)); 1256 1257 markerCluster.addLayer(marker); 1258 1259 bounds.push([item.lat, item.lng]); 1260 }); 1261 1262 map.addLayer(markerCluster); 1263 1264 if(bounds.length){ 1265 map.fitBounds(bounds); 1266 } 1267 } 1268 1269 renderMarkers(outlets); 1270 1271 /* ================= CARD ================= */ 1272 function showCard(item){ 1273 $('#info-card').removeClass('d-none').html(` 1274 <div class="d-flex justify-content-end mt-n2">
1275 <span onclick="closeDetailCard()" style="cursor:pointer">â</span> 1276 </div> 1277 <div class="d-flex justify-content-between mt-2"> 1278 <div> 1279 <p class="fs-14 mb-1 semi-bold"> 1280 <small class="text-muted">${item.kota ? toCapitalize(item.kota) : '-'}</small><br> 1281 ${item.nama ? toCapitalize(item.nama) : '-'} 1282 </p> 1283 </div> 1284 <div> 1285 <span class="badge badge-pill badge-pool mb-1"> 1286 ${item.flag_virtual_outlet ? outletT('outletVirtualPoint') : outletT('outletPhysicalPool')} 1287 </span> 1288 </div> 1289 </div> 1290 <p class="fs-14 mb-1 semi-bold"> 1291 <small class="text-muted">${outletT('outletAddress')}</small><br> 1292 ${item.alamat ? toCapitalize(item.alamat) : '-'} 1293 </p> 1294 <p class="fs-14 mb-1 semi-bold"> 1295 <small class="text-muted">${outletT('outletOperatingHours')}</small><br> 1296 ${outletT('outletOpen')} : ${item.jam_buka || '-'} <br> 1297 ${outletT('outletClose')} : ${item.jam_tutup || '-'} 1298 </p> 1299 <p class="fs-14 mb-1 semi-bold"> 1300 <small class="text-muted">${outletT('outletPostalCode')}</small><br> 1301 ${item.kode_pos || '-'} 1302 </p> 1303 <p class="fs-14 mb-1 semi-bold"> 1304 <small class="text-muted">${outletT('outletContact')}</small><br> 1305 ${item.telp || '-'} 1306 </p> 1307 <hr class="my-2"> 1308 <div class="d-flex gap-2 pt-2"> 1309 ${ (item.no_whatsapp && item.no_whatsapp !== '-') ? ` 1310 <a href="https://wa.me/${item.no_whatsapp.replace(/^0/, '62')}" target="_blank" 1311 class="btn button-wa fs-12 flex-fill text-center"> 1312 <i class="fab fa-whatsapp mr-1"></i> 1313 Whatsapp 1314 </a> 1315 ` : '' } 1316 ${ (item.lat && item.lng) ? ` 1317 <a href="https://maps.google.com?q=${item.lat},${item.lng}" target="_blank" 1318 class="btn button-maps fs-12 flex-fill text-center"> 1319 <img src="https://www.banyumilitravel.id/global/images/pool/map.svg" width="14" class="mr-1"> 1320 ${outletT('outletViewMaps')} 1321 </a> 1322 ` : '' } 1323 </div> 1324 `);
1325 map.setView([item.lat, item.lng], 15); 1326 $('#total-outlet').text('1'); 1327 } 1328 1329 function closeCard(){ $('#info-card').addClass('d-none'); } 1330 1331 function closeDetailCard() 1332 { 1333 closeCard(); 1334 resetFilter(); 1335 } 1336 1337 function toCapitalize(str){ 1338 return str.toLowerCase().replace(/\b\w/g, char => char.toUpperCase()); 1339 } 1340 1341 1342 /* ================= SEARCH ================= */ 1343 $('#search').on('keyup focus', function(){ 1344 closeCard(); 1345 1346 let val = $(this).val().toLowerCase(); 1347 if(val.length < 2){ $('#search-result').html(''); return; } 1348 1349 let result = outlets.filter(o => 1350 o.nama.toLowerCase().includes(val) || 1351 o.kota.toLowerCase().includes(val) 1352 ); 1353 1354 let html = `<div class="p-2 text-muted fs-12">${result.length} ${outletT('outletResultsFound')}</div>`; 1355 result.forEach(item=>{ 1356 html += ` 1357 <div class="search-item" onclick='selectSearch(${JSON.stringify(item)})'> 1358 <div class="d-flex align-items-start"> 1359 <div class="icon-col"> 1360 <img src="${ 1361 item.flag_virtual_outlet 1362 ? 'https://www.banyumilitravel.id/global/images/pool/virtual.svg' 1363 : 'https://www.banyumilitravel.id/global/images/pool/fisik.svg' 1364 }" width="20"> 1365 </div> 1366 <div class="text-col"> 1367 <p class="fs-14 mb-0 semi-bold"> 1368 ${item.nama ? toCapitalize(item.nama) : '-'}<br> 1369 <small class="text-muted"> 1370 ${item.kota ? toCapitalize(item.kota) : '-'} 1371 </small> 1372 </p> 1373 </div> 1374 <div class="badge-col"> 1375 <span class="badge badge-pill badge-pool"> 1376 ${item.flag_virtual_outlet ? outletT('outletVirtualPoint') : outletT('outletPhysicalPool')} 1377 </span> 1378 </div> 1379 </div> 1380 </div> 1381 <hr class="my-0">`; 1382 }); 1383 1384 $('#search-result').html(html); 1385 }); 1386 1387 function selectSearch(item){ 1388 showCard(item); 1389 $('#search-result').html(''); 1390 } 1391 1392 // INPUT DETECTION 1393 $('#search').on('input', function(){ 1394 let val = $(this).val(); 1395 1396 if(val.length > 0){ 1397 $('#search-img').attr('src', 'https://www.banyumilitravel.id/global/images/icon/ic-close.png'); 1398 $('#search-icon').css('cursor', 'pointer'); 1399 } else { 1400 $('#search-img').attr('src', 'https://www.banyumilitravel.id/global/images/icon/ic-search.png'); 1401 $('#search-icon').css('cursor', 'default'); 1402 } 1403 }); 1404 1405 // CLICK ICON 1406 $('#search-icon').on('click', function(){ 1407 let val = $('#search').val(); 1408 1409 if(val.length > 0){ 1410 $('#search').val(''); 1411 1412 // kosongin result 1413 $('#search-result').html(''); 1414 1415 // reset map 1416 renderMarkers(outlets); 1417 updateTotalBadge(outlets.length); 1418 1419 // trigger ulang biar icon balik otomatis 1420 $('#search').trigger('input').focus(); 1421 } 1422 }); 1423 1424 1425 /* ================= FILTER ================= */ 1426 let kotaCount={}, tipeCount={0:0,1:0}; 1427 1428 outlets.forEach(o=>{ 1429 kotaCount[o.kota]=(kotaCount[o.kota]||0)+1; 1430 tipeCount[o.flag_virtual_outlet]++; 1431 }); 1432 1433 $('#count-virtual').text(tipeCount[1]); 1434 $('#count-fisik').text(tipeCount[0]); 1435 1436 let showAllKota=false; 1437 1438 function renderKota(){ 1439 let keys = Object.keys(kotaCount); 1440 let list = showAllKota ? keys : keys.slice(0,4); 1441 1442 let html=''; 1443 1444 list.forEach(k=>{ 1445 let checked = selectedKota.includes(k) ? 'checked' : ''; 1446 1447 html+=` 1448 <div class="d-flex justify-content-between"> 1449 <div> 1450 <label> 1451 <input type="checkbox" class="filter-kota" value="${k}" ${checked}> 1452 ${k ? toCapitalize(k) : '-'} 1453 </label> 1454 </div> 1455 <div>
1456 <span class="text-muted">${kotaCount[k]}</span> 1457 </div> 1458 </div>`; 1459 }); 1460 1461 $('#filter-kota').html(html); 1462 1463 // update text toggle 1464 if(showAllKota){ 1465 $('.text-all').text(outletT('outletShowLess')); 1466 } else { 1467 $('.text-all').text(`${outletT('outletShowAll')} (${keys.length})`); 1468 } 1469 } 1470 renderKota(); 1471 1472 function toggleAllKota(){ 1473 showAllKota = !showAllKota; 1474 renderKota(); 1475 } 1476 1477 function toggleFilter(){ $('#filter-panel').toggleClass('d-none'); } 1478 1479 function toggleSection(type){ 1480 let el = $('#filter-' + type); 1481 let icon = $('#icon-' + type); 1482 1483 if(type === 'kota'){ 1484 el = $('#filter-kota-wrapper'); 1485 } 1486 1487 el.toggle(); 1488 1489 if(el.is(':visible')){ 1490 icon.removeClass('fa-angle-down').addClass('fa-angle-up'); 1491 } else { 1492 icon.removeClass('fa-angle-up').addClass('fa-angle-down'); 1493 } 1494 } 1495 1496 function applyFilter(){ 1497 closeCard(); 1498 1499 let tipe = []; 1500 $('#filter-tipe input:checked').each(function(){ 1501 tipe.push($(this).val()); 1502 }); 1503 1504 let kota = selectedKota; 1505 1506 let filtered = outlets.filter(o=>{ 1507 return (!tipe.length || tipe.includes(String(o.flag_virtual_outlet))) && 1508 (!kota.length || kota.includes(o.kota)); 1509 }); 1510 1511 renderMarkers(filtered); 1512 updateTotalBadge(filtered.length); 1513 } 1514 1515 $(document).on('change','#filter-panel input',function(){ 1516 applyFilter(); 1517 updateFilterCount(); 1518 }); 1519 1520 $(document).on('change','.filter-kota', function(){ 1521 selectedKota = $('.filter-kota:checked').map(function(){ 1522 return $(this).val(); 1523 }).get(); 1524 1525 applyFilter(); 1526 updateFilterCount(); 1527 }); 1528 1529 function resetFilter(){ 1530 $('#filter-panel input').prop('checked', false); 1531 1532 selectedKota = []; 1533 1534 renderMarkers(outlets); 1535 updateTotalBadge(outlets.length); 1536 1537 updateFilterCount(); 1538 } 1539 1540 $(document).on('click', function(e){ 1541 if(!$(e.target).closest('#filter-panel, .filter-toggle').length){ 1542 $('#filter-panel').addClass('d-none'); 1543 } 1544 }); 1545 1546 function updateFilterCount(){ 1547 let tipeCount = $('#filter-tipe input:checked').length; 1548 let kotaCount = selectedKota.length; 1549 1550 let total = tipeCount + kotaCount; 1551 1552 $('.filter-count').text(total); 1553 1554 if(total > 0){ 1555 $('#reset-btn').show(); 1556 } else { 1557 $('#reset-btn').hide(); 1558 } 1559 } 1560 1561 function refreshMap(){ 1562 // reset checkbox UI 1563 $('#filter-panel input').prop('checked', false); 1564 selectedKota = []; 1565 1566 // reset search 1567 $('#search').val(''); 1568 $('#search-result').html(''); 1569 1570 // reset card 1571 closeCard(); 1572 1573 // reset filter UI (count + reset btn) 1574 updateFilterCount(); 1575 1576 // reset marker (SEMUA) 1577 renderMarkers(outlets); 1578 1579 // reset badge 1580 updateTotalBadge(outlets.length); 1581 1582 $('.outlet-classic-city').removeClass('active'); 1583 $('.outlet-classic-city[data-city=""]').addClass('active'); 1584 } 1585 1586 $(document).on('click', '.outlet-classic-city', function(){ 1587 let city = String($(this).attr('data-city') || '').toLowerCase(); 1588 1589 $('#filter-panel input').prop('checked', false); 1590 selectedKota = city ? [city] : []; 1591 1592 renderKota(); 1593 applyFilter(); 1594 updateFilterCount(); 1595 1596 $('.outlet-classic-city').removeClass('active'); 1597 $(this).addClass('active'); 1598 1599 }); 1600 1601 document.addEventListener('languageChanged', function () { 1602 renderKota(); 1603 closeCard(); 1604 }); 1605 </script>
1605 1606 1607
1607<script> 1608 window.PORTAL_LANGUAGE = "id"; 1609 </script>
1609 1610
1610<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/23.7.6/i18next.min.js"></script>
1610 1611
1611<script src="https://www.banyumilitravel.id/locales/default.js?v=3.0"></script>
1611 1612 1613 </body> 1614</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.