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:

Contoh Animasi Marker

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:

Snippet 1. Inisialisasi Map dengan SVG layer

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.

Snippet 2. Data Marker

3. Code your Page!

Tahapan berikutnya adalah membuat sebuah function yang berfungsi untuk menambah marker, berdasarkan data marker yang sudah disiapkan sebelumnya.

Snippet 3. import icon asset

Untuk asset, bisa didapatkan di FlatIcon.

Snippet 3. Fungsi Draw Marker

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:

Snippet 4. Fungsi tambahan

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):

Snippet 5. Hasil akhir 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.