Pelacak Rute Kustom<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet-routing-machine@3.2.12\/dist\/leaflet-routing-machine.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: 800px;\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 }\r\n\r\n .card-content {\r\n padding: 20px;\r\n }\r\n\r\n .input-group {\r\n margin-bottom: 15px;\r\n background: #f8f9fa;\r\n padding: 15px;\r\n border-radius: 8px;\r\n }\r\n\r\n .coordinate-inputs {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 10px;\r\n margin-top: 10px;\r\n }\r\n\r\n .input-field {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n input[type=\"text\"] {\r\n padding: 8px;\r\n border: 1px solid #ddd;\r\n border-radius: 4px;\r\n margin-top: 5px;\r\n }\r\n\r\n label {\r\n font-weight: bold;\r\n color: #4a90e2;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .btn {\r\n background: #4a90e2;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 1em;\r\n width: 100%;\r\n margin-top: 10px;\r\n }\r\n\r\n .btn:hover {\r\n background: #357abd;\r\n }\r\n\r\n .location-details {\r\n margin-top: 20px;\r\n background: #f8f9fa;\r\n padding: 15px;\r\n border-radius: 8px;\r\n }\r\n\r\n #map {\r\n height: 400px;\r\n width: 100%;\r\n border-radius: 8px;\r\n margin-top: 20px;\r\n }\r\n\r\n .error-message {\r\n color: #dc3545;\r\n font-size: 0.9em;\r\n margin-top: 5px;\r\n display: none;\r\n }\r\n\r\n .current-location-btn {\r\n background: #28a745;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .current-location-btn:hover {\r\n background: #218838;\r\n }\r\n\r\n .route-info {\r\n margin-top: 15px;\r\n padding: 10px;\r\n background: #e9ecef;\r\n border-radius: 4px;\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n .copy-coord-btn {\r\n background: #6c757d;\r\n color: white;\r\n border: none;\r\n padding: 5px 10px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 0.8em;\r\n margin-left: 5px;\r\n }\r\n\r\n .copy-coord-btn:hover {\r\n background: #5a6268;\r\n }\r\n\r\n .input-with-copy {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .copy-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 z-index: 1000;\r\n }\r\n\r\n \/* Style untuk container input *\/\r\n .input-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n }\r\n \r\n \r\n \/* Tambahkan di bagian style *\/\r\n #googleMapsBtn {\r\n background: #dd4b39;\r\n display: none;\r\n transition: background-color 0.3s;\r\n}\r\n\r\n#googleMapsBtn:hover {\r\n background: #c23321;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n.transport-buttons {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 10px;\r\n margin-top: 15px;\r\n}\r\n\r\n.transport-btn {\r\n margin: 0 !important;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n}\r\n\r\n\/* Hover effect untuk tombol transportasi *\/\r\n.transport-btn:hover {\r\n opacity: 0.9;\r\n transform: translateY(-1px);\r\n transition: all 0.2s;\r\n}\r\n\r\n\/* Warna spesifik untuk setiap mode *\/\r\n.transport-btn[onclick*=\"driving\"] {\r\n background: #dd4b39;\r\n}\r\n\r\n.transport-btn[onclick*=\"walking\"] {\r\n background: #28a745;\r\n}\r\n\r\n\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\udccdHitung Rute Kustom\r\n <\/div>\r\n <div class=\"card-content\">\r\n <button class=\"btn current-location-btn\" onclick=\"useCurrentLocation()\">\r\n Gunakan Lokasi Saat Ini\r\n <\/button>\r\n\r\n <div class=\"input-group\">\r\n <label>Dari Titik Sini <\/label>\r\n <div class=\"coordinate-inputs\">\r\n <div class=\"input-field\">\r\n <label>Latitude<\/label>\r\n <div class=\"input-with-copy\">\r\n <div class=\"input-container\">\r\n <input type=\"text\" id=\"latA\" placeholder=\"Contoh: -5.3759951\">\r\n <\/div>\r\n <button class=\"copy-coord-btn\" onclick=\"copyCoordinate('latA')\">\r\n Copy\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"input-field\">\r\n <label>Longitude<\/label>\r\n <div class=\"input-with-copy\">\r\n <div class=\"input-container\">\r\n <input type=\"text\" id=\"lngA\" placeholder=\"Contoh: 105.2398698\">\r\n <\/div>\r\n <button class=\"copy-coord-btn\" onclick=\"copyCoordinate('lngA')\">\r\n Copy\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"copy-coord-btn\" style=\"margin-top: 10px;\" onclick=\"copyAllCoordinatesA()\">\r\n Copy Semua Koordinat A\r\n <\/button>\r\n <div class=\"error-message\" id=\"errorA\"><\/div>\r\n <\/div>\r\n\r\n \r\n\r\n <div class=\"copy-tooltip\" id=\"copyTooltip\">Tersalin!<\/div>\r\n\r\n <div class=\"input-group\">\r\n <label>Titik B (Tujuan)<\/label>\r\n <div class=\"coordinate-inputs\">\r\n <div class=\"input-field\">\r\n <label>Latitude<\/label>\r\n <input type=\"text\" id=\"latB\" placeholder=\"Contoh: -5.3825561\">\r\n <\/div>\r\n <div class=\"input-field\">\r\n <label>Longitude<\/label>\r\n <input type=\"text\" id=\"lngB\" placeholder=\"Contoh: 105.2479806\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"error-message\" id=\"errorB\"><\/div>\r\n <\/div>\r\n\r\n <button class=\"btn\" onclick=\"updateRoute()\">Tampilkan Rute<\/button>\r\n\r\n <div id=\"map\"><\/div>\r\n <div id=\"routeInfo\" class=\"route-info\"><\/div>\r\n \r\n \r\n \r\n <div class=\"transport-buttons\" style=\"display: none;\" id=\"transportButtons\">\r\n <button class=\"btn transport-btn\" onclick=\"openInGoogleMaps('driving')\" style=\"background: #dd4b39;\">\r\n \ud83d\ude97 Rute Mobil\r\n <\/button>\r\n <button class=\"btn transport-btn\" onclick=\"openInGoogleMaps('walking')\" style=\"background: #28a745;\">\r\n \ud83d\udeb6 Rute Jalan Kaki\r\n <\/button>\r\n<\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/leaflet-routing-machine@3.2.12\/dist\/leaflet-routing-machine.js\"><\/script>\r\n\r\n <script>\r\n let map, routingControl;\r\n let markers = [];\r\n\r\n \/\/ Inisialisasi peta\r\n function initMap() {\r\n map = L.map('map').setView([-5.3792156, 105.2410178], 13);\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 }\r\n\r\n \/\/ Gunakan lokasi saat ini\r\n function useCurrentLocation() {\r\n if (navigator.geolocation) {\r\n navigator.geolocation.getCurrentPosition(\r\n (position) => {\r\n document.getElementById('latA').value = position.coords.latitude;\r\n document.getElementById('lngA').value = position.coords.longitude;\r\n },\r\n (error) => {\r\n document.getElementById('errorA').textContent = \"Tidak dapat mengakses lokasi: \" + error.message;\r\n document.getElementById('errorA').style.display = 'block';\r\n }\r\n );\r\n } else {\r\n document.getElementById('errorA').textContent = \"Geolocation tidak didukung oleh browser ini\";\r\n document.getElementById('errorA').style.display = 'block';\r\n }\r\n }\r\n\r\n \/\/ Validasi input koordinat\r\n function validateCoordinate(lat, lng) {\r\n const latNum = parseFloat(lat);\r\n const lngNum = parseFloat(lng);\r\n \r\n if (isNaN(latNum) || isNaN(lngNum)) {\r\n return false;\r\n }\r\n \r\n if (latNum < -90 || latNum > 90 || lngNum < -180 || lngNum > 180) {\r\n return false;\r\n }\r\n \r\n return true;\r\n }\r\n\r\n \/\/ Update rute\r\n function updateRoute() {\r\n \/\/ Ambil nilai input\r\n const latA = document.getElementById('latA').value;\r\n const lngA = document.getElementById('lngA').value;\r\n const latB = document.getElementById('latB').value;\r\n const lngB = document.getElementById('lngB').value;\r\n\r\n \/\/ Reset pesan error\r\n document.getElementById('errorA').style.display = 'none';\r\n document.getElementById('errorB').style.display = 'none';\r\n\r\n \/\/ Validasi input\r\n if (!validateCoordinate(latA, lngA)) {\r\n document.getElementById('errorA').textContent = \"Koordinat titik A tidak valid\";\r\n document.getElementById('errorA').style.display = 'block';\r\n return;\r\n }\r\n if (!validateCoordinate(latB, lngB)) {\r\n document.getElementById('errorB').textContent = \"Koordinat titik B tidak valid\";\r\n document.getElementById('errorB').style.display = 'block';\r\n return;\r\n }\r\n\r\n \/\/ Hapus marker dan rute yang ada\r\n markers.forEach(marker => map.removeLayer(marker));\r\n markers = [];\r\n if (routingControl) {\r\n map.removeControl(routingControl);\r\n }\r\n\r\n \/\/ Buat titik koordinat\r\n const pointA = L.latLng(latA, lngA);\r\n const pointB = L.latLng(latB, lngB);\r\n\r\n \/\/ Tambah marker baru\r\n const markerA = L.marker(pointA).addTo(map).bindPopup('Titik A (Asal)');\r\n const markerB = L.marker(pointB).addTo(map).bindPopup('Titik B (Tujuan)');\r\n markers.push(markerA, markerB);\r\n\r\n \/\/ Tambah rute baru\r\n routingControl = L.Routing.control({\r\n waypoints: [pointA, pointB],\r\n routeWhileDragging: true,\r\n showAlternatives: true,\r\n altLineOptions: {\r\n styles: [\r\n {color: 'black', opacity: 0.15, weight: 9},\r\n {color: 'white', opacity: 0.8, weight: 6},\r\n {color: 'blue', opacity: 0.5, weight: 2}\r\n ]\r\n }\r\n }).addTo(map);\r\n\r\n \/\/ Event listener untuk info rute\r\n routingControl.on('routesfound', function(e) {\r\n const routes = e.routes;\r\n const summary = routes[0].summary;\r\n const distance = summary.totalDistance;\r\n const time = summary.totalTime;\r\n\r\n document.getElementById('routeInfo').innerHTML = `\r\n <strong>Informasi Rute:<\/strong><br>\r\n Jarak: ${(distance\/1000).toFixed(2)} km<br>\r\n Waktu Tempuh (estimasi): ${Math.round(time\/60)} menit\r\n `;\r\n });\r\n\r\n \/\/ Sesuaikan tampilan peta\r\n const bounds = L.latLngBounds([pointA, pointB]);\r\n map.fitBounds(bounds, {padding: [50, 50]});\r\n }\r\n \r\n \r\n\r\n \/\/ Inisialisasi peta saat halaman dimuat\r\n initMap();\r\n \r\n \r\n \r\n \r\n \r\n \r\n function showTooltip(x, y, message = 'Tersalin!') {\r\n const tooltip = document.getElementById('copyTooltip');\r\n tooltip.textContent = message;\r\n tooltip.style.display = 'block';\r\n tooltip.style.left = `${x}px`;\r\n tooltip.style.top = `${y - 30}px`;\r\n \r\n setTimeout(() => {\r\n tooltip.style.display = 'none';\r\n }, 1000);\r\n }\r\n\r\n \/\/ Fungsi untuk menyalin koordinat individual\r\n async function copyCoordinate(elementId) {\r\n const input = document.getElementById(elementId);\r\n const text = input.value;\r\n \r\n try {\r\n await navigator.clipboard.writeText(text);\r\n const rect = input.getBoundingClientRect();\r\n showTooltip(rect.left + rect.width\/2, rect.top);\r\n } catch (err) {\r\n console.error('Gagal menyalin teks:', err);\r\n alert('Gagal menyalin koordinat');\r\n }\r\n }\r\n\r\n \/\/ Fungsi untuk menyalin semua koordinat point A\r\n async function copyAllCoordinatesA() {\r\n const latA = document.getElementById('latA').value;\r\n const lngA = document.getElementById('lngA').value;\r\n const coordinates = `${latA}, ${lngA}`;\r\n \r\n try {\r\n await navigator.clipboard.writeText(coordinates);\r\n const button = event.target;\r\n const rect = button.getBoundingClientRect();\r\n showTooltip(rect.left + rect.width\/2, rect.top, 'Koordinat A tersalin!');\r\n } catch (err) {\r\n console.error('Gagal menyalin teks:', err);\r\n alert('Gagal menyalin koordinat');\r\n }\r\n }\r\n \r\n \/\/\/ scrippp buka d Google Maps==================================== dibawah ini\r\n \r\n function openInGoogleMaps(mode) {\r\n const latA = document.getElementById('latA').value;\r\n const lngA = document.getElementById('lngA').value;\r\n const latB = document.getElementById('latB').value;\r\n const lngB = document.getElementById('lngB').value;\r\n\r\n let googleMapsUrl;\r\n if (mode === 'walking') {\r\n \/\/ Mode jalan kaki\r\n googleMapsUrl = `https:\/\/www.google.com\/maps\/dir\/?api=1&origin=${latA},${lngA}&destination=${latB},${lngB}&travelmode=walking`;\r\n } else {\r\n \/\/ Mode mobil\r\n googleMapsUrl = `https:\/\/www.google.com\/maps\/dir\/?api=1&origin=${latA},${lngA}&destination=${latB},${lngB}&travelmode=driving`;\r\n }\r\n \r\n window.open(googleMapsUrl, '_blank');\r\n}\r\n\r\n\/\/ Modifikasi fungsi updateRoute untuk menampilkan tombol-tombol transportasi\r\n function updateRoute() {\r\n \/\/ ... (kode yang sudah ada) ...\r\n \r\n \/\/ Setelah bagian map.fitBounds, ganti tampilan tombol Google Maps\r\n document.getElementById('transportButtons').style.display = 'grid';\r\n }\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\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 Rute Kustom \ud83d\udccdHitung Rute Kustom Gunakan Lokasi Saat Ini Dari Titik Sini Latitude Copy Longitude Copy Copy Semua Koordinat A Tersalin! Titik B (Tujuan) Latitude Longitude Tampilkan Rute \ud83d\ude97 Rute Mobil \ud83d\udeb6 Rute Jalan Kaki<\/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\/122"}],"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=122"}],"version-history":[{"count":94,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/122\/revisions"}],"predecessor-version":[{"id":472,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/122\/revisions\/472"}],"wp:attachment":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/media?parent=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Pelacak Rute Kustom<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet-routing-machine@3.2.12\/dist\/leaflet-routing-machine.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: 800px;\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 }\r\n\r\n .card-content {\r\n padding: 20px;\r\n }\r\n\r\n .input-group {\r\n margin-bottom: 15px;\r\n background: #f8f9fa;\r\n padding: 15px;\r\n border-radius: 8px;\r\n }\r\n\r\n .coordinate-inputs {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 10px;\r\n margin-top: 10px;\r\n }\r\n\r\n .input-field {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n input[type=\"text\"] {\r\n padding: 8px;\r\n border: 1px solid #ddd;\r\n border-radius: 4px;\r\n margin-top: 5px;\r\n }\r\n\r\n label {\r\n font-weight: bold;\r\n color: #4a90e2;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .btn {\r\n background: #4a90e2;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 1em;\r\n width: 100%;\r\n margin-top: 10px;\r\n }\r\n\r\n .btn:hover {\r\n background: #357abd;\r\n }\r\n\r\n .location-details {\r\n margin-top: 20px;\r\n background: #f8f9fa;\r\n padding: 15px;\r\n border-radius: 8px;\r\n }\r\n\r\n #map {\r\n height: 400px;\r\n width: 100%;\r\n border-radius: 8px;\r\n margin-top: 20px;\r\n }\r\n\r\n .error-message {\r\n color: #dc3545;\r\n font-size: 0.9em;\r\n margin-top: 5px;\r\n display: none;\r\n }\r\n\r\n .current-location-btn {\r\n background: #28a745;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .current-location-btn:hover {\r\n background: #218838;\r\n }\r\n\r\n .route-info {\r\n margin-top: 15px;\r\n padding: 10px;\r\n background: #e9ecef;\r\n border-radius: 4px;\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n .copy-coord-btn {\r\n background: #6c757d;\r\n color: white;\r\n border: none;\r\n padding: 5px 10px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 0.8em;\r\n margin-left: 5px;\r\n }\r\n\r\n .copy-coord-btn:hover {\r\n background: #5a6268;\r\n }\r\n\r\n .input-with-copy {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .copy-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 z-index: 1000;\r\n }\r\n\r\n \/* Style untuk container input *\/\r\n .input-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n }\r\n \r\n \r\n \/* Tambahkan di bagian style *\/\r\n #googleMapsBtn {\r\n background: #dd4b39;\r\n display: none;\r\n transition: background-color 0.3s;\r\n}\r\n\r\n#googleMapsBtn:hover {\r\n background: #c23321;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n.transport-buttons {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 10px;\r\n margin-top: 15px;\r\n}\r\n\r\n.transport-btn {\r\n margin: 0 !important;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n}\r\n\r\n\/* Hover effect untuk tombol transportasi *\/\r\n.transport-btn:hover {\r\n opacity: 0.9;\r\n transform: translateY(-1px);\r\n transition: all 0.2s;\r\n}\r\n\r\n\/* Warna spesifik untuk setiap mode *\/\r\n.transport-btn[onclick*=\"driving\"] {\r\n background: #dd4b39;\r\n}\r\n\r\n.transport-btn[onclick*=\"walking\"] {\r\n background: #28a745;\r\n}\r\n\r\n\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\udccdHitung Rute Kustom\r\n <\/div>\r\n <div class=\"card-content\">\r\n <button class=\"btn current-location-btn\" onclick=\"useCurrentLocation()\">\r\n Gunakan Lokasi Saat Ini\r\n <\/button>\r\n\r\n <div class=\"input-group\">\r\n <label>Dari Titik Sini <\/label>\r\n <div class=\"coordinate-inputs\">\r\n <div class=\"input-field\">\r\n <label>Latitude<\/label>\r\n <div class=\"input-with-copy\">\r\n <div class=\"input-container\">\r\n <input type=\"text\" id=\"latA\" placeholder=\"Contoh: -5.3759951\">\r\n <\/div>\r\n <button class=\"copy-coord-btn\" onclick=\"copyCoordinate('latA')\">\r\n Copy\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"input-field\">\r\n <label>Longitude<\/label>\r\n <div class=\"input-with-copy\">\r\n <div class=\"input-container\">\r\n <input type=\"text\" id=\"lngA\" placeholder=\"Contoh: 105.2398698\">\r\n <\/div>\r\n <button class=\"copy-coord-btn\" onclick=\"copyCoordinate('lngA')\">\r\n Copy\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"copy-coord-btn\" style=\"margin-top: 10px;\" onclick=\"copyAllCoordinatesA()\">\r\n Copy Semua Koordinat A\r\n <\/button>\r\n <div class=\"error-message\" id=\"errorA\"><\/div>\r\n <\/div>\r\n\r\n \r\n\r\n <div class=\"copy-tooltip\" id=\"copyTooltip\">Tersalin!<\/div>\r\n\r\n <div class=\"input-group\">\r\n <label>Titik B (Tujuan)<\/label>\r\n <div class=\"coordinate-inputs\">\r\n <div class=\"input-field\">\r\n <label>Latitude<\/label>\r\n <input type=\"text\" id=\"latB\" placeholder=\"Contoh: -5.3825561\">\r\n <\/div>\r\n <div class=\"input-field\">\r\n <label>Longitude<\/label>\r\n <input type=\"text\" id=\"lngB\" placeholder=\"Contoh: 105.2479806\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"error-message\" id=\"errorB\"><\/div>\r\n <\/div>\r\n\r\n <button class=\"btn\" onclick=\"updateRoute()\">Tampilkan Rute<\/button>\r\n\r\n <div id=\"map\"><\/div>\r\n <div id=\"routeInfo\" class=\"route-info\"><\/div>\r\n \r\n \r\n \r\n <div class=\"transport-buttons\" style=\"display: none;\" id=\"transportButtons\">\r\n <button class=\"btn transport-btn\" onclick=\"openInGoogleMaps('driving')\" style=\"background: #dd4b39;\">\r\n \ud83d\ude97 Rute Mobil\r\n <\/button>\r\n <button class=\"btn transport-btn\" onclick=\"openInGoogleMaps('walking')\" style=\"background: #28a745;\">\r\n \ud83d\udeb6 Rute Jalan Kaki\r\n <\/button>\r\n<\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/leaflet-routing-machine@3.2.12\/dist\/leaflet-routing-machine.js\"><\/script>\r\n\r\n <script>\r\n let map, routingControl;\r\n let markers = [];\r\n\r\n \/\/ Inisialisasi peta\r\n function initMap() {\r\n map = L.map('map').setView([-5.3792156, 105.2410178], 13);\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 }\r\n\r\n \/\/ Gunakan lokasi saat ini\r\n function useCurrentLocation() {\r\n if (navigator.geolocation) {\r\n navigator.geolocation.getCurrentPosition(\r\n (position) => {\r\n document.getElementById('latA').value = position.coords.latitude;\r\n document.getElementById('lngA').value = position.coords.longitude;\r\n },\r\n (error) => {\r\n document.getElementById('errorA').textContent = \"Tidak dapat mengakses lokasi: \" + error.message;\r\n document.getElementById('errorA').style.display = 'block';\r\n }\r\n );\r\n } else {\r\n document.getElementById('errorA').textContent = \"Geolocation tidak didukung oleh browser ini\";\r\n document.getElementById('errorA').style.display = 'block';\r\n }\r\n }\r\n\r\n \/\/ Validasi input koordinat\r\n function validateCoordinate(lat, lng) {\r\n const latNum = parseFloat(lat);\r\n const lngNum = parseFloat(lng);\r\n \r\n if (isNaN(latNum) || isNaN(lngNum)) {\r\n return false;\r\n }\r\n \r\n if (latNum < -90 || latNum > 90 || lngNum < -180 || lngNum > 180) {\r\n return false;\r\n }\r\n \r\n return true;\r\n }\r\n\r\n \/\/ Update rute\r\n function updateRoute() {\r\n \/\/ Ambil nilai input\r\n const latA = document.getElementById('latA').value;\r\n const lngA = document.getElementById('lngA').value;\r\n const latB = document.getElementById('latB').value;\r\n const lngB = document.getElementById('lngB').value;\r\n\r\n \/\/ Reset pesan error\r\n document.getElementById('errorA').style.display = 'none';\r\n document.getElementById('errorB').style.display = 'none';\r\n\r\n \/\/ Validasi input\r\n if (!validateCoordinate(latA, lngA)) {\r\n document.getElementById('errorA').textContent = \"Koordinat titik A tidak valid\";\r\n document.getElementById('errorA').style.display = 'block';\r\n return;\r\n }\r\n if (!validateCoordinate(latB, lngB)) {\r\n document.getElementById('errorB').textContent = \"Koordinat titik B tidak valid\";\r\n document.getElementById('errorB').style.display = 'block';\r\n return;\r\n }\r\n\r\n \/\/ Hapus marker dan rute yang ada\r\n markers.forEach(marker => map.removeLayer(marker));\r\n markers = [];\r\n if (routingControl) {\r\n map.removeControl(routingControl);\r\n }\r\n\r\n \/\/ Buat titik koordinat\r\n const pointA = L.latLng(latA, lngA);\r\n const pointB = L.latLng(latB, lngB);\r\n\r\n \/\/ Tambah marker baru\r\n const markerA = L.marker(pointA).addTo(map).bindPopup('Titik A (Asal)');\r\n const markerB = L.marker(pointB).addTo(map).bindPopup('Titik B (Tujuan)');\r\n markers.push(markerA, markerB);\r\n\r\n \/\/ Tambah rute baru\r\n routingControl = L.Routing.control({\r\n waypoints: [pointA, pointB],\r\n routeWhileDragging: true,\r\n showAlternatives: true,\r\n altLineOptions: {\r\n styles: [\r\n {color: 'black', opacity: 0.15, weight: 9},\r\n {color: 'white', opacity: 0.8, weight: 6},\r\n {color: 'blue', opacity: 0.5, weight: 2}\r\n ]\r\n }\r\n }).addTo(map);\r\n\r\n \/\/ Event listener untuk info rute\r\n routingControl.on('routesfound', function(e) {\r\n const routes = e.routes;\r\n const summary = routes[0].summary;\r\n const distance = summary.totalDistance;\r\n const time = summary.totalTime;\r\n\r\n document.getElementById('routeInfo').innerHTML = `\r\n <strong>Informasi Rute:<\/strong><br>\r\n Jarak: ${(distance\/1000).toFixed(2)} km<br>\r\n Waktu Tempuh (estimasi): ${Math.round(time\/60)} menit\r\n `;\r\n });\r\n\r\n \/\/ Sesuaikan tampilan peta\r\n const bounds = L.latLngBounds([pointA, pointB]);\r\n map.fitBounds(bounds, {padding: [50, 50]});\r\n }\r\n \r\n \r\n\r\n \/\/ Inisialisasi peta saat halaman dimuat\r\n initMap();\r\n \r\n \r\n \r\n \r\n \r\n \r\n function showTooltip(x, y, message = 'Tersalin!') {\r\n const tooltip = document.getElementById('copyTooltip');\r\n tooltip.textContent = message;\r\n tooltip.style.display = 'block';\r\n tooltip.style.left = `${x}px`;\r\n tooltip.style.top = `${y - 30}px`;\r\n \r\n setTimeout(() => {\r\n tooltip.style.display = 'none';\r\n }, 1000);\r\n }\r\n\r\n \/\/ Fungsi untuk menyalin koordinat individual\r\n async function copyCoordinate(elementId) {\r\n const input = document.getElementById(elementId);\r\n const text = input.value;\r\n \r\n try {\r\n await navigator.clipboard.writeText(text);\r\n const rect = input.getBoundingClientRect();\r\n showTooltip(rect.left + rect.width\/2, rect.top);\r\n } catch (err) {\r\n console.error('Gagal menyalin teks:', err);\r\n alert('Gagal menyalin koordinat');\r\n }\r\n }\r\n\r\n \/\/ Fungsi untuk menyalin semua koordinat point A\r\n async function copyAllCoordinatesA() {\r\n const latA = document.getElementById('latA').value;\r\n const lngA = document.getElementById('lngA').value;\r\n const coordinates = `${latA}, ${lngA}`;\r\n \r\n try {\r\n await navigator.clipboard.writeText(coordinates);\r\n const button = event.target;\r\n const rect = button.getBoundingClientRect();\r\n showTooltip(rect.left + rect.width\/2, rect.top, 'Koordinat A tersalin!');\r\n } catch (err) {\r\n console.error('Gagal menyalin teks:', err);\r\n alert('Gagal menyalin koordinat');\r\n }\r\n }\r\n \r\n \/\/\/ scrippp buka d Google Maps==================================== dibawah ini\r\n \r\n function openInGoogleMaps(mode) {\r\n const latA = document.getElementById('latA').value;\r\n const lngA = document.getElementById('lngA').value;\r\n const latB = document.getElementById('latB').value;\r\n const lngB = document.getElementById('lngB').value;\r\n\r\n let googleMapsUrl;\r\n if (mode === 'walking') {\r\n \/\/ Mode jalan kaki\r\n googleMapsUrl = `https:\/\/www.google.com\/maps\/dir\/?api=1&origin=${latA},${lngA}&destination=${latB},${lngB}&travelmode=walking`;\r\n } else {\r\n \/\/ Mode mobil\r\n googleMapsUrl = `https:\/\/www.google.com\/maps\/dir\/?api=1&origin=${latA},${lngA}&destination=${latB},${lngB}&travelmode=driving`;\r\n }\r\n \r\n window.open(googleMapsUrl, '_blank');\r\n}\r\n\r\n\/\/ Modifikasi fungsi updateRoute untuk menampilkan tombol-tombol transportasi\r\n function updateRoute() {\r\n \/\/ ... (kode yang sudah ada) ...\r\n \r\n \/\/ Setelah bagian map.fitBounds, ganti tampilan tombol Google Maps\r\n document.getElementById('transportButtons').style.display = 'grid';\r\n }\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\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 Rute Kustom \ud83d\udccdHitung Rute Kustom Gunakan Lokasi Saat Ini Dari Titik Sini Latitude Copy Longitude Copy Copy Semua Koordinat A Tersalin! Titik B (Tujuan) Latitude Longitude Tampilkan Rute \ud83d\ude97 Rute Mobil \ud83d\udeb6 Rute Jalan Kaki<\/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\/122"}],"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=122"}],"version-history":[{"count":94,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/122\/revisions"}],"predecessor-version":[{"id":472,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/122\/revisions\/472"}],"wp:attachment":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/media?parent=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}