Membuat Peta Tematik Menggunakan Geoserver, MySQL, dan Leaflet (Peta Jumlah Penduduk) PART 2
4:06 PM
Setelah sekian lama akhirnya nulis juga part 2 nya, hhe. .
Tutorial ini adalah lanjutan dari tutorial sebelumnya, . .
PART 1
Sekarang kita akan membuat peta kita tampak lebih menarik lagi dengan menambahkan beberapa plugin leaflet. .
Membuat Peta Tematik Menggunakan Geoserver, MySQL, dan Leaflet
Yang akan kita tambahkan dalam tutorial kali ini adalah sebagai berikut:
- Inset peta
- Geosearch
- Pemilihan Base Map (Layer Provider)
- Style
Silakan download terlebih dulu plugin-plugin nya di sini
Copy dan extract file-file diatas di folder project kita. .
Setelah itu kita panggil plugin-plugin di atas pada file javascript kita. .
<script src="geosearch/src/js/l.control.geosearch.js"></script>
<script src="geosearch/src/js/l.geosearch.provider.google.js"></script>
<script src="minimap/src/Control.MiniMap.js"></script>
<script src="provider/leaflet-providers.js"></script>
dan css nya. .
<link rel="stylesheet" href="geosearch/src/css/l.geosearch.css" />
<link rel="stylesheet" href="minimap/src/Control.MiniMap.css" />
Sesuaikan pemanggilan plugin dengan nama folder hasil extract
Setelah itu kita hapus dulu base map yang telah kita buat sebelumnya, hapus baris yang ada kata berikut:
Dan tambahkan baris berikut pada function initialize() untuk menampilkan plugin yang telah kita download dan panggil tadi
Jika sudah, maka hasilnya akan menjadi seperti berikut:
Kita bisa ganti-ganti peta dasarnya dengan mengklik di sebelah pojok kanan atas peta
Silakan cek juga geosearch nya bisa digunakan atau tidak, inset peta akan mengikuti lokasi aktif pada peta utama.
Jika dilihat-lihat, menurut saya warna polygon nya kurang mencolok mata, hhe, sekarang kita ubah style nya agar lebih bagus lagi (menurut saya) kalau menurut anda sudah bagus ya tidak apa-apa begitu saja. .
Supaya gampang, kita overwrite saja style lama yang kita buat sebelumnya. .
Ganti style lama menjadi seperti berikut
Selain itu sekalian juga kita buat fungsi untuk mengganti border polygon ketika mouse kita arahkan. .
Tambahkan function berikut di bawah style yang kita ganti tadi, sebelum function initialize()
Setelah itu, untuk memanggil function yang sudah kita buat maka tambahkan baris berikut pada function onEachFeature
Setelah itu coba kita lihat pada browser hasilnya akan seperti berikut
Lebih menarik bukan?? oh iya, saya diatas menggunakan base map nokia satelite, coba juga untuk mengarahkan mouse ke polygon-polygon provinsi untuk mengecek apakah fungsi highlight berjalan dengan baik
Sekian tutorial kali ini, semoga bisa dilanjutkan ke part 3 nya, query kabupaten dan desa di geoserver. .
Semoga bermanfaat, GBU
0 comments