|
Beberapa contoh opensource Web GIS yang ada sekarang, seperti Ka-Map dan Fusion, sudah menggunakan Ajax dalam interface-nya. Sebagai opensource web GIS dasar, PHP MapScript masih menggunakan cara interaksi yang masih non Ajax dalam example-examplenya. Berikut ini adalah suatu modifikasi mapscript yang menggunakan Ajax.
Disini akan dibuat sebuah page sederhana untuk menampilkan peta dan terdapat navigasi zoom in, zoom out, pan, dan full. Keempatnya akan beroperasi dengan ajax, sehingga yang mengalami perubahan hanya bagian peta saja. Kita akan memerlukan 2 file, file pertama untuk tampilan awal dan pemanggil ajax, file yang kedua adalah file yang mengurusi bagaimana proses php sehingga muncul tampilan baru berdasar action user. File pertama adalah index.php, dan yang kedua sebut saja mapajax.php. Berikut adalah source code untuk index.php - <html>
- <head>
- <title>Ajax Mascript</title>
- <script language = "javascript">
- var XMLHttpRequestObject = false;
- if (window.XMLHttpRequest) {
- XMLHttpRequestObject = new XMLHttpRequest();
- }
- else if (window.ActiveXObject) {
- XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
- }
- function getData(dataSource, divID)
- {
- if(XMLHttpRequestObject) {
- var obj = document.getElementById(divID);
- XMLHttpRequestObject.open("GET", dataSource);
- XMLHttpRequestObject.onreadystatechange = function()
- {
- if (XMLHttpRequestObject.readyState == 4 &&
- XMLHttpRequestObject.status == 200) {
- obj.innerHTML = XMLHttpRequestObject.responseText;
- document.getElementById('progress').style.visibility = 'hidden';
- }
- }
- XMLHttpRequestObject.send(null);
- }
- }
- </script>
- <script language="javascript">
- var mode='zoom in';
- var first=true;
- function act(x,y)
- {
- document.getElementById('progress').style.visibility = 'visible';
- getData('mapajax.php?x='+x+'&y='+y+'&mode='+mode ,'targetDiv');
- }
- function gantimode(modebaru)
- {
- if(modebaru!='full')
- {
- mode=modebaru;
- document.getElementById("divmode").innerHTML=modebaru;
- }
- else
- {
- document.getElementById('progress').style.visibility = 'visible';
- getData('mapajax.php?full=1&mode='+modebaru ,'targetDiv');
- }
- }
- </script>
- </head>
- <body>
- <img name="zoomin" src="images/icon_zoomin.png" value="zoomin" width="18" onClick="gantimode('zoom in')">
- <img name="zoomout" src="images/icon_zoomout.png" value="zoomout" width="18" onClick="gantimode('zoom out')">
- <img name="pan" src="images/icon_recentre.png" value="pan" width="18" onClick="gantimode('pan')">
- <img name="zoomfull" src="images/icon_zoomfull.png" value="zoomfull" width="18" onClick="gantimode('full')">
- <!--<img name="info" src="images/icon_info.png" value="info" width="18" onClick="gantimode('info')">-->
- active : <span id="divmode"> <script> document.write(mode); </script></span>
- <span id="progress" style="visibility:hidden"><img src="images/roller.gif" alt="loading"></span>
- <div id="targetDiv">
- </div>
- </body>
- <script language="javascript">
- if(first){
- gantimode('full');
- first=false;
- }
- </script>
- </html>
Penjelasannya, baris 4 – 28 itu adalah fungsi javascript yang digunakan untuk ajax. Biasanya tinggal diambil dari suatu tutorial atau buku. Saya sendiri mengambilnya dari buku Ajax For Dummies J . baris 32 sampai dengan 35, adalah fungsi javascript yang digunakan untuk dikirimi parameter x,y yaitu posisi mouse saat melakukan klik pada peta dimana kemudian x, y, dan flag mode dikirim untuk diproses di ajax dengan memanggil fungsi getData. Baris 37 – 49 adalah fungsi yang dilakukan untuk mengganti mode yang sedang aktif. Jadi klik pada peta akan melakukan apa tergantung pada mode ini, apakah itu Zoom in, Zoom out, atau Pan(geser). Sementara mode untuk info dimatikan dulu agar fokus ke ajax dulu. Didua fungsi tadi ada pengubahan visibility untuk element ber-ID progress. Ini digunakan untuk memunculkan dan menghilangkan kembali suatu gambar gif loading di baris 59. Agar orang tahu jika sedang ad proses loading. Baris 53-56 adalah HTML untuk tombol zoom in, zoom out, pan, dan full extent. Masing-masing saat diklik akan merubah nilai flag mode dan mengubah tulisan mode yang aktif yang ada pada baris 58. Belum terjadi apa-apa pada peta, terjadinya jika klik mouse pada peta. Kecuali untuk tombol fullextent yang memanggi ajax agar merubah peta menjadi full. Baris 60-61 adalah tempat untuk peta yang dibentuk dari Ajax. Baris 64-68 digunakan untuk inisialisasi peta. Langsung memanggil ajax untuk mode Full. Nah yang berikutnya adalah untuk mapajax.php, - <?
- session_start();
- if(!extension_loaded("MapScript")){
- dl("php_mapscript.dll");
- }
- $file_map="MAPFILE/gubeng.map";
- $GLOBALS[Map] = ms_newMapObj($file_map);
- $oExt=ms_newrectobj();
- $oExt->setextent($_SESSION[Map_minx],$_SESSION[Map_miny], $_SESSION[Map_maxx],$_SESSION[Map_maxy]);
- $oPoint=ms_newpointobj();
- $oPoint->setxy($_GET[x],$_GET[y]);
- $mode=$_GET[mode];
- if($mode=="zoom in")
- {
- $GLOBALS[Map]->zoompoint(2,$oPoint, $GLOBALS[Map]->width,$GLOBALS[Map]->height,$oExt);
- }
- elseif ($mode=="zoom out")
- {
- $GLOBALS[Map]->zoompoint(-2,$oPoint, $GLOBALS[Map]->width, $GLOBALS[Map]->height,$oExt);
- }
- elseif ($mode=="pan")
- {
- $GLOBALS[Map]->zoompoint(1,$oPoint,$GLOBALS[Map]->width, $GLOBALS[Map]->height,$oExt);
- }
- elseif ($mode=="full")
- {
- }
- $oImg = $GLOBALS[Map]->draw();
- ?>
Penjelasannya, baris 3-5 digunakan untuk load library mapscript. Nama filenya mungkin perlu diubah, disesuaikan dengan versi yang anda pakai di computer anda. Disesuaikan juga untuk server linux, biasanya php_mapscript.so . Baris 6 adalah setting file map yang dipakai, tentu saja namanya sesuaikan dengan nama map yang anda pakai. Sedang baris 7 nya adalah menginisialisasi object map dengan mengambil setting dari file map tadi. Baris 8-9 membuat object extent dengan posisi full extent dari peta yang akan ditampilkan. Baris 10-11 membuat object point, dengan posisi adalah posisi mouse yang diklik-kan di peta. 12 mengambil mode yang sedang aktif saat dilakukan mouse klik tadi. 13-27 adalah perintah2 untuk melakukan zoom in, zoom out, pan, dan full extent, sesuai dengan mode yang sedang aktif yang dikirim lewat ajax. Langkahnya adalah titik tengah extent dipindah ke x,y yang dikirim, dengan fungsi zoompoint. Bedanya jika zoom in, nilai perkaliannya adalah 2, sedang zoom out di-minus 2. Jika geser tetep bernilai 1. Sedangkan full extent, tidak dilakukan apa-apa (karena diawal sudah dibuat full extent). Baris 28 adalah untuk menggambar peta sesuai extent dan posisi x,y diatas. Nah, selanjutnya cobalah jalankan, dengan melakukan browse pada file index.php tentu saja. Coba dengan melakukan klik pada peta, dan ganti2 mode, dan melakukan klik pada peta lagi. Sementara sampai ini dulu ya, moga ada waktu buat disambung lagi...
|
Kuliah TKI - Blog da...
mm Apparently, 21,000 boots imported by
Clas-class php yang ...
mm Apparently, 21,000 boots imported by
Kuliah TK Internet :...
mm Apparently, 21,000 boots imported by
The Power of GIS - U...
mm Apparently, 21,000 boots imported by
Kuliah TK Internet :...
mm Apparently, 21,000 boots imported by
JPGraph - membuat gr...
timberland - mm Apparently, 21,000 bo...
Kuliah TKI : Ajax - ...
mm Apparently, 21,000 boots imported by
Banner spesial untuk...
mm Apparently, 21,000 boots imported by