{"id":3557,"date":"2024-03-01T09:00:12","date_gmt":"2024-03-01T09:00:12","guid":{"rendered":"https:\/\/epictripasia.com\/?page_id=3557"},"modified":"2024-03-03T03:32:57","modified_gmt":"2024-03-03T03:32:57","slug":"join-group-discovery-singapore-map","status":"publish","type":"page","link":"https:\/\/epictripasia.com\/en\/maps\/join-group-discovery-singapore-map\/","title":{"rendered":"JOIN GROUP DISCOVERY SINGAPORE 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      >\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 SINGAPORE <\/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 Singapore airport. Pick-up and transfer to the\n                  hotel.<br \/>\n                  Accommodation in Singapore.\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> SINGAPORE CITY TOUR <\/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                  Today we will enjoy a captivating City Tour, starting at the\n                  culturally rich Kampong Glam, a blend of tradition and\n                  modernity. Traverse the Civic District, passing historical\n                  landmarks like the Padang, Parliament House, and the National\n                  Gallery Singapore. Capture the iconic Merlion Park&#8217;s\n                  breathtaking Marina Bay views and explore the ancient Thian\n                  Hock Keng Temple. Discover the UNESCO World Heritage Site,\n                  Singapore Botanic Gardens, with its enchanting National Orchid\n                  Garden boasting 60,000 orchid plants.<br \/>\n                  Overnight in Singapore.\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> HEARTLANDS TOUR <\/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 an immersive journey into the heartlands, the suburban\n                  residential havens of Singapore, and experience the vibrant\n                  life of a typical Singaporean in Toa Payoh Town. As the\n                  inaugural town developed by the Housing Development Board, the\n                  government entity overseeing public housing, Toa Payoh Town\n                  embodies a self-sufficient community. Witness the blend of\n                  public and private housing, efficient public transport,\n                  communal amenities, and the integration of industrial and\n                  commercial zones. Delve into the local way of life with visits\n                  to a bustling wet market, a lively hawker centre, public\n                  recreation areas, and an insightful tour of a showflat\n                  showcasing the design of public housing flats.<br \/>\n                  Overnight in Singapore.\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> FULL DAY SAFARI <\/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                  Start the day of nature&#8217;s marvels with a visit to Singapore\n                  Zoo, where animals roam freely in expansive, natural habitats,\n                  creating close encounters and intimate moments through feeding\n                  sessions and walk-through exhibits. Whether exploring by tram\n                  or on foot, the zoo promises a captivating experience amid\n                  streams, rock walls, and beautiful landscapes.<br \/>\n                  After a leisurely lunch break, embark on the River Wonder\n                  Tour, Asia&#8217;s first and only river-themed wildlife park.\n                  Encounter over 7,500 aquatic and land animals, representing\n                  240 species, as you stroll through freshwater aquariums and\n                  immersive exhibits, including the enchanting Giant Panda\n                  Forest and the awe-inspiring Amazon Flooded Forest\u2014the world&#8217;s\n                  largest freshwater aquarium.<br \/>\n                  Overnight in Singapore.\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> BATTLEFIELD TOUR <\/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 historical journey for enthusiasts of war history\n                  as we delve into key sites steeped in World War II\n                  significance. Uncover Singapore&#8217;s role as a crucial British\n                  military base, often referred to as the &#8220;Gibraltar of the\n                  East.&#8221; Explore the intricacies of the defense strategy failure\n                  and revisit the days of the Japanese Occupation of Singapore.\n                  Commence the experience at the Kranji War Memorial, a poignant\n                  tribute to fallen Commonwealth war veterans of World War II.\n                  Continue to the Changi area, including the Changi Prison Wall,\n                  Changi Chapel temporary exhibit (Actual chapel is undergoing\n                  renovation), and Changi Beach Park. Along the way, catch\n                  glimpses of Selarang Barracks, Changi Air Base, and Johor\n                  Battery.<br \/>\n                  Overnight in Singapore.\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> SINGAPORE \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>\n                  Free at leisure until indicated time to transfer to the\n                  airport for departure flight.\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: [103.8599, 1.3024],\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.8599, 1.3024, 'Kampong Glam'],                 \/\/ Kampong Glam\n    [103.8532, 1.2895, 'Padang'],                       \/\/ Padang\n    [103.8473, 1.2791, 'Thian Hock Keng Temple'],       \/\/ Thian Hock Keng Temple\n    [103.7960, 1.3220, 'Botanic Gardens'],              \/\/ Botanic Gardens\n    [103.8470, 1.3329, 'Toa Payoh Town'],               \/\/ Toa Payoh Town\n    [103.7930, 1.4043, 'Singapore Zoo'],                \/\/ Singapore Zoo\n    [103.7559, 1.4180, 'Kranji War Memorial'],          \/\/ Kranji War Memorial\n    [103.9713, 1.3779, 'Changi Prison Wall'],          \/\/ Changi Prison Wall\n    [103.9777, 1.3775, 'Changi Chapel'],               \/\/ Changi Chapel\n    [103.9820, 1.3884, 'Changi Beach Park'],           \/\/ Changi Beach Park\n    [103.9793, 1.3887, 'Selarang Barracks'],           \/\/ Selarang Barracks\n    [104.0267, 1.3615, 'Changi Air Base'],             \/\/ Changi Air Base\n    [103.9892, 1.3841, 'Johor Battery'],               \/\/ Johor Battery\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 SINGAPORE Arrival at Singapore airport. Pick-up and transfer to the hotel. Accommodation in Singapore. &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-3557","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3557","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=3557"}],"version-history":[{"count":4,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3557\/revisions"}],"predecessor-version":[{"id":3657,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3557\/revisions\/3657"}],"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=3557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}