jump to navigation

AJAX, Database Spatial PostGIS, dan Google Maps API pada aplikasi webGIS: Pencarian objek spesifik pada area dalam radius tertentu April 26, 2010

Posted by irwankurniawan2010 in Uncategorized.
4 comments

Pencarian geografis yang diimplemtasikan pada tulisan ini adalah pencarian objek spesifik pada area dengan radius tertentu. Teknik  AJAX digunakan untuk mendapatkan nilai koordinat objek yang diperoleh dari server secara background. Data koordinat objek yang diperoleh melalui query yang dilakukan ke database spatial postgis. Kemudian hasil pencarian dibentuk sedemikian rupa ke dalam format XML menggunakan program PHP, kemudian  javascript membaca nilai koordinat yang terdapat pada data XML tadi dan selanjutnya di plot ke peta menggunakan fungsi pustaka dari google maps API.

Untuk dapat mencari objek spesifik pada area dalam radius tertentu digunakan 4 buah fungsi PostGIS yaitu:

  • Buffer: digunakan untuk membentuk objek geometry berupa area lingkaran dengan titik pusat dan radius tertentu
  • Contains: digunakan untuk mengecek apakah sebuah data geometry tertentu berada dalam lingkupan area dari data geometry lainnya
  • Distance_sphere: digunakan untuk mendapatkan jarak dari antara dua data geometry
  • Makepoint: untuk mengkonversi data koordinat menjadi data geometry tipe point/titik

Misalnya  mencari hotel dengan tarif kamar maksimal 100 ribu  yang dalam radius 1000m dari sebuah titik dengan koordinat (100.3636908531189,-0.949479988841186). Syntax perintah tersebut dapat dituliskan di dalam pgAdmin Query sebagai berikut:

select hotel.*, x(hotel.the_geom), y(hotel.the_geom),
distance_sphere(hotel.the_geom, makepoint(100.3636908531189,-0.949479988841186)) as jarak from hotel where contains(buffer(makepoint(100.3636908531189,-0.949479988841186),0.0089847752535344),hotel.the_geom)and hotel.tarif <=100000

Hasil pencarian dalam pgAdmin III Query dapat dilihat pada gambar berikut:

Pembutan XML hasil query spasial dilakukan menggunakan program PHP, berikut ini listing program pembuatan XML dan query spatial yang dilakukan menggunakan koneksi ke database postgreSQL dengan extensi POSTGIS:

<?

include(“fungsi.php”);
$con = getConnDB();$x =$_POST[“x”];$y =$_POST[“y”];$xpusat =  $x;
$ypusat =$y;$radius =$_POST[“radius”];
$radius = radius_proj_wgs84($xpusat,$ypusat,$radius);
$table=$_POST[“table”];
$field_tipe = explode(“:”,$_POST[“field_tipe”]);
$field_name =$field_tipe[0];
$op =$_POST[“operator”];
$katakunci =$_POST[“q”];
$sql_objek = “select x($table.the_geom),y($table.the_geom) , $table.gid as gid from $table where contains(buffer(makepoint($xpusat,$ypusat),$radius),$table.the_geom)and $field_name $op ‘$katakunci’ “;
header(“Content-type: text/xml”);
echo ‘<xml>’;
$con = getConnDB();
$res =pg_query($con,$sql_objek);
while ($data = pg_fetch_array($res)){
$gid= $data[“gid”];
$x= $data[“x”];
$y= $data[“y”];
echo “<objek gid=’$gid’ table=’$table’ x=’$x’ y=’$y’>”.”</objek>”;}
$sql_polygon = “select astext(buffer(makepoint($xpusat,$ypusat),$radius,25)) as poly”;
$res =pg_query($con,$sql_polygon);$data = pg_fetch_array($res);
$arrayPolygon = getArrayPointFromPolyGon($data[“poly”]);
while(list($n,$arrayN)=each($arrayPolygon)){$xn= $arrayPolygon[$n][“x”];$yn =$arrayPolygon[$n][“y”];
echo “<polygon x=’$xn’ y=’$yn’>”.”</polygon>”;
}
echo ‘</xml>’;?>

Niai koordinat acuan diperoleh dari $_post[”x”] dan $_post[”y”], kemudian dilakukan pencarian menggunakan fungsi contains sedangkan fungsi buffer digunakan untuk membuat area lingkaran dengan titik pusat($xpusat,$ypusat) dan radius yang diperoleh dari fungsi radius_proj_wgs84($xpusat,$ypusat,$radius. Berikut Ini Listing Fungsi radius_proj_wgs84:

function radius_proj_wgs84($x,$y,$r)
{
$cn = getConnDB();
$sql =”select distance(transform(translate(utm,$r,0),4236), transform(utm,4236)) as radius from transform(setsrid(makepoint($x, $y),4236),32747) as utm”;
$res = pg_query($cn,$sql);
$data = pg_fetch_array($res);
$radius = $data[“radius”];
return $radius;
}

Fungsi radius_proj_wgs84 digunakan untuk mekonversi jarak dari satuan meter ke dalam derajat berdasarkan titik pusat yang diberikan.  Perintah $sql_polygon = “select astext(buffer(makepoint($xpusat,$ypusat),$radius,25)) as poly”;

$res =pg_query($con,$sql_polygon)digunakan untuk mendapatkan koordinat area lingkaran berdasarkan titik pusat dan radius yang diberikan. Hasil query berupa koordinat x dan y dalam format text, untuk membentuk data-data koordinat ke dalam format xml dilakukan dengan memecah data koordinat dalam bentuk  text ke dalam bentuk array melalui fungsi getArrayPointFromPolyGon($data[“poly”]). Selanjutnya data-data koordinat pada array dibaca satu per satu untuk dibentuk ke format XML.

Setelah data koordinat dibentuk ke dalam format XML, selanjutnya data format XML tersebut dibaca melalui java script menggunakan teknik pemrograman AJAX, sebelum proses pembacaan data XML terlebih dahulu dilakukan pembentukan objek xmlHttpRequest, objek ini digunakan untuk melakukan request ke server dan merespon request dari server (PHP). Proses respon dan request javascript – PHP dilakukan secara background. Berikut adalah lisiting program fungsi javascript untuk membentuk objek xmlHttpRequest:

function GetXmlHttpObject(){ var oAJAX=null;
try { oAJAX = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(“Microsoft.XMLHTTP”);}
catch (e) { alert(“Sorry, browser tidak support ajax”);return} ;return oAJAX;}

function ajaxResponXML(opt){var xmlHttp=GetXmlHttpObject();var url = opt.url;var post = opt.post;var hand = opt.hand;
if (xmlHttp==null){alert (“Browser tidak support HTTP Request”);return} xmlHttp.onreadystatechange=function(){if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”){var resp = xmlHttp.responseXML;hand(resp)}};
xmlHttp.open(“POST”,url,true);xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);xmlHttp.send(post);};

function ajaxResponHTML(opt){var xmlHttp=GetXmlHttpObject();var url =  opt.url;var post = opt.post;var hand =opt.hand;if (xmlHttp==null){alert (“Browser tidak support HTTP Request”);return;};
xmlHttp.onreadystatechange=function(){if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”){ var resp = xmlHttp.responseText;hand(null);hand(resp)};}
xmlHttp.open(“POST”,url,true);xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);xmlHttp.send(post);};

bagaimana objek xmlHttpRequest ini diimplementasikan  dapat dilihat melalui kode program javascript berikut ini:

x = parseFloat($(‘x’).value)
y = parseFloat($(‘y’).value)
radius = parseFloat($(‘radius’).value)
var post = “x=” + x + “&y=” + y + “&radius=” + radius
var url = “php/cari3.xml.php”
var opt = {url: url,post: post,hand: function(xml) {map.clearOverlays();
var objek = xml.getElementsByTagName(“objek”);
var polygon = xml.getElementsByTagName(“polygon”);
for  (var i=0; i< objek.length;  i++)
{var currentObjek = objek[i];
var  gid =   currentObjek.getAttribute(“gid”);
var  table =   currentObjek.getAttribute(“table”);
var  x = currentObjek.getAttribute(“x”);
var  y = currentObjek.getAttribute(“y”);
var titik = new GLatLng(y,x);
var gIcon=createMarkerIcon(5);
markerObjek[gid]=new GMarker(titik ,gIcon);addMarker(table,gid,markerObjek[gid])}

var bounds = new GLatLngBounds();
var arrayPolygon = new Array(polygon.length)
for (var i = 0; i < polygon.length;i++){
var currentPolygon = polygon[i];
var  x = currentPolygon.getAttribute(“x”);
var  y = currentPolygon.getAttribute(“y”);
var titik = new GLatLng(y,x);
arrayPolygon[i]=titik;
bounds.extend(titik);}

var polygon = new GPolygon(arrayPolygon, “#f33f00”, 5, 1, “#ff0000”, 0.2);
map.addOverlay(polygon);
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());}}
ajaxResponXML(opt) ;

Pengujian Sistem:
Pencarian Hotel tarif <= 150000 pada area dalam radius 1500 m dari titik acuan : (100.3546142578125,-0.9487290733541037)

Hasil Pencarian Objek Spesifik :

XML koordinat yang diperoleh:

<xml id=”markerXMLGmap7835″>
<objek gid=”7″ table=”hotel” x=”100.354969799015″ y=”-0.953526416867592″/>
<objek gid=”12″ table=”hotel” x=”100.362231179542″ y=”-0.942330787545076″/>
<objek gid=”13″ table=”hotel” x=”100.36155552″ y=”-0.943748010000001″/>
<objek gid=”16″ table=”hotel” x=”100.363919576239″ y=”-0.949267246259593″/>
<objek gid=”17″ table=”hotel” x=”100.362840872052″ y=”-0.949686515144497″/>
<objek gid=”21″ table=”hotel” x=”100.355193852999″ y=”-0.958895172622264″/>
<objek gid=”22″ table=”hotel” x=”100.353451333888″ y=”-0.957399714277491″/>
<objek gid=”23″ table=”hotel” x=”100.363830732235″ y=”-0.954181103535047″/>
<objek gid=”26″ table=”hotel” x=”100.354129381548″ y=”-0.942292209905969″/>
<objek gid=”27″ table=”hotel” x=”100.365326491986″ y=”-0.95270072069488″/>
<objek gid=”28″ table=”hotel” x=”100.359767365681″ y=”-0.948543327242144″/>
<objek gid=”29″ table=”hotel” x=”100.357015541451″ y=”-0.944430297821673″/>
<objek gid=”30″ table=”hotel” x=”100.354140595449″ y=”-0.940435172152876″/>
<objek gid=”31″ table=”hotel” x=”100.357882259753″ y=”-0.947194641851852″/>
<objek gid=”32″ table=”hotel” x=”100.353866093622″ y=”-0.95957650440659″/>
<objek gid=”33″ table=”hotel” x=”100.35528261536″ y=”-0.935801617018069″/>
<objek gid=”34″ table=”hotel” x=”100.355673220483″ y=”-0.946090679773235″/>
<polygon x=”100.368091456474″ y=”-0.948729073354″/>
<polygon x=”100.368064862301″ y=”-0.949575313647957″/>
<polygon x=”100.367985184739″ y=”-0.950418214218084″/>
<polygon x=”100.367852738237″ y=”-0.951254448520916″/>
<polygon x=”100.367668045501″ y=”-0.9520807163217″/>
<polygon x=”100.36743183543″ y=”-0.95289375671891″/>
<polygon x=”100.367145040237″ y=”-0.953690361013543″/>
<polygon x=”100.366808791771″ y=”-0.954467385372381″/>
<polygon x=”100.366424417051″ y=”-0.95522176323527″/>
<polygon x=”100.365993433029″ y=”-0.955950517417427″/>
<polygon x=”100.365517540602″ y=”-0.95665077185903″/>
<polygon x=”100.3649986179″ y=”-0.957319762975716″/>
<polygon x=”100.364438712873″ y=”-0.95795485056518″/>
<polygon x=”100.363840035212″ y=”-0.95855352822685″/>
<polygon x=”100.363204947622″ y=”-0.959113433253506″/>
<polygon x=”100.362535956506″ y=”-0.959632355955803″/>
<polygon x=”100.361835702064″ y=”-0.96010824838291″/>
<polygon x=”100.361106947882″ y=”-0.960539232404831″/>
<polygon x=”100.360352570019″ y=”-0.960923607124529″/>
<polygon x=”100.35957554566″ y=”-0.96125985559059″/>
<polygon x=”100.358778941365″ y=”-0.961546650783936″/>
<polygon x=”100.357965900968″ y=”-0.961782860854963″/>
<polygon x=”100.357139633168″ y=”-0.961967553590434″/>
<polygon x=”100.356303398865″ y=”-0.962100000092502″/>
<polygon x=”100.355460498295″ y=”-0.962179677655332″/>
<polygon x=”100.354614258001″ y=”-0.962206271827984″/>
<polygon x=”100.353768017707″ y=”-0.962179677655408″/>
<polygon x=”100.352925117137″ y=”-0.962100000092654″/>
<polygon x=”100.352088882834″ y=”-0.961967553590661″/>
<polygon x=”100.351262615033″ y=”-0.961782860855263″/>
<polygon x=”100.350449574636″ y=”-0.961546650784309″/>
<polygon x=”100.349652970341″ y=”-0.961259855591035″/>
<polygon x=”100.348875945982″ y=”-0.960923607125044″/>
<polygon x=”100.348121568119″ y=”-0.960539232405414″/>
<polygon x=”100.347392813937″ y=”-0.960108248383558″/>
<polygon x=”100.346692559495″ y=”-0.959632355956515″/>
<polygon x=”100.346023568379″ y=”-0.959113433254277″/>
<polygon x=”100.345388480789″ y=”-0.958553528227679″/>
<polygon x=”100.344789803128″ y=”-0.957954850566062″/>
<polygon x=”100.344229898101″ y=”-0.957319762976649″/>
<polygon x=”100.343710975399″ y=”-0.956650771860009″/>
<polygon x=”100.343235082971″ y=”-0.955950517418448″/>
<polygon x=”100.342804098949″ y=”-0.95522176323633″/>
<polygon x=”100.34241972423″ y=”-0.954467385373476″/>
<polygon x=”100.342083475764″ y=”-0.953690361014668″/>
<polygon x=”100.34179668057″ y=”-0.952893756720061″/>
<polygon x=”100.341560470499″ y=”-0.952080716322872″/>
<polygon x=”100.341375777764″ y=”-0.951254448522105″/>
<polygon x=”100.341243331262″ y=”-0.950418214219285″/>
<polygon x=”100.341163653699″ y=”-0.949575313649165″/>
<polygon x=”100.341137059526″ y=”-0.94872907335521″/>
<polygon x=”100.341163653699″ y=”-0.947882833061251″/>
<polygon x=”100.341243331261″ y=”-0.947039932491116″/>
<polygon x=”100.341375777763″ y=”-0.946203698188272″/>
<polygon x=”100.341560470499″ y=”-0.945377430387473″/>
<polygon x=”100.34179668057″ y=”-0.944564389990241″/>
<polygon x=”100.342083475763″ y=”-0.943767785695582″/>
<polygon x=”100.342419724229″ y=”-0.942990761336714″/>
<polygon x=”100.342804098948″ y=”-0.942236383473791″/>
<polygon x=”100.34323508297″ y=”-0.941507629291595″/>
<polygon x=”100.343710975397″ y=”-0.940807374849949″/>
<polygon x=”100.344229898099″ y=”-0.940138383733216″/>
<polygon x=”100.344789803126″ y=”-0.939503296143702″/>
<polygon x=”100.345388480787″ y=”-0.938904618481978″/>
<polygon x=”100.346023568377″ y=”-0.938344713455265″/>
<polygon x=”100.346692559494″ y=”-0.937825790752908″/>
<polygon x=”100.347392813935″ y=”-0.937349898325739″/>
<polygon x=”100.348121568117″ y=”-0.936918914303753″/>
<polygon x=”100.34887594598″ y=”-0.936534539583987″/>
<polygon x=”100.349652970339″ y=”-0.936198291117856″/>
<polygon x=”100.350449574633″ y=”-0.935911495924438″/>
<polygon x=”100.351262615031″ y=”-0.935675285853338″/>
<polygon x=”100.352088882831″ y=”-0.935490593117792″/>
<polygon x=”100.352925117134″ y=”-0.935358146615649″/>
<polygon x=”100.353768017704″ y=”-0.935278469052744″/>
<polygon x=”100.354614257998″ y=”-0.935251874880016″/>
<polygon x=”100.355460498292″ y=”-0.935278469052516″/>
<polygon x=”100.356303398862″ y=”-0.935358146615194″/>
<polygon x=”100.357139633165″ y=”-0.935490593117112″/>
<polygon x=”100.357965900966″ y=”-0.935675285852436″/>
<polygon x=”100.358778941363″ y=”-0.935911495923317″/>
<polygon x=”100.359575545658″ y=”-0.936198291116519″/>
<polygon x=”100.360352570017″ y=”-0.936534539582441″/>
<polygon x=”100.36110694788″ y=”-0.936918914302003″/>
<polygon x=”100.361835702062″ y=”-0.937349898323793″/>
<polygon x=”100.362535956504″ y=”-0.937825790750774″/>
<polygon x=”100.36320494762″ y=”-0.938344713452951″/>
<polygon x=”100.36384003521″ y=”-0.938904618479493″/>
<polygon x=”100.364438712872″ y=”-0.939503296141055″/>
<polygon x=”100.364998617898″ y=”-0.940138383730419″/>
<polygon x=”100.365517540601″ y=”-0.940807374847012″/>
<polygon x=”100.365993433028″ y=”-0.94150762928853″/>
<polygon x=”100.36642441705″ y=”-0.942236383470609″/>
<polygon x=”100.36680879177″ y=”-0.942990761333429″/>
<polygon x=”100.367145040236″ y=”-0.943767785692207″/>
<polygon x=”100.367431835429″ y=”-0.944564389986788″/>
<polygon x=”100.367668045501″ y=”-0.945377430383956″/>
<polygon x=”100.367852738236″ y=”-0.946203698184706″/>
<polygon x=”100.367985184738″ y=”-0.947039932487514″/>
<polygon x=”100.368064862301″ y=”-0.947882833057627″/>
<polygon x=”100.368091456474″ y=”-0.94872907335158″/>
<polygon x=”100.368091456474″ y=”-0.948729073354″/>
</xml>

Selamat Mencoba, Salam ngeblog

Menggunakan Google Webmasters Agar Blog Postingan Terindex Ma Om Google April 19, 2010

Posted by irwankurniawan2010 in Serba-Serba.
add a comment

Berhubung ada temen yang nanya, jadi walaupun postingan sejenis dah bertebaran di mana2 topik ini akan dibahas secara singkat disini.

Apa tuh maksud judul postingannya? Mang penting banget di index sama Google? Mungkin ada yang melontarkan pertanyaan seperti itu. Kira2 begini. Bila kita ingin blog atau website kita masuk dalam daftar di mesin pencarian google, kita mesti daftarin dulu tuh Blog atau website ke Google Webmasters. Kalo sudah terdaftar dan Google Webmasters udah punya Site Map Blog atau Website kita, barulah Google akan dengan senang hati mengindex dan memasukkannya ke daftar pencarian.

Selengkapnya..

OpenLayer : Free Maps For the WEB April 19, 2010

Posted by irwankurniawan2010 in Programming GIS.
Tags:
add a comment

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. MetaCarta developed the initial version of OpenLayers and gave it to the public to further the use of geographic information of all kinds. OpenLayers is completely free, Open Source JavaScript, released under a BSD-style License.

OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a (still-developing) JavaScript API for building rich web-based geographic applications, similar to the Google Maps and MSN Virtual Earth APIs, with one important difference — OpenLayers is Free Software, developed for and by the Open Source software community.

Visit: openlayer.org

Share this article : Bagikan

Pengantar PostgreSQL April 19, 2010

Posted by irwankurniawan2010 in Database.
1 comment so far

Postgres pada awalnya dikembangkan oleh mahasiswa dan staff programmer University of California, Berkeley, dibawah arahan Professor Michael Stonebraker. Sofware ini mulanya dinamai Postgres, tetapi karena banyak tambahan untuk fungsi fungsi SQL maka pada tahun 1995 namanya diganti Postgres95, dan sejak tahun 1996 nama yang digunakan hingga sekarang adalah PostgreSQL. Pada saat pertama dikembangkan postgres dianggap tidak memenuhi stardar ANSI-SQL92 -standar database berskala besar- , karena tujuannya hanya menjadikan postgres sebagai database yang mempunyai banyak feature dan keluwesan yang tinggi. Karena merasa mendapat tantangan postgres berusaha untuk memenuhi standar tersebut, dan akhirnya potsgres mampu juga untuk mencapai satndar ANSI-SQL. Tetapi yang lebih gila lagi ternyata kemampuan postgres melebihi standar ANSI_SQL, yang berarti kemampuan postgres melebihidatabase lain standar ANSI-SQL92 yang diantarannya adalah Oracle. Wajar jika Postgres dinobatkan Linux Award sebagai database pilihan dan menempatkan Oracle pada tembat ke-dua.

Selengkapnya….

Tutorial Blog WordPress April 17, 2010

Posted by irwankurniawan2010 in Database.
add a comment

[Update: Terhitung sejak 4 Desember 2008, tata letak menu-menu dasbor di wordpress.com berubah total mengikuti dasbor WordPress versi 2.7. Tutorial menu dasbor admin wordpress di bawah masih relevan untuk pengguna self-hosted wordpress versi 2.6 ke bawah atau blog wordpress gratis selain wordpress.com seperti blogdetik.com, dagdigdug.com, edublogs.org, dll. Tutorial untuk menu dasbor wordpress.com pasca 4 Desember 2008  atau self-hosted wordpress versi 2.7 silahkan klik di sini]

Selengkapnya…

Hello world! April 17, 2010

Posted by irwankurniawan2010 in Database.
add a comment

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!

Follow

Get every new post delivered to your Inbox.