Animasi Marker dengan React dan Leaflet
Membuat custom marker dengan animasi menggunakan leaflet dan react.
Tulisan kali ini akan membahas langkah-langkah membuat animasi marker pada Leaflet dengan mudah.
Hasil yang diharapkan setelah mengikuti tutorial ini:
Tutorial ini ditujukan untuk kalian yang sudah mempunyai pengetahuan dasar tentang React dan Leaflet, dan merupakan lanjutan dari artikel sebelumnya. Silahkan mengunduh repository, yang juga digunakan pada artikel sebelumnya, sebelum melanjutkan tutorial berikut.
1. Inisialisasi SVG Layer
Marker yang akan kita buat merupakan element SVG. Cara untuk menambahkan SVG layer pada Leaflet:
2. Menyiapkan data marker
Siapkan terlebih dahulu data yang dibutuhkan untuk marker yang akan digunakan. Tipe data yang dibutuhkan adalah latitude dan longitude, yang dapat kalian peroleh melalui Google Maps. Data yang digunakan dalam tutorial ini telah di-hardcode pada state react seperti contoh dibawah ini.
3. Code your Page!
Tahapan berikutnya adalah membuat sebuah function yang berfungsi untuk menambah marker, berdasarkan data marker yang sudah disiapkan sebelumnya.
Untuk asset, bisa didapatkan di FlatIcon.
Jika diperhatikan, function initializeMap (Snippet 1 di atas) memanggil fungsi this.drawMarker() untuk melakukan drawing marker.
Pada snippet 3, pada masing-masing baris code sudah diberikan penjelasan (klik gambar untuk melihat code lebih jelas).
Di beberapa bagian (e.g. line 4, 22, 26, etc.) terdapat function projectPoint dan updateMarker yang dipanggil. Implementasi dari kedua fungsi tersebut adalah sebagai berikut:
projectPoint berfungsi untuk mengkonversi data latitude dan longitude menjadi titik piksel x dan y di layer SVG, sementara fungsi updateMarker akan memperbaharui posisi marker.
Hasil akhir atau implementasi animasi marker dengan React dan Leaflet (full code):
Mari kita lihat hasilnya dengan menjalankan server pada local machine dengan perintah berikut ini:
npm start
Hover mouse di atas salah satu icon awan yang tersedia untuk melihat animasi yang telah kita buat.
Selamat, sekarang anda telah berhasil melakukan animasi marker sederhana dengan menggunakan React dan Leaflet.
GitHub Repo.