Peta Rute Perjalanan Nyata & Animasi Jalan
Menampilkan garis jalan raya asli dari satu tempat wisata ke tempat berikutnya di atas peta, lengkap dengan titik urutan kunjungan yang mudah diikuti.
Menampilkan garis jalan raya asli dari satu tempat wisata ke tempat berikutnya di atas peta, lengkap dengan titik urutan kunjungan yang mudah diikuti.
Tantangan & Kebutuhan Pengguna
Menghubungkan titik koordinat wisata di atas peta hanya dengan garis lurus sering kali memberikan gambaran jarak dan arah yang keliru karena melintasi sungai, gunung, atau area tanpa akses jalan. Selain itu, pengguna membutuhkan visualisasi dinamis untuk memahami alur perpindahan dari destinasi pertama di Hari 1 hingga titik terakhir di Hari ke-N.
Visualisasi geospasial yang imersif harus mengikuti geometri jalan nyata dan memperlihatkan kontinuitas pergerakan antar-waktu secara mulus di sisi klien.
Solusi & Cara Kerja
Halaman hasil itinerary mengelompokkan titik koordinat berdasarkan hari kunjungan, lalu melakukan request asinkron ke endpoint publik OSRM (`router.project-osrm.org/route/v1/driving/`) dengan parameter `overview=full&geometries=geojson`. Geometri jalan tiap hari digambar dengan palet warna berbeda dan dihubungkan oleh poligon konektor bergaris putus-putus (`dashArray`) untuk perpindahan antar-hari. Seluruh titik jalan dirangkai menjadi satu array `fullRouteCoords` tanpa duplikasi titik sambung, lalu diiterasi menggunakan `requestAnimationFrame` dengan perhitungan sudut arah (`Math.atan2`) dan jejak garis (*trail*) di belakang pointer.
Berikut adalah fungsi pengambilan geometri jalan OSRM dan loop animasi berotasi dari `resources/views/public/trip-planner-result.blade.php`:
Detail & Hal yang Diperhatikan
- Inversi urutan koordinat GeoJSON vs Leaflet: Standar OSRM dan GeoJSON menggunakan format `[longitude, latitude]`, sedangkan Leaflet menggunakan `[latitude, longitude]`. Transformasi bolak-balik dilakukan secara konsisten di dalam `fetchRoadRoute`.
- Eliminasi titik duplikat antar-segmen: Saat menyambung segmen jalan Hari N dengan konektor menuju Hari N+1, pemotongan `seg.slice(1)` diterapkan agar titik akhir dan titik awal yang identik tidak menumpuk dan membuat animasi tersendat.
- Optimasi performa rotasi DOM: Menginstansiasi ulang `L.divIcon` pada setiap tick animasi menyebabkan *layout thrashing*. Solusinya adalah meng-update koordinat lewat `setLatLng()` dan memutar elemen `#pointerWrapper` secara langsung melalui properti CSS `transform`.
Fungsi `fetchRoadRoute` dilengkapi blok `catch` yang otomatis melakukan *graceful degradation* ke garis lurus antar-koordinat apabila server publik OSRM sedang mengalami gangguan atau rate-limit.