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: [103.8603, 1.3017],\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 [103.8198, 1.3521, 'Singapore'], \/\/ Singapore\n [115.2625, -8.5190, 'Ubud'], \/\/ Ubud\n [115.5668, -8.5158, 'Candidasa'], \/\/ Candidasa\n [115.0651, -8.1598, 'Lovina'], \/\/ Lovina\n [115.0641, -8.2845, 'Munduk'], \/\/ Munduk\n [115.2272, -8.8001, 'Nusa Dua'] \/\/ Nusa Dua\n];\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 \/\/ 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-6771","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6771","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=6771"}],"version-history":[{"count":4,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6771\/revisions"}],"predecessor-version":[{"id":6867,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6771\/revisions\/6867"}],"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=6771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6771,"date":"2024-12-19T08:13:20","date_gmt":"2024-12-19T08:13:20","guid":{"rendered":"https:\/\/epictripasia.com\/?page_id=6771"},"modified":"2024-12-21T06:59:40","modified_gmt":"2024-12-21T06:59:40","slug":"splendor-singapore-and-bali-odyssey-map","status":"publish","type":"page","link":"https:\/\/epictripasia.com\/en\/maps\/splendor-singapore-and-bali-odyssey-map\/","title":{"rendered":"SPLENDOR SINGAPORE AND BALI ODYSSEY 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: [103.8603, 1.3017],\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 [103.8198, 1.3521, 'Singapore'], \/\/ Singapore\n [115.2625, -8.5190, 'Ubud'], \/\/ Ubud\n [115.5668, -8.5158, 'Candidasa'], \/\/ Candidasa\n [115.0651, -8.1598, 'Lovina'], \/\/ Lovina\n [115.0641, -8.2845, 'Munduk'], \/\/ Munduk\n [115.2272, -8.8001, 'Nusa Dua'] \/\/ Nusa Dua\n];\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 \/\/ 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-6771","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6771","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=6771"}],"version-history":[{"count":4,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6771\/revisions"}],"predecessor-version":[{"id":6867,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/6771\/revisions\/6867"}],"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=6771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}