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:
tematik indonesia leaflet

Kita bisa ganti-ganti peta dasarnya dengan mengklik di sebelah pojok kanan atas peta

tematik indonesia leaflet

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

tematik indonesia

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


You Might Also Like

0 comments