Integrasi React dengan Leaflet

Melakukan integrasi React dengan Leaflet yang mana cara menangani DOM berbeda satu sama lain.

Artikel ini akan menjelaskan bagaimana cara mengintegrasikan React dengan Leaflet.

Hasil yang diharapkan setelah tutorial ini:

Halaman web react yang dapat menampilkan peta.

Tutorial ini ditujukan untuk kalian yang sudah mempunyai pengetahuan dasar tentang React dan Leaflet. Pada tutorial berikutnya, akan dibahas lebih lanjut mengenai fitur-fitur yang lebih kompleks seperti marker, custom marker, svg, dan lain sebagainya.

1. Install create-react-app

create-react-app merupakan perangkat pembantu yang dikembangkan oleh komunitas React, untuk men-generate proyek React tanpa melakukan konfigurasi berlebih. Untuk menggunakan tool tersebut, install dengan cara berikut:

npm install -g create-react-app

*Note: disini saya menganggap perangkat yang anda gunakan sudah ter-install nodejs. Referensi instalasi nodejs dapat ditemukan di sini.

2. Generate new project

Generate project baru menggunakan perintah berikut:

create-react-app integrasi-react-dengan-leaflet

Setelah melakukan perintah diatas, akan muncul folder baru dengan nama integrasi-react-dengan-leaflet. Masuklah kedalam folder tersebut dan lakukan perintah berikut ini untuk melakukan update library pada project tersebut.

npm install

3. Code your page

Pada folder public, anda akan menemukan file index.html seperti dibawah ini:

index.html

Perhatikan line code 13 dan 14. Kedua line tersebut merupakan bagian dari Leaflet yang perlu kita import ke dalam project ini

“Bukankah import script seharusnya setelah body?”

Dalam kasus ini, React akan menjalankan semua script di bawah div id=”root”, sehingga modul Leaflet perlu diimpor terlebih dahulu agar ter-install saat React dijalankan.

Selanjutnya, bukalah file App.js pada folder src. Berikut saya tampilkan sebagian code dari App.js:

Perhatikan line code 5 dan 6. Pada line 5, saya melakukan deklarasi variabel L untuk load modul Leaflet dari native JavaScript (yang sebelumnya sudah di import index.html). Di line 6, saya melakukan deklarasi variabel global map yang nantinya akan di-assign pada object peta.

Selanjutnya masih pada file yang sama, App.js, perhatikan baris 4, 7 -17, dan 29.

App.js

Line 7 adalah fungsi utama untuk load map.

Line 8 adalah deklarasi objek peta menggunakan modul Leaflet (L.map), lalu di-assign ke dalam variabel global map yang sudah di-inisialisasi sebelumnya.

Line 13 menambahkan layer peta ke dalam objek map. Daftar peta yang dapat digunakan sebagai pilihan, dapat ditemukan pada link berikut.

Element div dengan id map kemudian ditambahkan pada Line 29.

Bila diperhatikan pada line 4, terdapat fungsi initializeMap untuk load peta. “Lalu mengapa load peta harus dilakukan saat mount component sudah dilakukan?” Hal ini karena Leaflet membutuhkan element dengan id “map” yang sudah di-generate sebelumnya.

Mari kita lihat hasilnya dengan menjalankan server lokal dengan perintah berikut:

npm start

Taddaaaa!! Selamat, sekarang anda telah berhasil melakukan integrasi sederhana React dengan Leaflet.

GitHub Repo.