{"id":4262,"date":"2025-10-17T03:14:11","date_gmt":"2025-10-17T03:14:11","guid":{"rendered":"https:\/\/dongminh.vn\/?page_id=4262"},"modified":"2025-12-15T06:33:17","modified_gmt":"2025-12-15T06:33:17","slug":"maps","status":"publish","type":"page","link":"https:\/\/dongminh.vn\/en\/maps\/","title":{"rendered":"Maps"},"content":{"rendered":"\t<div id=\"gap-939628596\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-939628596 {\n  padding-top: 80px;\n}\n<\/style>\n\t<\/div>\n\t\n\n    <html>\n\n    <head>\n        <meta charset=\"utf-8\" \/>\n        <title>Display a popup on click<\/title>\n        <meta\n            name=\"viewport\"\n            content=\"initial-scale=1,maximum-scale=1,user-scalable=no\" \/>\n        <link\n            href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.13.0\/mapbox-gl.css\"\n            rel=\"stylesheet\" \/>\n        <script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.13.0\/mapbox-gl.js\"><\/script>\n\n        <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n        <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n        <link\n            href=\"https:\/\/fonts.googleapis.com\/css2?family=Josefin+Sans:wght@400;700&display=swap\"\n            rel=\"stylesheet\" \/>\n\n        <style>\n            \/* view container *\/\n            .view-container {\n                width: 100%;\n                height: 80vh;\n                display: flex;\n                flex-flow: column;\n            }\n\n            #provinceSelect {\n                height: 53px;\n                width: 50% !important;\n            }\n\n            #districtSelect {\n                height: 53px;\n                width: 50% !important;\n            }\n\n            .view-container .topbar-container {\n                height: 60px !important;\n            }\n\n            .map-container {\n                height: 100%;\n                width: 100%;\n                order: 2;\n            }\n\n            #map {\n                height: 100%;\n                width: 100%;\n            }\n\n            .mapboxgl-popup {\n                background-color: transparent !important;\n                box-shadow: none !important;\n            }\n\n            .mapboxgl-popup.custom-popup {\n                max-width: 320px !important;\n                font-size: 14px;\n                text-align: left;\n                padding: 0px;\n                border-radius: 8px;\n                color: white;\n            }\n\n            .mapboxgl-popup-content {\n                background-color: #2b5acc !important;\n                box-shadow: 0 2px 2px rgb(0 0 0 \/ 31%) !important;\n            }\n\n            .mapboxgl-popup-content h3,\n            .mapboxgl-popup-content p,\n            .mapboxgl-popup-content a {\n                color: white;\n                margin-bottom: 5px;\n            }\n\n            .mapboxgl-popup-content h3 {\n                font-size: 18px;\n            }\n\n            .mapboxgl-popup-close-button {\n                cursor: pointer;\n                padding-top: 5px !important;\n                padding-right: 10px;\n                padding-bottom: 5px;\n                padding-left: 5px;\n                color: white !important;\n                right: 10 !important;\n            }\n\n            #map .mapboxgl-popup-anchor-top .mapboxgl-popup-tip,\n            .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,\n            .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {\n                border-bottom-color: #2b5acc;\n            }\n\n            #map .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,\n            .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,\n            .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {\n                border-top-color: #2b5acc;\n            }\n\n            #map .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {\n                border-right-color: #2b5acc;\n            }\n\n            #map .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {\n                border-left-color: #2b5acc;\n            }\n\n            \/* end mapbox *\/\n            \/* start side bar *\/\n            .topbar-container {\n                height: 5%;\n                width: 100%;\n                display: flex;\n                margin-bottom: 12px;\n            }\n\n            #provinceSelect,\n            #districtSelect {\n                margin: 0px 16px;\n            }\n\n            \/* end side bar *\/\n        <\/style>\n    <\/head>\n\n    <body>\n        <div class=\"view-container container\">\n            <!-- start topbar container -->\n            <div class=\"topbar-container\" style='    justify-content: center;'>\n                <select name=\"provinces\" id=\"provinceSelect\">\n                    <option value=\"0\">Th\u00e0nh ph\u1ed1\/T\u1ec9nh<\/option>\n\n                <\/select>\n\n                <select name=\"districts\" style='display:none;' id=\"districtSelect\">\n                    <option value=\"0\">District<\/option>\n\n                <\/select>\n            <\/div>\n            <!-- end topbar container -->\n\n            <!-- start map -->\n            <div class=\"map-container\">\n                <div id=\"map\" class=\"map\"><\/div>\n            <\/div>\n            <!-- end map -->\n        <\/div>\n        <script defer>\n            \/\/ access token from mapbox.com\n            mapboxgl.accessToken =\n                \"pk.eyJ1Ijoic2VsZXhhcHAiLCJhIjoiY2xpZTJ1MzIxMHN6cjNlbXFzMTA1NDNzcSJ9.PyRH_mkKAt0uOsDpA6RU_w\";\n   const urlAgency ='https:\/\/dongminh.vn\/wp-admin\/admin-ajax.php?action=get_store_agency_json';\n\n           const urlProvinces = 'https:\/\/dongminh.vn\/wp-admin\/admin-ajax.php?action=get_store_categories_json';\n   \n            \/\/map defind\n            const map = new mapboxgl.Map({\n                container: \"map\",\n                \/\/ Choose from Mapbox's core styles, or make your own style with Mapbox Studio\n                style: \"mapbox:\/\/styles\/selexapp\/clie2zu7d001t01ocan7cda15\",\n                center: [107.621057, 16.274267],\n                zoom: 5,\n            });\n\n            navigator.geolocation.getCurrentPosition(function(pos) {\n                var lng = pos.coords.longitude;\n                var lat = pos.coords.latitude;\n\n                \/\/ Create a marker at user location\n                var userMarker = new mapboxgl.Marker({\n                        color: \"#118811\", \/\/ Green color\n                        anchor: \"bottom\",\n                    })\n                    .setLngLat([lng, lat])\n                    .addTo(map);\n\n                \/\/ Fly to user location and zoom to level 12\n                map.flyTo({\n                    center: [lng, lat],\n                    speed: 2,\n                    zoom: 14,\n                });\n            });\n\n            function loadJSON(source) {\n                \/\/ N\u1ebfu l\u00e0 URL th\u1eadt ho\u1eb7c file JSON\n                if (source.startsWith(\"http\") || source.endsWith(\".json\")) {\n                    return fetch(source).then((r) => r.json());\n                }\n\n                \/\/ N\u1ebfu l\u00e0 chu\u1ed7i JSON\n                try {\n                    return Promise.resolve(JSON.parse(source));\n                } catch (err) {\n                    console.error(\"Kh\u00f4ng th\u1ec3 \u0111\u1ecdc JSON:\", err);\n                    return Promise.reject(err);\n                }\n            }\n            \/\/ mark agency on map\n            loadJSON(urlAgency)\n                .then((data) => {\n                    let markers = [];\n                    let markerAddresses = [];\n\n                    const listGroup = document.querySelector(\n                        \".side-bar-container .list-group\"\n                    );\n                    let activeItem = null; \/\/ Initialize active item to null\n\n                    data.forEach(function(place) {\n                        const image = new Image();\n                        image.src =\n                            \"https:\/\/selex.vn\/wp-content\/uploads\/2023\/05\/icon-battery-station-01.png\";\n                        image.style.width = \"32px\";\n                        image.style.height = \"42px\";\n\n                        const popup = new mapboxgl.Popup({\n                            className: \"custom-popup\",\n                        }).setHTML(\n                            `<h4>${place.name}<\/h4>\n                 <p>Address: ${place.address}<\/p>\n                 <p>Phone: <a href=\"tel:${place.phone}\">${place.phone}<\/a><\/p>`\n                        );\n\n                        \/\/ add marker\n                        const marker = new mapboxgl.Marker({\n                                element: image\n                            })\n                            .setLngLat([place.longitude, place.latitude])\n                            .setPopup(popup)\n                            .addTo(map);\n\n                        markerAddresses.push(place.address);\n                        markers.push(marker);\n\n                        \/\/ marker click animation\n                        marker.getElement().addEventListener(\"click\", function() {\n                            map.flyTo({\n                                center: [place.longitude, place.latitude],\n                                zoom: 11,\n                                speed: 2,\n                                curve: 1,\n                                easing: (t) => t,\n                            });\n                        });\n                    });\n                })\n                .catch((error) => {\n                    console.error(\"\u274c Error fetching JSON:\", error);\n                });\n\n            const provinceSelect = document.getElementById(\"provinceSelect\");\n            const districtSelect = document.getElementById(\"districtSelect\");\n\n            loadJSON(urlProvinces)\n                .then((data) => {\n                    \/\/ Th\u00eam option cho dropdown t\u1ec9nh\n                    data.forEach((province) => {\n                        const provinceOption = document.createElement(\"option\");\n                        provinceOption.value = province.id;\n                        provinceOption.textContent = transformCityName(\n                            removeVietnameseTones(province.enName)\n                        );\n                        provinceSelect.appendChild(provinceOption);\n                    });\n\n                    \/\/ Khi ch\u1ecdn t\u1ec9nh\n                    provinceSelect.addEventListener(\"change\", () => {\n                        districtSelect.innerHTML = \"\";\n                        const selectedProvinceId = parseInt(provinceSelect.value);\n                        const selectedProvince = data.find(\n                            (p) => p.id === selectedProvinceId\n                        );\n\n                        \/\/ Default option\n                        const defaultDistrictOption = document.createElement(\"option\");\n                        defaultDistrictOption.value = 0;\n                        defaultDistrictOption.textContent = \"District\";\n                        districtSelect.appendChild(defaultDistrictOption);\n\n                        if (selectedProvince) {\n                            map.flyTo({\n                                center: [\n                                    selectedProvince.longitude,\n                                    selectedProvince.latitude,\n                                ],\n                                zoom: 11,\n                                speed: 2,\n                                curve: 1,\n                                easing: (t) => t,\n                            });\n\n                            selectedProvince.districts.forEach((district) => {\n                                const districtOption = document.createElement(\"option\");\n                                districtOption.value = district.id;\n                                districtOption.textContent = transformDistrictName(\n                                    removeVietnameseTones(district.enName)\n                                );\n                                districtSelect.appendChild(districtOption);\n                            });\n\n                            \/\/ Khi ch\u1ecdn qu\u1eadn\/huy\u1ec7n\n                            districtSelect.addEventListener(\"change\", () => {\n                                const selectedDistrictId = parseInt(districtSelect.value);\n                                const selectedDistrict = selectedProvince.districts.find(\n                                    (d) => d.id === selectedDistrictId\n                                );\n\n                                if (selectedDistrict) {\n                                    map.flyTo({\n                                        center: [\n                                            selectedDistrict.longitude,\n                                            selectedDistrict.latitude,\n                                        ],\n                                        zoom: 14,\n                                        speed: 2,\n                                        curve: 1,\n                                        easing: (t) => t,\n                                    });\n                                }\n                            });\n                        }\n                    });\n                })\n                .catch((error) => {\n                    console.error(\"\u274c L\u1ed7i t\u1ea3i Provinces:\", error);\n                });\n\n\n            function removeVietnameseTones(str) {\n                str = str.replace(\/\u00e0|\u00e1|\u1ea1|\u1ea3|\u00e3|\u00e2|\u1ea7|\u1ea5|\u1ead|\u1ea9|\u1eab|\u0103|\u1eb1|\u1eaf|\u1eb7|\u1eb3|\u1eb5\/g, \"a\");\n                str = str.replace(\/\u00e8|\u00e9|\u1eb9|\u1ebb|\u1ebd|\u00ea|\u1ec1|\u1ebf|\u1ec7|\u1ec3|\u1ec5\/g, \"e\");\n                str = str.replace(\/\u00ec|\u00ed|\u1ecb|\u1ec9|\u0129\/g, \"i\");\n                str = str.replace(\/\u00f2|\u00f3|\u1ecd|\u1ecf|\u00f5|\u00f4|\u1ed3|\u1ed1|\u1ed9|\u1ed5|\u1ed7|\u01a1|\u1edd|\u1edb|\u1ee3|\u1edf|\u1ee1\/g, \"o\");\n                str = str.replace(\/\u00f9|\u00fa|\u1ee5|\u1ee7|\u0169|\u01b0|\u1eeb|\u1ee9|\u1ef1|\u1eed|\u1eef\/g, \"u\");\n                str = str.replace(\/\u1ef3|\u00fd|\u1ef5|\u1ef7|\u1ef9\/g, \"y\");\n                str = str.replace(\/\u0111\/g, \"d\");\n                str = str.replace(\/\u00c0|\u00c1|\u1ea0|\u1ea2|\u00c3|\u00c2|\u1ea6|\u1ea4|\u1eac|\u1ea8|\u1eaa|\u0102|\u1eb0|\u1eae|\u1eb6|\u1eb2|\u1eb4\/g, \"A\");\n                str = str.replace(\/\u00c8|\u00c9|\u1eb8|\u1eba|\u1ebc|\u00ca|\u1ec0|\u1ebe|\u1ec6|\u1ec2|\u1ec4\/g, \"E\");\n                str = str.replace(\/\u00cc|\u00cd|\u1eca|\u1ec8|\u0128\/g, \"I\");\n                str = str.replace(\/\u00d2|\u00d3|\u1ecc|\u1ece|\u00d5|\u00d4|\u1ed2|\u1ed0|\u1ed8|\u1ed4|\u1ed6|\u01a0|\u1edc|\u1eda|\u1ee2|\u1ede|\u1ee0\/g, \"O\");\n                str = str.replace(\/\u00d9|\u00da|\u1ee4|\u1ee6|\u0168|\u01af|\u1eea|\u1ee8|\u1ef0|\u1eec|\u1eee\/g, \"U\");\n                str = str.replace(\/\u1ef2|\u00dd|\u1ef4|\u1ef6|\u1ef8\/g, \"Y\");\n                str = str.replace(\/\u0110\/g, \"D\");\n                \/\/ Some system encode vietnamese combining accent as individual utf-8 characters\n                \/\/ M\u1ed9t v\u00e0i b\u1ed9 encode coi c\u00e1c d\u1ea5u m\u0169, d\u1ea5u ch\u1eef nh\u01b0 m\u1ed9t k\u00ed t\u1ef1 ri\u00eang bi\u1ec7t n\u00ean th\u00eam hai d\u00f2ng n\u00e0y\n                str = str.replace(\/\\u0300|\\u0301|\\u0303|\\u0309|\\u0323\/g, \"\"); \/\/ \u0300 \u0301 \u0303 \u0309 \u0323  huy\u1ec1n, s\u1eafc, ng\u00e3, h\u1ecfi, n\u1eb7ng\n                str = str.replace(\/\\u02C6|\\u0306|\\u031B\/g, \"\"); \/\/ \u02c6 \u0306 \u031b  \u00c2, \u00ca, \u0102, \u01a0, \u01af\n                \/\/ Remove extra spaces\n                \/\/ B\u1ecf c\u00e1c kho\u1ea3ng tr\u1eafng li\u1ec1n nhau\n                str = str.replace(\/ + \/g, \" \");\n                str = str.trim();\n                \/\/ Remove punctuations\n                \/\/ B\u1ecf d\u1ea5u c\u00e2u, k\u00ed t\u1ef1 \u0111\u1eb7c bi\u1ec7t\n                str = str.replace(\n                    \/!|@|%|\\^|\\*|\\(|\\)|\\+|\\=|\\<|\\>|\\?|\\\/|,|\\.|\\:|\\;|\\'|\\\"|\\&|\\#|\\[|\\]|~|\\$|_|`|-|{|}|\\||\\\\\/g,\n                    \" \"\n                );\n                return str;\n            }\n\n            function transformCityName(cityName) {\n                if (cityName === \"Ho Chi Minh\") {\n                    return \"Ho Chi Minh City\";\n                }\n                if (cityName === \"Ha Noi\") {\n                    return \"Hanoi\";\n                }\n                return cityName;\n            }\n\n            function transformDistrictName(districtName) {\n                try {\n                    let districtNumber = districtName.match(\/Quan (\\d+)\/)[1];\n                    if (districtName) {\n                        return \"District \" + districtNumber;\n                    }\n                } catch (e) {}\n                return districtName;\n            }\n        <\/script>\n    <\/body>\n\n    <\/html>\n\n\n\t<div id=\"gap-1277214541\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1277214541 {\n  padding-top: 80px;\n}\n<\/style>\n\t<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"footnotes":""},"class_list":["post-4262","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Maps - \u0110\u1ed2NG MINH<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dongminh.vn\/en\/maps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Maps - \u0110\u1ed2NG MINH\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dongminh.vn\/en\/maps\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0110\u1ed2NG MINH\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-15T06:33:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dongminh.vn\/en\/maps\/\",\"url\":\"https:\/\/dongminh.vn\/en\/maps\/\",\"name\":\"Maps - \u0110\u1ed2NG MINH\",\"isPartOf\":{\"@id\":\"https:\/\/www.dongminh.vn\/#website\"},\"datePublished\":\"2025-10-17T03:14:11+00:00\",\"dateModified\":\"2025-12-15T06:33:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/dongminh.vn\/en\/maps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dongminh.vn\/en\/maps\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dongminh.vn\/en\/maps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Trang ch\u1ee7\",\"item\":\"https:\/\/www.dongminh.vn\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Maps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dongminh.vn\/#website\",\"url\":\"https:\/\/www.dongminh.vn\/\",\"name\":\"\u0110\u1ed2NG MINH\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dongminh.vn\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Maps - \u0110\u1ed2NG MINH","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dongminh.vn\/en\/maps\/","og_locale":"en_US","og_type":"article","og_title":"Maps - \u0110\u1ed2NG MINH","og_url":"https:\/\/dongminh.vn\/en\/maps\/","og_site_name":"\u0110\u1ed2NG MINH","article_modified_time":"2025-12-15T06:33:17+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dongminh.vn\/en\/maps\/","url":"https:\/\/dongminh.vn\/en\/maps\/","name":"Maps - \u0110\u1ed2NG MINH","isPartOf":{"@id":"https:\/\/www.dongminh.vn\/#website"},"datePublished":"2025-10-17T03:14:11+00:00","dateModified":"2025-12-15T06:33:17+00:00","breadcrumb":{"@id":"https:\/\/dongminh.vn\/en\/maps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dongminh.vn\/en\/maps\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dongminh.vn\/en\/maps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Trang ch\u1ee7","item":"https:\/\/www.dongminh.vn\/en\/"},{"@type":"ListItem","position":2,"name":"Maps"}]},{"@type":"WebSite","@id":"https:\/\/www.dongminh.vn\/#website","url":"https:\/\/www.dongminh.vn\/","name":"\u0110\u1ed2NG MINH","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dongminh.vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/dongminh.vn\/en\/wp-json\/wp\/v2\/pages\/4262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dongminh.vn\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dongminh.vn\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dongminh.vn\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dongminh.vn\/en\/wp-json\/wp\/v2\/comments?post=4262"}],"version-history":[{"count":2,"href":"https:\/\/dongminh.vn\/en\/wp-json\/wp\/v2\/pages\/4262\/revisions"}],"predecessor-version":[{"id":4264,"href":"https:\/\/dongminh.vn\/en\/wp-json\/wp\/v2\/pages\/4262\/revisions\/4264"}],"wp:attachment":[{"href":"https:\/\/dongminh.vn\/en\/wp-json\/wp\/v2\/media?parent=4262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}