{"id":77,"date":"2024-11-03T09:03:21","date_gmt":"2024-11-03T09:03:21","guid":{"rendered":"https:\/\/bg.pendampingusaha.com\/animasi\/?page_id=77"},"modified":"2024-11-03T18:43:06","modified_gmt":"2024-11-03T18:43:06","slug":"maps-lokasi","status":"publish","type":"page","link":"https:\/\/bg.pendampingusaha.com\/animasi\/maps-lokasi\/","title":{"rendered":"MAPS LOKASI"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"77\" class=\"elementor elementor-77\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b62aaf0 e-flex e-con-boxed e-con e-parent\" data-id=\"b62aaf0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-629430f elementor-widget elementor-widget-html\" data-id=\"629430f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Pelacak Lokasi<\/title>\r\n    <!-- Tambahkan CSS Leaflet -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n            font-family: Arial, sans-serif;\r\n        }\r\n\r\n        body {\r\n            background-color: #f0f2f5;\r\n            min-height: 100vh;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            padding: 20px;\r\n        }\r\n\r\n        .card {\r\n            background: white;\r\n            border-radius: 10px;\r\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n            width: 100%;\r\n            max-width: 600px; \/* Increased width for map *\/\r\n            overflow: hidden;\r\n        }\r\n\r\n        .card-header {\r\n            background: #4a90e2;\r\n            color: white;\r\n            padding: 20px;\r\n            font-size: 1.2em;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n        }\r\n\r\n        .card-content {\r\n            padding: 20px;\r\n        }\r\n\r\n        .location-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 20px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .location-item {\r\n            background: #f8f9fa;\r\n            padding: 15px;\r\n            border-radius: 8px;\r\n            position: relative;\r\n        }\r\n\r\n        .location-label {\r\n            font-size: 0.9em;\r\n            color: #666;\r\n            margin-bottom: 5px;\r\n        }\r\n\r\n        .location-value {\r\n            font-size: 1.4em;\r\n            font-weight: bold;\r\n            color: #333;\r\n        }\r\n\r\n        .accuracy-info {\r\n            background: #e9ecef;\r\n            padding: 15px;\r\n            border-radius: 8px;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .error-message {\r\n            background: #fee;\r\n            color: #c00;\r\n            padding: 15px;\r\n            border-radius: 8px;\r\n            margin-top: 10px;\r\n            display: none;\r\n        }\r\n\r\n        .loading {\r\n            text-align: center;\r\n            padding: 20px;\r\n            color: #666;\r\n        }\r\n\r\n        \/* Tambahan style untuk map dan tombol *\/\r\n        #map {\r\n            height: 300px;\r\n            width: 100%;\r\n            border-radius: 8px;\r\n            margin-top: 20px;\r\n        }\r\n\r\n        .copy-button {\r\n            position: absolute;\r\n            top: 5px;\r\n            right: 5px;\r\n            background: #4a90e2;\r\n            color: white;\r\n            border: none;\r\n            border-radius: 4px;\r\n            padding: 5px 10px;\r\n            cursor: pointer;\r\n            font-size: 0.8em;\r\n        }\r\n\r\n        .copy-button:hover {\r\n            background: #357abd;\r\n        }\r\n\r\n        .copy-all-button {\r\n            background: #4a90e2;\r\n            color: white;\r\n            border: none;\r\n            border-radius: 4px;\r\n            padding: 10px 20px;\r\n            cursor: pointer;\r\n            width: 100%;\r\n            margin-top: 15px;\r\n        }\r\n\r\n        .copy-all-button:hover {\r\n            background: #357abd;\r\n        }\r\n\r\n        .copied-tooltip {\r\n            position: fixed;\r\n            background: rgba(0, 0, 0, 0.8);\r\n            color: white;\r\n            padding: 5px 10px;\r\n            border-radius: 4px;\r\n            font-size: 0.8em;\r\n            pointer-events: none;\r\n            display: none;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"card\">\r\n        <div class=\"card-header\">\r\n            \ud83d\udccd Lokasi Anda\r\n        <\/div>\r\n        <div class=\"card-content\">\r\n            <div id=\"loading\" class=\"loading\">\r\n                Mendapatkan lokasi...\r\n            <\/div>\r\n            <div id=\"locationInfo\" style=\"display: none;\">\r\n                <div class=\"location-grid\">\r\n                    <div class=\"location-item\">\r\n                        <button class=\"copy-button\" onclick=\"copyValue('latitude')\">Copy<\/button>\r\n                        <div class=\"location-label\">Latitude<\/div>\r\n                        <div id=\"latitude\" class=\"location-value\">-<\/div>\r\n                    <\/div>\r\n                    <div class=\"location-item\">\r\n                        <button class=\"copy-button\" onclick=\"copyValue('longitude')\">Copy<\/button>\r\n                        <div class=\"location-label\">Longitude<\/div>\r\n                        <div id=\"longitude\" class=\"location-value\">-<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"accuracy-info\">\r\n                    <div class=\"location-label\">Akurasi<\/div>\r\n                    <div id=\"accuracy\">-<\/div>\r\n                <\/div>\r\n                <div class=\"accuracy-info\">\r\n                    <div class=\"location-label\">Terakhir Update<\/div>\r\n                    <div id=\"timestamp\">-<\/div>\r\n                <\/div>\r\n                <button class=\"copy-all-button\" onclick=\"copyAllCoordinates()\">\r\n                    Copy Koordinat (Lat, Long)\r\n                <\/button>\r\n                <div id=\"map\"><\/div>\r\n            <\/div>\r\n            <div id=\"error\" class=\"error-message\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"copied-tooltip\" id=\"copiedTooltip\">Tersalin!<\/div>\r\n\r\n    <!-- Tambahkan Script Leaflet -->\r\n    <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n    <script>\r\n        \/\/ Elemen DOM\r\n        const loadingElement = document.getElementById('loading');\r\n        const locationInfoElement = document.getElementById('locationInfo');\r\n        const errorElement = document.getElementById('error');\r\n        const latitudeElement = document.getElementById('latitude');\r\n        const longitudeElement = document.getElementById('longitude');\r\n        const accuracyElement = document.getElementById('accuracy');\r\n        const timestampElement = document.getElementById('timestamp');\r\n        const copiedTooltip = document.getElementById('copiedTooltip');\r\n\r\n        let map;\r\n        let marker;\r\n\r\n        \/\/ Fungsi untuk menampilkan error\r\n        function showError(message) {\r\n            errorElement.textContent = message;\r\n            errorElement.style.display = 'block';\r\n            loadingElement.style.display = 'none';\r\n            locationInfoElement.style.display = 'none';\r\n        }\r\n\r\n        \/\/ Fungsi untuk menyalin nilai\r\n        function copyValue(type) {\r\n            const value = type === 'latitude' ? latitudeElement.textContent : longitudeElement.textContent;\r\n            navigator.clipboard.writeText(value).then(() => showTooltip(event));\r\n        }\r\n\r\n        \/\/ Fungsi untuk menyalin semua koordinat\r\n        function copyAllCoordinates() {\r\n            const lat = latitudeElement.textContent;\r\n            const long = longitudeElement.textContent;\r\n            const coordinates = `${lat}, ${long}`;\r\n            navigator.clipboard.writeText(coordinates).then(() => showTooltip(event));\r\n        }\r\n\r\n        \/\/ Fungsi untuk menampilkan tooltip\r\n        function showTooltip(event) {\r\n            const tooltip = document.getElementById('copiedTooltip');\r\n            tooltip.style.display = 'block';\r\n            tooltip.style.left = (event.pageX - 30) + 'px';\r\n            tooltip.style.top = (event.pageY - 30) + 'px';\r\n            setTimeout(() => {\r\n                tooltip.style.display = 'none';\r\n            }, 1000);\r\n        }\r\n\r\n        \/\/ Fungsi untuk memperbarui tampilan lokasi\r\n        function updateLocationDisplay(position) {\r\n            const { latitude, longitude, accuracy } = position.coords;\r\n            \r\n            latitudeElement.textContent = latitude.toFixed(6) + '\u00b0';\r\n            longitudeElement.textContent = longitude.toFixed(6) + '\u00b0';\r\n            accuracyElement.textContent = accuracy.toFixed(2) + ' meter';\r\n            timestampElement.textContent = new Date(position.timestamp).toLocaleString();\r\n\r\n            loadingElement.style.display = 'none';\r\n            locationInfoElement.style.display = 'block';\r\n            errorElement.style.display = 'none';\r\n\r\n            updateMap(latitude, longitude);\r\n        }\r\n\r\n        \/\/ Fungsi untuk memperbarui peta\r\n        function updateMap(latitude, longitude) {\r\n            if (!map) {\r\n                \/\/ Inisialisasi peta jika belum ada\r\n                map = L.map('map').setView([latitude, longitude], 15);\r\n                L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n                    attribution: '\u00a9 OpenStreetMap contributors'\r\n                }).addTo(map);\r\n                marker = L.marker([latitude, longitude]).addTo(map);\r\n            } else {\r\n                \/\/ Update posisi marker dan view peta\r\n                marker.setLatLng([latitude, longitude]);\r\n                map.setView([latitude, longitude]);\r\n            }\r\n        }\r\n\r\n        \/\/ Fungsi untuk menangani error geolocation\r\n        function handleLocationError(error) {\r\n            let errorMessage;\r\n            switch(error.code) {\r\n                case error.PERMISSION_DENIED:\r\n                    errorMessage = \"Anda menolak permintaan akses lokasi.\";\r\n                    break;\r\n                case error.POSITION_UNAVAILABLE:\r\n                    errorMessage = \"Informasi lokasi tidak tersedia.\";\r\n                    break;\r\n                case error.TIMEOUT:\r\n                    errorMessage = \"Waktu permintaan lokasi habis.\";\r\n                    break;\r\n                default:\r\n                    errorMessage = \"Terjadi kesalahan yang tidak diketahui.\";\r\n            }\r\n            showError(errorMessage);\r\n        }\r\n\r\n        \/\/ Fungsi utama untuk memulai pelacakan lokasi\r\n        function initLocationTracking() {\r\n            if (!navigator.geolocation) {\r\n                showError(\"Geolocation tidak didukung oleh browser Anda.\");\r\n                return;\r\n            }\r\n\r\n            \/\/ Dapatkan lokasi saat ini\r\n            navigator.geolocation.getCurrentPosition(updateLocationDisplay, handleLocationError);\r\n\r\n            \/\/ Pantau perubahan lokasi\r\n            navigator.geolocation.watchPosition(updateLocationDisplay, handleLocationError);\r\n        }\r\n\r\n        \/\/ Mulai aplikasi\r\n        initLocationTracking();\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd52a09 elementor-button-info elementor-align-center elementor-widget elementor-widget-button\" data-id=\"bd52a09\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/bg.pendampingusaha.com\/animasi\/tracker-maps\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Hitung Jarak<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pelacak Lokasi \ud83d\udccd Lokasi Anda Mendapatkan lokasi&#8230; Copy Latitude &#8211; Copy Longitude &#8211; Akurasi &#8211; Terakhir Update &#8211; Copy Koordinat (Lat, Long) Tersalin! Hitung Jarak<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/77"}],"collection":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":16,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/77\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/77\/revisions\/139"}],"wp:attachment":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/media?parent=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}