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\n <div class=\"wrapper-map\">\n\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: [100.0119, 13.5860],\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 [139.6917, 35.6895, 'Tokyo'], \/\/ Tokyo\n [135.7681, 35.0116, 'Kyoto'], \/\/ Kyoto\n [116.4074, 39.9042, 'Beijing'], \/\/ Beijing\n [108.9398, 34.3416, 'Xi\\'an'], \/\/ Xi'an\n [105.8542, 21.0285, 'Hanoi'], \/\/ Hanoi\n [105.9745, 20.2534, 'Ninh Binh'], \/\/ Ninh Binh\n [107.2839, 20.9984, 'Halong'], \/\/ Halong\n [108.2500, 15.8750, 'Hoi An'], \/\/ Hoi An\n [106.6297, 10.8231, 'Saigon'], \/\/ Saigon\n [106.3433, 10.2494, 'Ben Tre'], \/\/ Ben Tre\n [103.8667, 13.4125, 'Siem Reap'], \/\/ Siem Reap\n [100.5018, 13.7563, 'Bangkok'], \/\/ Bangkok\n [98.3981, 7.8804, 'Phuket'] \/\/ Phuket\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 \/\/ Add lines between markers\n map.on('load', () => {\n markers.forEach((marker, index) => {\n if (index < markers.length - 1) {\n const lineCoordinates = [\n [markers[index][0], markers[index][1]], \/\/ Current marker\n [markers[index + 1][0], markers[index + 1][1]] \/\/ Next marker\n ];\n\n map.addLayer({\n 'id': `route-${index}`,\n 'type': 'line',\n 'source': {\n 'type': 'geojson',\n 'data': {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'LineString',\n 'coordinates': lineCoordinates\n }\n }\n },\n 'layout': {\n 'line-join': 'round',\n 'line-cap': 'round'\n },\n 'paint': {\n 'line-color': '#ff0000', \/\/ Red color for the line\n 'line-width': 2\n }\n });\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Directions from Hanoi to Ho Chi Minh City<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":2984,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-6857","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6857","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/comments?post=6857"}],"version-history":[{"count":8,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6857\/revisions"}],"predecessor-version":[{"id":6874,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6857\/revisions\/6874"}],"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=6857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6857,"date":"2024-12-20T03:34:33","date_gmt":"2024-12-20T03:34:33","guid":{"rendered":"https:\/\/epictripasia.com\/?page_id=6857"},"modified":"2024-12-21T07:05:27","modified_gmt":"2024-12-21T07:05:27","slug":"asia-adventure-odyssey-japan-china-vietnam-cambodia-and-thailand-map","status":"publish","type":"page","link":"https:\/\/epictripasia.com\/en\/maps\/asia-adventure-odyssey-japan-china-vietnam-cambodia-and-thailand-map\/","title":{"rendered":"ASIA ADVENTURE ODYSSEY (JAPAN, CHINA, VIETNAM, CAMBODIA, AND THAILAND) 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\n <div class=\"wrapper-map\">\n\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: [100.0119, 13.5860],\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 [139.6917, 35.6895, 'Tokyo'], \/\/ Tokyo\n [135.7681, 35.0116, 'Kyoto'], \/\/ Kyoto\n [116.4074, 39.9042, 'Beijing'], \/\/ Beijing\n [108.9398, 34.3416, 'Xi\\'an'], \/\/ Xi'an\n [105.8542, 21.0285, 'Hanoi'], \/\/ Hanoi\n [105.9745, 20.2534, 'Ninh Binh'], \/\/ Ninh Binh\n [107.2839, 20.9984, 'Halong'], \/\/ Halong\n [108.2500, 15.8750, 'Hoi An'], \/\/ Hoi An\n [106.6297, 10.8231, 'Saigon'], \/\/ Saigon\n [106.3433, 10.2494, 'Ben Tre'], \/\/ Ben Tre\n [103.8667, 13.4125, 'Siem Reap'], \/\/ Siem Reap\n [100.5018, 13.7563, 'Bangkok'], \/\/ Bangkok\n [98.3981, 7.8804, 'Phuket'] \/\/ Phuket\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 \/\/ Add lines between markers\n map.on('load', () => {\n markers.forEach((marker, index) => {\n if (index < markers.length - 1) {\n const lineCoordinates = [\n [markers[index][0], markers[index][1]], \/\/ Current marker\n [markers[index + 1][0], markers[index + 1][1]] \/\/ Next marker\n ];\n\n map.addLayer({\n 'id': `route-${index}`,\n 'type': 'line',\n 'source': {\n 'type': 'geojson',\n 'data': {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'LineString',\n 'coordinates': lineCoordinates\n }\n }\n },\n 'layout': {\n 'line-join': 'round',\n 'line-cap': 'round'\n },\n 'paint': {\n 'line-color': '#ff0000', \/\/ Red color for the line\n 'line-width': 2\n }\n });\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Directions from Hanoi to Ho Chi Minh City<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":2984,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-6857","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6857","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/comments?post=6857"}],"version-history":[{"count":8,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6857\/revisions"}],"predecessor-version":[{"id":6874,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6857\/revisions\/6874"}],"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=6857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}