{"id":3539,"date":"2024-03-01T08:55:59","date_gmt":"2024-03-01T08:55:59","guid":{"rendered":"https:\/\/epictripasia.com\/?page_id=3539"},"modified":"2024-03-03T03:31:59","modified_gmt":"2024-03-03T03:31:59","slug":"bali-trailblazer-adventure-map","status":"publish","type":"page","link":"https:\/\/epictripasia.com\/en\/maps\/bali-trailblazer-adventure-map\/","title":{"rendered":"BALI TRAILBLAZER ADVENTURE MAP"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Directions from Hanoi to Ho Chi Minh City<\/title>\n    <script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.7.0\/mapbox-gl.js\"><\/script>\n    <link href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.7.0\/mapbox-gl.css\" rel=\"stylesheet\">\n    <script src=\"https:\/\/unpkg.com\/html2canvas@0.5.0-beta4\/dist\/html2canvas.min.js\"><\/script>\n\n    <style>\n#wa {\n    display: none !important;\n}\n\/* Set a specific height for the map container *\/\n#map {\n    height: 100vh;\n    width:70%;\n}\n#wrap{\ndisplay:flex;\njustify-content:center;\nalign-items:center;\n}\n\n.numbered-marker{\nwidth:0; height:0;}\n\n.numbered-marker  span {\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  box-sizing:border-box;\n  width: 30px;\n  height: 30px;\n  color:#fff;\n  background: #693;\n  border:solid 2px;\n  border-radius: 0 70% 70%;\n  box-shadow:0 0 2px #000;\n  cursor: pointer;\n  transform-origin:0 0;\n  transform: rotateZ(-135deg);\n}\n.numbered-marker b{\ntransform: rotateZ(135deg)}\n\n\n\/* Style for the itinerary *\/\n#itinerary-container {\n    max-width: 400px;\n    margin: 20px;\n    padding: 10px;\n    border: 1px solid #ccc;\n    border-radius: 5px;\n    background-color: #f9f9f9;\n}\n\n.itinerary-item {\n    display: flex;\n    align-items: center;\n    margin-bottom: 10px;\n}\n\n.itinerary-number {\n    margin-right: 10px;\n    font-weight: bold;\n}\n    <\/style>\n<\/head>\n<body>\n\n\n    <!-- Map container -->\n<div id=\"wrap\">\n  <div id=\"itinerary\">\n    <div class=\"tab-content\">\n      <div\n        id=\"nb-2-configurations\"\n        class=\"nb-2-configurations nb-configurations\"\n        style=\"display: block\"\n      >\n        <div class=\"wte-itinerary-header-wrapper\">\n          <div class=\"wp-travel-engine-itinerary-header\">\n            <h2 class=\"wpte-itinerary-title\">Itinerary<\/h2>\n            <div class=\"aib-button-toggle toggle-button expand-all-button\">\n              <label for=\"itinerary-toggle-button\" class=\"aib-button-label\"\n                >Expand all<\/label\n              >\n              <input\n                id=\"itinerary-toggle-button\"\n                type=\"checkbox\"\n                class=\"checkbox\"\n                checked=\"\"\n              \/>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"post-data itinerary wte-trip-itinerary-v2\">\n          <div class=\"itinerary-row active\">\n            <div class=\"wte-itinerary-head-wrap\">\n              <div class=\"title\">Day 1 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> ARRIVAL IN DENPASAR \u2013 SIDEMEN <\/span>\n                <\/div>\n              <\/a>\n            <\/div>\n            <style id=\"itinerary-content-show\">\n              .itinerary-content {\n                disply: block !important;\n              }\n            <\/style>\n            <div class=\"itinerary-content show\" style=\"display: block\">\n              <div class=\"content\">\n                <p>\n                  Arrival at Denpasar airport and welcome by your guide. Direct\n                  transfer to your hotel in Sidemen.<br \/>\n                  Overnight in Sidemen.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"itinerary-row active\">\n            <div class=\"wte-itinerary-head-wrap\">\n              <div class=\"title\">Day 2 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> SIDEMEN \u2013 TIRTAGANGGA \u2013 TENGANAN \u2013 BESAKIH <\/span>\n                <\/div>\n              <\/a>\n            <\/div>\n            <style id=\"itinerary-content-show\">\n              .itinerary-content {\n                disply: block !important;\n              }\n            <\/style>\n            <div class=\"itinerary-content show\" style=\"display: block\">\n              <div class=\"content\">\n                <p>\n                  Breakfast at hotel. Start the day with an exploration of the\n                  eastern wonders of the island, beginning with the enchanting\n                  Tirta Gangga, a former royal palace boasting spring-fed\n                  swimming pools built in the late 1940s. Next, immerse yourself\n                  in the unique culture of the Tenganan village, the indigenous\n                  abode of Bali. Renowned for its authentic textiles\n                  (double-ikat) and intricate handicrafts, the village offers a\n                  cultural feast. Savor a delicious lunch at a local\n                  restaurant.<br \/>\n                  In the afternoon, delve into the spiritual ambiance of\n                  Besakih, the largest temple in Bali, nestled on the slopes of\n                  the majestic Agung Volcano.<br \/>\n                  Overnight in Sidemen.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"itinerary-row active\">\n            <div class=\"wte-itinerary-head-wrap\">\n              <div class=\"title\">Day 3 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> PENGELIPURAN \u2013 KINTAMANI \u2013 TIRTA EMPUL \u2013 UBUD <\/span>\n                <\/div>\n              <\/a>\n            <\/div>\n            <style id=\"itinerary-content-show\">\n              .itinerary-content {\n                disply: block !important;\n              }\n            <\/style>\n            <div class=\"itinerary-content show\" style=\"display: block\">\n              <div class=\"content\">\n                <p>\n                  Embark on a morning journey to Penglipuran, a village famed\n                  for its exquisite doors and authentic Balinese architecture.\n                  Continue to Kintamani for a panoramic view of the active Batur\n                  volcano, followed by lunch at a local restaurant with Mt Batur\n                  as your backdrop.<br \/>\n                  In the afternoon, you will take the road to reach the temple\n                  of Tirta Empul and its sacred water springs. Hindus come to\n                  purify themselves by bathing in the pools and making offerings\n                  to the springs. Transfer to your hotel in Ubud.<br \/>\n                  Overnight in Ubud.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"itinerary-row active\">\n            <div class=\"wte-itinerary-head-wrap\">\n              <div class=\"title\">Day 4 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> DANCE BARONG \u2013 BATUAN \u2013 GOA GAJAH <\/span>\n                <\/div>\n              <\/a>\n            <\/div>\n            <style id=\"itinerary-content-show\">\n              .itinerary-content {\n                disply: block !important;\n              }\n            <\/style>\n            <div class=\"itinerary-content show\" style=\"display: block\">\n              <div class=\"content\">\n                <p>\n                  Breakfast at the hotel. Today we will participate in a\n                  cultural journey starting with the captivating Barong dance in\n                  Batubulan, portraying the timeless battle between good and\n                  evil. Immerse yourself in the essence of Balinese life with a\n                  visit to a traditional house in Singapadu and the distinctive\n                  red-bricked Batuan temple. Explore the mystical Goa Gajah, the\n                  elephant god&#8217;s cave, and savor a delicious lunch at a local\n                  restaurant. End your day with a visit to the majestic Royal\n                  Palace, delving into the rich heritage of Bali.<br \/>\n                  Overnight in Ubud.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"itinerary-row active\">\n            <div class=\"wte-itinerary-head-wrap\">\n              <div class=\"title\">Day 5 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> UBUD \u2013 LOVINA <\/span>\n                <\/div>\n              <\/a>\n            <\/div>\n            <style id=\"itinerary-content-show\">\n              .itinerary-content {\n                disply: block !important;\n              }\n            <\/style>\n            <div class=\"itinerary-content show\" style=\"display: block\">\n              <div class=\"content\">\n                <p>\n                  Explore the regal Pura Taman Ayun, a temple steeped in history\n                  since 1643, adorned with three majestic shrines dedicated to\n                  Shiva. Traverse the UNESCO-listed Jatiluwih rice fields and\n                  relish a delightful lunch at a local restaurant. Journey to\n                  the highlands of Bedugul, exploring the vibrant fruit and\n                  vegetable market in Candikuning. Along the shores of Lake\n                  Bratan, be captivated by the enchanting Pura Ulun Danu temple,\n                  where the goddess of the lake is revered in the towering\n                  islets&#8217; grandeur. Transfer to your hotel in Lovina.<br \/>\n                  Overnight in Lovina.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"itinerary-row active\">\n            <div class=\"wte-itinerary-head-wrap\">\n              <div class=\"title\">Day 6 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> LOVINA \u2013 NUSA DUA <\/span>\n                <\/div>\n              <\/a>\n            <\/div>\n            <style id=\"itinerary-content-show\">\n              .itinerary-content {\n                disply: block !important;\n              }\n            <\/style>\n            <div class=\"itinerary-content show\" style=\"display: block\">\n              <div class=\"content\">\n                <p>\n                  Embark on a magical morning sea journey to witness dolphins in\n                  their natural habitat from a traditional canoe, setting the\n                  tone for an enchanting day. Savor a delightful breakfast at\n                  the hotel before venturing to the village of Banjar, where a\n                  Buddhist temple and invigorating hot springs await\n                  exploration. As the day unfolds, immerse yourself in the\n                  mystical atmosphere of Tanah Lot, a sea temple perched on a\n                  rocky peak, guarded by sacred serpents and offering\n                  breathtaking views of the waves below. Transfer to your hotel\n                  in Nusa Dua<br \/>\n                  Overnight in Nusa Dua.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"itinerary-row active\">\n            <div class=\"wte-itinerary-head-wrap\">\n              <div class=\"title\">Day 7 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> NUSA DUA FREE DAY <\/span>\n                <\/div>\n              <\/a>\n            <\/div>\n            <style id=\"itinerary-content-show\">\n              .itinerary-content {\n                disply: block !important;\n              }\n            <\/style>\n            <div class=\"itinerary-content show\" style=\"display: block\">\n              <div class=\"content\">\n                <p>\n                  Free day to relax.<br \/>\n                  Overnight in Nusa Dua.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"itinerary-row active\">\n            <div class=\"wte-itinerary-head-wrap\">\n              <div class=\"title\">Day 8 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> NUSA DUA FREE DAY <\/span>\n                <\/div>\n              <\/a>\n            <\/div>\n            <style id=\"itinerary-content-show\">\n              .itinerary-content {\n                disply: block !important;\n              }\n            <\/style>\n            <div class=\"itinerary-content show\" style=\"display: block\">\n              <div class=\"content\">\n                <p>\n                  Free day to relax.<br \/>\n                  Overnight in Nusa Dua.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"itinerary-row active\">\n            <div class=\"wte-itinerary-head-wrap\">\n              <div class=\"title\">Day 9 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> NUSA DUA \u2013 DEPARTURE <\/span>\n                <\/div>\n              <\/a>\n            <\/div>\n            <style id=\"itinerary-content-show\">\n              .itinerary-content {\n                disply: block !important;\n              }\n            <\/style>\n            <div class=\"itinerary-content show\" style=\"display: block\">\n              <div class=\"content\">\n                <p>Transfer to the airport for the next destination.<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        <script>\n          (function () {\n            var toggleTab = function (row, force = null) {\n              var content = row.querySelector(\".itinerary-content\");\n              var toggler = row.querySelector(\".accordion-tabs-toggle\");\n              var condition =\n                force === null ? !toggler.classList.contains(\"active\") : force;\n              var height = content.scrollHeight;\n              content.classList.toggle(\"active\", condition);\n              if (condition) content.style.maxHeight = height + \"px\";\n              else content.style.maxHeight = \"0px\";\n              toggler.classList.toggle(\"active\", condition);\n            };\n\n            var handleToggleClick = function (row) {\n              return function (event) {\n                var target = event.target;\n                if (!!target.closest(\".wte-itinerary-head-wrap\")) {\n                  toggleTab(row);\n                }\n              };\n            };\n\n            var setContentHeight = function (row) {\n              var content = row.querySelector(\".itinerary-content\");\n              var scrollHeight = content.scrollHeight;\n              if (content.classList.contains(\"active\"))\n                content.style.maxHeight = scrollHeight + \"px\";\n              else content.style.maxHeight = \"0px\";\n            };\n\n            var wrapper = document.querySelector(\".wte-trip-itinerary-v2\");\n            if (wrapper) {\n              var expandall = document.getElementById(\n                \"itinerary-toggle-button\"\n              );\n              var rows = wrapper.querySelectorAll(\".itinerary-row\");\n              if (expandall) {\n                expandall.addEventListener(\"change\", function () {\n                  if (rows)\n                    rows.forEach((row) => {\n                      toggleTab(row, this.checked);\n                    });\n                });\n              }\n              if (rows) {\n                rows.forEach(function (row) {\n                  \/\/ setContentHeight(row)\n                  row.addEventListener(\"click\", handleToggleClick(row));\n                });\n              }\n            }\n          })();\n        <\/script>\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"wrapper-map\">\n    <div id=\"itinerary-container\"><\/div>\n    <div id=\"map\"><\/div>\n  <\/div>\n<\/div>\n\n    <script>\n        \/\/ Replace 'YOUR_MAPBOX_ACCESS_TOKEN' with your actual Mapbox access token\n        mapboxgl.accessToken = 'pk.eyJ1IjoibmlnaHRtYXJlc3VyZiIsImEiOiJjazFjMnRjNHYydGN5M25wa2Y4cXkwcWNyIn0.EFUSe85Grl7ptScTOtJHoA';\n\n        \/\/ Create a map centered on Hanoi\n        const map = new mapboxgl.Map({\n            container: 'map',\n            style: 'mapbox:\/\/styles\/mapbox\/streets-v11',\n            center: [115.2195, -8.6500],\n            zoom: 4\n        });\n\n        \/\/ Add navigation control to the map\n        map.addControl(new mapboxgl.NavigationControl());\n\n        \/\/ Function to create a popup with the location name and remove the close button\n        function createPopup(locationName, number) {\n            return new mapboxgl.Popup({ offset: 25, closeButton: false })\n                .setHTML(`<h3>${locationName}<\/h3>`);\n        }\n\n        \/\/ Add numbered markers for Dong Hoi, Phong Nha, Hue, \nconst markers = [\n    [115.2195, -8.6500, 'Denpasar'],       \/\/ Denpasar\n    [115.3148, -8.5349, 'Sidemen'],        \/\/ Sidemen\n    [115.5828, -8.4014, 'Tirtagangga'],    \/\/ Tirtagangga\n    [115.4693, -8.4553, 'Tenganan'],       \/\/ Tenganan\n    [115.4457, -8.3436, 'Besakih'],        \/\/ Besakih\n    [115.3546, -8.3485, 'Penglipuran'],    \/\/ Penglipuran\n    [115.3806, -8.2420, 'Kintamani'],      \/\/ Kintamani\n    [115.3193, -8.4156, 'Tirta Empul'],   \/\/ Tirta Empul\n    [115.2637, -8.4971, 'Ubud'],           \/\/ Ubud\n    [115.2331, -8.5396, 'Barong'],         \/\/ Barong\n    [115.2872, -8.6003, 'Batuan'],         \/\/ Batuan\n    [115.2916, -8.5124, 'Goa Gajah'],      \/\/ Goa Gajah\n    [115.2637, -8.4971, 'Ubud'],           \/\/ Ubud (again)\n    [115.0506, -8.1844, 'Lovina'],        \/\/ Lovina\n    [115.2250, -8.7977, 'Nusa Dua']       \/\/ Nusa Dua\n];\n\n\n\n\n        markers.forEach((markerData, index) => {\n            const markerElement = document.createElement('div');\n            markerElement.className = 'numbered-marker';\n            markerElement.innerHTML = `<span class=\"marker-number\"><b>${index + 1}<\/b><\/span>`;\n            \n            const marker = new mapboxgl.Marker(markerElement)\n                .setLngLat([markerData[0], markerData[1]])\n                .addTo(map);\n\n            marker.setPopup(createPopup(markerData[2], index + 1)).addTo(map);\n        });\n\n        const waypoints = markers.map(marker => ({\n            coordinates: [marker[0], marker[1]],\n            markerName: marker[2]\n        }));\n\n        \/\/ Use Mapbox Directions API to get route information\n        const directionsRequest = 'https:\/\/api.mapbox.com\/directions\/v5\/mapbox\/driving\/' +\n            waypoints.map(waypoint => `${waypoint.coordinates[0]},${waypoint.coordinates[1]}`).join(';') +\n            `?steps=true&geometries=geojson&access_token=${mapboxgl.accessToken}`;\n\n\n        fetch(directionsRequest)\n            .then(response => response.json())\n            .then(data => {\n                console.log(data); \/\/ Log the API response to the console\n                \/\/ Draw the route on the map\n                map.addSource('route', {\n                    'type': 'geojson',\n                    'data': {\n                        'type': 'Feature',\n                        'properties': {},\n                        'geometry': data.routes[0].geometry\n                    }\n                });\n\n                map.addLayer({\n                    'id': 'route',\n                    'type': 'line',\n                    'source': 'route',\n                    'layout': {\n                        'line-join': 'round',\n                        'line-cap': 'round'\n                    },\n                    'paint': {\n                        'line-color': '#3887be',\n                        'line-width': 5\n                    }\n                });\n            })\n            .catch(error => console.error('Error fetching directions:', error));\n\n        \/\/ Create the itinerary HTML\n        const itineraryContainer = document.getElementById('itinerary-container');\n        waypoints.forEach((waypoint, index) => {\n            const itineraryItem = document.createElement('div');\n            itineraryItem.className = 'itinerary-item';\n\n            const itineraryNumber = document.createElement('div');\n            itineraryNumber.className = 'numbered-marker';\n            itineraryNumber.innerHTML= `<span class=\"marker-number\"><b>${index + 1}<\/b><\/span>`;\n            itineraryNumber.style.marginLeft='1rem';\n            itineraryNumber.style.marginTop='2rem';\n            itineraryNumber.style.marginRight='2rem';\n            const itineraryText = document.createElement('div');\n            itineraryText.textContent = `${waypoint.markerName}`;\n\n            itineraryItem.appendChild(itineraryNumber);\n            itineraryItem.appendChild(itineraryText);\n            itineraryContainer.appendChild(itineraryItem);\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Directions from Hanoi to Ho Chi Minh City Itinerary Expand all Day 1 : ARRIVAL IN DENPASAR \u2013 SIDEMEN Arrival at Denpasar airport and welcome by your guide. Direct transfer &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2984,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-3539","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/comments?post=3539"}],"version-history":[{"count":3,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3539\/revisions"}],"predecessor-version":[{"id":3656,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3539\/revisions\/3656"}],"up":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/2984"}],"wp:attachment":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/media?parent=3539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}