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

10:08 AM

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

Part 1-Membuat WebGIS Puskesmas GK Leaflet dan Geoserver

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

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

Tentunya ketika kita berhadapan dengan suatu webGIS, biasanya disediakan pilihan peta, apakah itu peta jalan, satelit, dsb.
Nah sekarang akan kita tambahkan pilihan layer tersebut pada peta kita.
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. .
:D
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
Dan tambahkan fungsi geocoding berikut
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
Berikut kode javascript lengkap dari aplikasi kita

Jika kode anda benar maka tampilan aplikasi kita akan menjadi seperti berikut
 
Geoserver Leaflet WebGIS Puskesmas Gunungkidul
  
Semoga Bermanfaat, GBU ^_^

You Might Also Like

1 comments

  1. kalo mau menampilkan area poligon nya satu daerah saja tanpa menampilkan daerah yang lain ,dalam artian fokus peta satu wilayah kabupaten saja,kira2 cara nya gmna ya mas? nuwun...

    ReplyDelete