Sesuai dengan tutorial sebelumnya, kali ini saya akan menunjukkan cara untuk menangkap koordinat hasil geocoding melalui plugin geosearch.

Sebelumnya download l.control.geosearch.js yang sudah saya edit

download l.control.geosearch.js

Setelah itu, overwrite file l.control.geosearch.js yang ada sebelumnya dengan file yang di atas.

Setelah itu buat function baru di luar function initialize yang telah dibuat sebelumnya seperti berikut:

variabel latitude dan longitude pada function showlokasi diatas adalah latitude dan longitude (koordinat) dari marker yang ada. Pengembangan lebih lanjut dari aplikasi bisa menggunakan latitude dan longitude yang telah didapat.

Kali ini saya akan memperkenalkan plugin leaflet yang bernama Geosearch, plugin ini dapat digunakan untuk mencari lokasi berdasarkan alamat tertentu atau lebih dikenal dengan nama geocoding.

Untuk menggunakan plugin ini tentunya pertama kita harus include plugin ini di project leaflet kita.

Css:

<link rel="stylesheet" href="geosearch/src/css/l.geosearch.css" />

js:

Untuk kode lengkap sampai dengan menampilkan peta adalah sebagai berikut:

Langsung saja, tutorial kali ini kita akan mempercantik marker yang ada pada leaflet menggunakan plugin awesome marker, contoh marker yang bisa kita buat adalah seperti berikut:

Lebih menarik bukan??

Untuk membuat marker yang seperti gambar diatas cukuplah mudah.

Plugin Leaflet Awesome Marker

Font Awesome

Include semua plugin yang ada di dalam project yang kita buat.

Dalam Structured Query Language(SQL) kita mengenal adanya WHERE clause ketika melakukan query. WHERE clause biasa digunakan jika kita ingin memberikan kondisi tertentu terhadap query yang kita lakukan. Sama dengan SQL, Filter pada geoserver digunakan ketika kita ingin memberikan kondisi tertentu terhadap data yang ingin kita tampilkan. .

Misal, kita memiliki data peta kabupaten di seluruh indonesia, maka logika yang tepat untuk menampilkan peta kabupaten yang berada di provinsi daerah istimewa Yogyakarta adalah. .

Dalam tutorial kali ini saya hanya akan memberikan contoh Comparison Operator saja, jenis Filter yang lain saya belum begitu paham dan mungkin bisa dibaca-baca sendiri di dokumentasi geoservernya. .

http://docs.geoserver.org/latest/en/user/styling/sld-reference/filters.html

Comparison operator digunakan untuk memberikan kondisi terhadap non-spatial atribute terhadap setiap feature yang ada, berikut beberapa contoh Comparison Operator

<PropertyIsEqualTo>

<PropertyIsNotEqualTo>

<PropertyIsLessThan>

<PropertyIsLessThanOrEqualTo>

<PropertyIsGreaterThan>

<PropertyIsGreaterThanOrEqualTo>

<PropertyIsLike>

<PropertyIsNull>

<PropertyIsBetween>

Cara menggunakan untuk yang <PropertyIsEqualTo> adalah seperti berikut:

<PropertyIsEqualTo>

<PropertyName>NAME</PropertyName>

<Literal>New York</Literal>

</PropertyIsEqualTo>

Sekarang langsung saja ke contoh penggunaannya, sama seperti contoh sebelumnya, kita akan menampilkan peta kabupaten kota Yogyakarta saja. Maka URL WFS nya adalah

http://localhost:4321/geoserver/belajar/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=belajar:kabupaten&outputFormat=json&filter=<PropertyIsEqualTo><PropertyName>PROVNO<PropertyName><Literal>34</Literal></PropertyIsEqualTo>

pada URL diatas saya merequest Web Feature Service (WFS) dari workspace belajar dan layer kabupaten, dalam layer kabupaten terdapat nama atribut PROVNO dan Literal berisi value dari PROVNO yang akan kita cari. .(34 adalah kode DIY)

Silakan coba Filter diatas pada browser anda, tentunya data peta kabupaten dan workspace geoserver sebelumnya sudah disiapkan dan disesuaikan, maka outputnya jika benar akan menjadi seperti di bawah ini. .

Setelah sekian lama akhirnya nulis juga part 2 nya, hhe. .

Tutorial ini adalah lanjutan dari tutorial sebelumnya, . .

PART 1