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 \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> Full 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 After breakfast, we will have a captivating journey to the Ban\n Ann Elephant and Jewelry Field. Along the way, discover the\n renowned Ban Phon Nom village, known for its skilled weavers\n with a historical connection to Laos’ royal past. Explore the\n monument to Henri Mouhot, the French explorer who uncovered\n Angkor Wat. Delve into the world of elephants at the camp,\n learning about their origin and living conditions. Feed these\n majestic creatures with vegetables and, if inclined, enjoy a\n scenic hour-long elephant ride. After this enriching\n experience, return to the hotel in Luang Prabang for a\n leisurely exploration of the city at your own pace.\n <\/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: [102.1350, 19.8864],\n zoom: 7\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 [102.1350, 19.8864, 'Luang Prabang'],\n [102.4492, 19.7492, 'Kuangsi Waterfall'],\n [102.4543, 19.7435, 'Ban Thapene'],\n [102.2283, 19.8756, 'Ban Ann Elephant'],\n [102.1350, 19.8864, 'Luang Prabang']\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 : Full Day After breakfast, we will have a captivating journey to the Ban Ann Elephant and … <\/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-3434","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3434","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=3434"}],"version-history":[{"count":5,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3434\/revisions"}],"predecessor-version":[{"id":6678,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3434\/revisions\/6678"}],"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=3434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3434,"date":"2024-02-29T09:52:41","date_gmt":"2024-02-29T09:52:41","guid":{"rendered":"https:\/\/epictripasia.com\/?page_id=3434"},"modified":"2024-12-16T13:14:35","modified_gmt":"2024-12-16T13:14:35","slug":"thrilling-elephant-camp-adventures-in-luang-prabang-map","status":"publish","type":"page","link":"https:\/\/epictripasia.com\/en\/maps\/thrilling-elephant-camp-adventures-in-luang-prabang-map\/","title":{"rendered":"Friendly travel spot Luang Prabang map"},"content":{"rendered":"\n\n\n\n \n \n 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 \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> Full 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 After breakfast, we will have a captivating journey to the Ban\n Ann Elephant and Jewelry Field. Along the way, discover the\n renowned Ban Phon Nom village, known for its skilled weavers\n with a historical connection to Laos’ royal past. Explore the\n monument to Henri Mouhot, the French explorer who uncovered\n Angkor Wat. Delve into the world of elephants at the camp,\n learning about their origin and living conditions. Feed these\n majestic creatures with vegetables and, if inclined, enjoy a\n scenic hour-long elephant ride. After this enriching\n experience, return to the hotel in Luang Prabang for a\n leisurely exploration of the city at your own pace.\n <\/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: [102.1350, 19.8864],\n zoom: 7\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 [102.1350, 19.8864, 'Luang Prabang'],\n [102.4492, 19.7492, 'Kuangsi Waterfall'],\n [102.4543, 19.7435, 'Ban Thapene'],\n [102.2283, 19.8756, 'Ban Ann Elephant'],\n [102.1350, 19.8864, 'Luang Prabang']\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 : Full Day After breakfast, we will have a captivating journey to the Ban Ann Elephant and … <\/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-3434","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3434","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=3434"}],"version-history":[{"count":5,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3434\/revisions"}],"predecessor-version":[{"id":6678,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3434\/revisions\/6678"}],"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=3434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}