{"id":3454,"date":"2024-03-01T07:57:26","date_gmt":"2024-03-01T07:57:26","guid":{"rendered":"https:\/\/epictripasia.com\/?page_id=3454"},"modified":"2024-12-17T05:16:48","modified_gmt":"2024-12-17T05:16:48","slug":"savor-singapore-culinary-map","status":"publish","type":"page","link":"https:\/\/epictripasia.com\/en\/maps\/savor-singapore-culinary-map\/","title":{"rendered":"SAVOR SINGAPORE CULINARY 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 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                  In the evening, venture to Gardens by the Bay, recognized\n                  among the Top 10 Indoor Gardens globally. Explore the Flower\n                  Dome&#8217;s ever-changing displays and immerse yourself in the\n                  surreal mist-filled Cloud Forest, featuring the Avatar: The\n                  Experience, a captivating fusion of nature and film magic. The\n                  Gardens promise a safe and delightful experience with SG Clean\n                  certification.<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> PERANAKAN TRAIL <\/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                  Join us on a colourful journey into the history, lifestyle,\n                  and unique character of the Peranakan Babas (the men) and\n                  Nonyas (the women). Take a walk through the Spice Garden which\n                  sits on the original site of the first Botanic Gardens and\n                  uncover the intricacies of spices and herbs that go into\n                  Peranakan cooking. A fascinating Display of Peranakan costume,\n                  embroidery, beadwork, jewelry, porcelain, furniture, and\n                  craftwork provides insight into the captivating culture of the\n                  Peranakans. Wander through the bustling enclaves of Katong\n                  &amp; Joo Chiat that showcases the rich and baroque Peranakan\n                  architecture. Admire rows of colorful traditional shophouses\n                  that date to the 1920s and 1930s. A sampling of Nonya\n                  Delicacies will complete the trail.<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> GASTRONOMY ROUTE <\/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 cultural gems of Geylang Serai market, a cherished\n                  hub for the Malay community since 1964. Recently renovated,\n                  the building is designed like a traditional Malay kampong\n                  house, the market offers a glimpse into the heart of Malay and\n                  Middle Eastern cuisines. Dive into the hawker centre for an\n                  authentic local breakfast. Moving to Tekka Market, Singapore&#8217;s\n                  largest wet market located in Little India, experience a\n                  vibrant melting pot of languages, from English to Chinese\n                  dialects, Malay, and Tamil. The hawker centre boasts a diverse\n                  range of non-vegetarian and vegetarian stalls, complemented by\n                  retail shops offering an array of saris, Indian dresses, and\n                  accessories. Enjoy a delightful food sampling at either\n                  Geylang Serai or Tekka market, savoring the flavors of these\n                  dynamic culinary spaces.<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> 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.8510, 1.2894],\n            zoom: 10\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.8586, 1.3039, 'Kampong Glam'],\n    [103.8512, 1.2904, 'Civic District'],\n    [103.8517, 1.2898, 'Padang'],\n    [103.8496, 1.2894, 'Parliament House'],\n    [103.8510, 1.2906, 'National Gallery Singapore'],\n    [103.8543, 1.2868, 'Merlion Park'],\n    [103.8475, 1.2815, 'Thian Hock Keng Temple'],\n    [103.8198, 1.3151, 'Singapore Botanic Gardens'],\n    [103.8636, 1.2816, 'Gardens by the Bay'],\n    [103.8652, 1.2838, 'Flower Dome'],\n    [103.8650, 1.2815, 'Cloud Forest'],\n    [103.8553, 1.3061, 'Peranakan'],\n    [103.8185, 1.3138, 'Spice Garden'],\n    [103.8971, 1.3162, 'Geylang Serai Market'],\n    [103.8504, 1.3065, 'Tekka Market']\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\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-3454","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3454","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=3454"}],"version-history":[{"count":5,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3454\/revisions"}],"predecessor-version":[{"id":6699,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3454\/revisions\/6699"}],"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=3454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}