Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver (Part 2)

Pada postingan sebelumnya saya membahas tentang bagaimana menampilkan peta dan marker menggunakan data dari Geoserver dan Leaflet Javascript Library.

Karena masih ada fitur yang kurang pada part 1 kemarin, maka sekarang saya akan melengkapi kekurangan fitur tersebut.

Tentunya ketika kita berhadapan dengan suatu webGIS, biasanya disediakan pilihan peta, apakah itu peta jalan, satelit, dsb.

Masukkan kode berikut pada fungsi initialize

Kode diatas akan menghasilkan 3 jenis layer, yaitu peta jalan, peta satelit, dan hybrid(campuran jalan dan satelit), silakan test pada browser, jika terdapat pilihan layer di sebelah kanan atas berarti kode diatas berhasil.

Setelah itu kita akan mengganti icon dari puskesmas dengan icon yang lebih merepresentasikan suatu puskesmas. .

Kode diatas digunakan untuk mengganti icon, silakan ganti iconUrl dengan icon milik anda sendiri

Dan pada marker ganti kodenya menjadi seperti berikut, kode ini nanti sekalian digunakan untuk getDirections

Pada WebGIS biasanya juga tersedia fitur routing yang menampilkan rute jalan dari suatu tempat ke tempat lain, tambahkan kode berikut pada fungsi initialize

dan juga tambahkan fungsi berikut untuk getDirections,

fungsi getDirections diatas belum bisa dijalankan karena kita belum tau posisi awal dari start request. Untuk itu kita perlu menambahkan pilihan lokasi user dengan fitur geocoding. Maka tambahkan kode html berikut dibawah map id

Dalam geocoding kita menggunakan bantuan dari Google Maps Geocoding service untuk menemukan lokasi dari tempat yang kita input.

Oh iya, jangan lupa juga masukkan API Key untuk akses ke MapQuest Routing Plugin agar getDirection bisa berjalan

Jika kode anda benar maka tampilan aplikasi kita akan menjadi seperti berikut