Membuat Dropdown Menu Interaktif WebGIS Menggunakan AJAX

 

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability (Wikipedia).

Sedangkan WebGIS adalah web yang digunakan untuk menampilkan data geografis yang bersifat keruangan dan memiliki titik koordinat.

Berikut adalah langkah-langkah pembuatan Dropdown menu tersebut:

  1. Dalam Tutorial ini kita akan membuat Tiga Buah Dropdown menu Berupa data,Provinsi,Kabupaten dan Kecamatan.
  2. Saat salah satu list provinsi ditekan, maka sistem akan memanggil data Kabupaten yang sesuai dengan Provinsi yang di klik oleh user tanpa me load halaman yang ada.
  3. Marker secara otomatis di buat ke center dari provinsi yang dipilih.

Screenshoot :

 

Nah, berikut ini adalah kodingan


// Ajax Show Kabupaten

$(document).ready(function(){

$('#provinsi').on('change',function(){

var provinsi = $(this).val();

if(provinsi){

$.ajax({

type:'GET',

url:'../../../server/proses/postkabupaten.php?provinsi='+provinsi,

success:function(html){

alert(html);

data=html.split('|');

markerprov(data[0]);

jumlah_kab=data.length;

alert(jumlah_kab);

// $('#kabupaten').html('<option value="'+data+'">'+data+'</option>');

var hapus = document.getElementById("kabupaten");

$('#kabupaten').children().remove().end();

i=1;

while(i<=jumlah_kab-2)

{

// alert(i);

var x1 = document.getElementById("kabupaten");

var option1 = document.createElement("option");

option1.text = data[i];

option1.value = data[i];

x1.add(option1);

i++;

}

}

});

}else{

// $('#kabupaten').html('<option value="">- tidak ditemukan -</option>');

}

});

});

 

Penjelasan:

Ajax tersebut di set dengan fungsi Onclick, yang mana setiap user mengklik data yang ada di Dropdown, maka fungsi Ajax yang dibuat akan dipanggil.


type:'GET',

url:'../../../server/proses/postkabupaten.php?provinsi='+provinsi,

success:function(html){

 

Potongan kodingan di atas digunakan untuk mengirim data menggunakan GET ke halaman postkabupaten.php.

Data yang dikirim berupa nama Provinsi yang di klik oleh user. Nama Provinsi ini akan digunakan pada postkabupaten untuk mencari kabupaten apa saja yang berada didalam provinsi tersebut.

Berikut adalah kodingan postkabupaten.php.


include "../connect.php";

$provinsi=$_GET['provinsi'];

$sql = "SELECT ST_AsGeojson(ST_centroid(geom)) as geometry FROM indonesia_prop WHERE propinsi='$provinsi'";

$result = pg_query($sql);

while($a = pg_fetch_assoc($result)){

                   $x = JSON_ENCODE($a['geometry']);

echo substr($x,38,-3)."|";

}

$carikabupaten = "SELECT kabupaten_ FROM public.indonesia_kab WHERE UPPER(provinsi)='$provinsi'";

$i=0;

$result = pg_query($carikabupaten);

while($ai = pg_fetch_assoc($result)){

    $xi[$i] = $ai['kabupaten_'];

    echo $xi[$i]."|";

    $i++;

}

?

 

Selanjutnya semua data yang di Echo kan pada postkabupaten.php akan di ambil oleh potongan kode pada Ajax.


success:function(html){

alert(html);

 

Apabila Ajax Sukses maka semua data yang di echo kan akan disimpan kedalam variabel html.

Berikut adalah tampilan alert dari data yang didapatkan.

 

Setelah data berhasil didapatkan, maka data akan di tambahkan kedalam dropdown yang masih kosong dengan mamanfaatkan id dari Dropdown tersebut.


var hapus = document.getElementById("kabupaten");

 

Selanjutnya, semua data yang didapatkan ditambahkan kedalam Dropdown menu kedua menggunakan perintah berikut:


while(i<=jumlah_kab-2)

{

// alert(i);

var x1 = document.getElementById("kabupaten");

var option1 = document.createElement("option");

option1.text = data[i];

option1.value = data[i];

x1.add(option1);

i++;

}

 

Setiap ajax di panggil, ajax juga akan memanggil fungsi markerprov  dibuat menggunakan

markerprov(data[0]);

Dan berikut adalah penggalan kode untuk menampilkan Marker sesuai dengan koordinat dari masing-masing provinsi:


function markerprov(html)

{

test=html.split(',');

console.log(test[0]);

console.log(test[1]);

var marker = L.marker([test[1],test[0]]).addTo(mymap);

// alert("Masooook Pak Ekoo!!");

// mymap.panTo(new L.LatLng(test[1], test[0]));



mymap.setView(new L.LatLng(test[1], test[0]), 12);

}

Koordinat masing-masing provinsi itu sendiri didapat dari perintah sql pada postkabupaten yang telah dibuatkan sebelumnya:

$sql = "SELECT ST_AsGeojson(ST_centroid(geom)) as geometry FROM indonesia_prop WHERE propinsi='$provinsi'";

Penjelasan:

  • Data polygon dalam bentuk geom di ambil koordinat tengahnya menggunkan fungsi ST_Centroid pada Postgis.
  • Selanjutnya data koordinat tersebut dirubah kedalam bentuk GeoJSON menggunakan perintah ST_AsGeoJSON() yang juga disediakan oleh POSTGIS.

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.