20121227 mapserver opensource gis imagine it center

www.AgungYuliantoNugroho.com | www.imagineitcenter.com

Membangun Open Source GIS Menggunakan

Mapserver

(Untuk Pemula)

Oleh : Agung Yulianto Nugroho (2009)

http://www.agungyuliantonugroho.com/

http://www.imagineitcenter.com/


1. Apakah Itu Mapserver

Mapserver merupakan salah satu aplikasi open source yang dapat digunakan untuk

mengembangkan web based GIS. Yaitu aplikasi web internet yang melibatkan data spasial

didalamnya. Memang banyak terdapat aplikasi GIS baik yang opensource maupun yang

berbayar namun tidak semua fungsionalitas SIG (desktop) terimplementasikan di dalam

webbased GIS. MapServer dikembangkan untuk melakukan visualisasi data GIS (Vektor &

Raster) pada media web. http://mapserver.gis.umn.edu

Sejarah perkembangan SIG

Awalnya, Mapserver dikembangkan oleh team dari Universitas Minnesota

bekerjasama dengan NASA sebagai penyandang dana dalam sebuah proyek bernama

ForNet, Hingga saat ini, perangkat lunak Mapserver yang open source terus mengalami

maintain dan pengembangan oleh para komunitasnya di dunia maya

MS4W

MSW4 adalah Mapserver untuk windows

Tujuan utama pembuatan paket ini adalah untuk mempermudah pengguna dalam

penginstalan

Isi paket:

- Server HTTP Apache

- PHP Enggine

- MapServer CGI (Color Graphic Interface)

CGI merupakan jembatan antara aplikasi dengan halaman web.

- MapScript

- Geospatial Data Abstraction Library (GDAL), sebagai library penerjemah format

data raster (OGR untuk data vektor)



http://mapserver.gis.umn.edu/


Arsitektur

Pada sistem aplikasi ini, browser (client) mengirimkan request (melalui jaringan

internet/intranet) ke web server dalam bentuk request terkait spasial (lokasi[x,y] click kursor,

status [on/off] layer yang akan dimunculkan, dsb). Kemudian oleh web server, request terkait

spasial ini dikirim ke server aplikasi (yang dibangun dengan menggunakan pemograman script

yang telah tersedia) dan Mapserver (program CGI). Setelah itu, Mapserver akan membaca

mapfile, data peta, dan data eksternal (jika ada dan memang diperlukan). Setelah itu, gambar

akan dikirim ke web server dan akhirnya browser milik client. Arsitektur Mapserver

cenderung bercirikan thin-client.

Thin-Client

- Fokus pada sisi server.

- Hampir semua proses dan analisis data dilakukan berdasarkan request di sisi server.

- Data hasil pemrosesan kemudian dikirimkan ke klien dalam format standard

HTML, yang di dalamnya terdapat file gambar dalam format standard (misalnya

GIF, PNG atau JPG)

- Sehingga dapat dilihat menggunakan sebarang web browser.

- Kelemahan utama pendekatan ini menyangkut keterbatasan opsi interaksi dengan

user yang kurang fleksibel.




Data Spasial

Untuk mengembangkan aplikasi map server, paling tidak dibutuhkan beberapa file dara vektor

dalam format shapefile Arcview. Jika ada, aplikasi Mapserver bisa juga disertai dengan contoh

file citra digital dalam format TIFF, JPEG, GIF dsb

Data Mapserver

Data aplikasi MapServer secara garis besar:

File MapServer

o Map file dan PHP/MapScript

Data Spasial

o Vektor dan raster

File HTML

o HTML, PHP, Css, JavaScript, Image, Simbol, Huruf, dll




2. Membuat file MAP

1.1. File MAP dengan layer tunggal

Yang dimaksud file MAP dengan layer tunggal adalah file MAP yang digunakan untuk

menampilkan satu peta layer peta saja. Untuk contoh lebih lanjut, ketikan source berikut ini:

MAP

name "jogja_aja"

status on

extent 392000 9094000 483500 9166500

imagetype png

size 800 600

shapepath "../data/shp"

imagecolor 255 200 34

WEB

imagepath "/tmp/ms_tmp/"

imageurl "/ms_tmp/"

END

LAYER

name "DIY"

data "jogies"

status default

type polygon




CLASS

color 123 34 56

outlinecolor 255 2 3

END

END

END

Kemudian simpan file diatas dengan nama “contoh1.map”

- Objek MAP diatas (diawali dengan kata kunci MAP paling atas dan diakhiri kata kunci

END paling bawah) berisi parameter sbb:

Name : mendefinisikan nama peta

Status : mendefinisikan aktif atau tidaknya peta

Extent : mendefinisikan koordinat peta yang muncul ketika peta pertama kali

diakses pada browser.

Imagetype : Tytpe data hasil keluaran dari mapserver

Size : Ukuran peta pada browser

Imagecolor : Warna latar belakang peta

Shapepath : Menunjukan direktori tempat peta berada

- Obyek WEB diawali dengan kata kunci WEB dan diakhiri dengankata kunci END

setelah itu.

Imagepath : menunjukandirektori tempat file temporary dan gambar akan

disimpan.

Imageurl : Menentukan URL yang mengacu pada direktori yang didefinisikan

pada parameter imagepath

- Objek layer dimulai dari kata kunci layer dan diakhiri dengan kata kunci END yang

sejajar dengan kata kunci layer.

Name : menunjukan nama layer.

Data : menunjukan nama file peta digital yang kan dijadikan layer

Type : Menunjukan type objek pada layer

Status : Menentukan aktif tidaknya layer.




- Objek Class dimulai dengan kata kunci class dan diakhiri dengan kata kunci End yang

sejajar dengan kata kunci CLASS.

Color : menunjukan warna pada peta

Outlinecolor : menunjukan warna garie tepi pada peta.

Kemudian panggil alamat URL berikut ini:

http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map/

contoh1.map&mode=map

Maka pada browser akan muncul gambar seperti berikut ini.

1.2. File MAP dengan multi layer



http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map/%20latihan01.map

http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map/%20latihan01.map


Jika tadi kita sudah membuat struktur file MAP dengan layer tunggal, kali ini kita akan

membuat file MAP dengan layer lebir dari satu. Untuk lebih jelasnya ketikan source code

berikut ini :

MAP

name "jogja_aja"

status on

extent 392000 9094000 483500 9166500

imagetype png

size 800 600



symbolset "../etc/symbols.sym"

WEB


imageurl "/ms_tmp/"

END

LAYER

name "DIY"

data "jogies"

status default

type polygon

CLASS

color 155 155 255


END

END

LAYER

name "perusahaan"

data "kantor"

status default

type point

CLASS

name "perus1"

symbol 1

size 18

color 32 122 22

END

END

END

Kemudian simpan dengan nama file contoh2.map

Karena layer perusahaan mempunyai type point, maka untuk menampilkan pada browser

harus digambarkan dengan symbol. Oleh karena itu selanjutnya harus dibuat file simbol. Ketik

source code berikut ini : Symbol




Name 'star'

Type VECTOR

Filled TRUE

Points

0 .375

.35 .375

.5 0

.65 .375

1 .375

.75 .625

.875 1

.5 .75

.125 1

.25 .625

END

END

Simpan file dengan nama symbols.sym

Panggil alamat URL berikut ini:



Maka pada browser akan muncul gambar seperti berikut ini.



http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map/%20contoh2.map



Pada browser terlihat muncul layer baru berupa point dan di gambarkan dengan symbol

bintang berwarna hijau.

Perhatikan penambahan source baru pada file contoh2.map diatas (teks yang dicetak tebal) :


sintaks symbolset menunjukan lokasi file symbol. File simbol pada kasus ini diberi nama

”symbols.sym” dan berlokasi pada direktori C:\ms4w\apps\latihan\etc. Kemudian perhatikan

juga sintaks dari layer yang baru,

LAYER

name "perusahaan"

data "kantor"

status default

type point

CLASS

name "perus1"

symbol 1

size 18

color 32 122 22

END

END




Dari sintaks diatas isinya hampir sama dengan sintaks layer sebelumnya, tetapi ada sedikit

perbedaan pada obyek class,

Symbol : menunjukan parameter simbol yang digunakan yang telah didefinisikan pada file

symbols.sym. Angka ”1” menunjukan urutan definisi simbol pada file

symbols.sym.

Size : Menunjukan besarnya ukuran simbol yang dipakai.

1.3. Penambahan symbol

Pada kasus sebelumnya telah dibuat layer dengan type point dan digambarkan dengan

symbol bintang. Selanjutnya akan ditambahkan layer bertipe point dan digambarkan

dengan simbol lingkaran. Yang pertama2 harus dilakukan adalah membuat definisi simbol

lingkaran pada file symbols.sym. Ubah file symbols.sym seperti dibawah ini:

Symbol

Name 'star'

Type VECTOR

Filled TRUE

Points

0 .375

.35 .375

.5 0

.65 .375

1 .375

.75 .625

.875 1

.5 .75

.125 1

.25 .625

END

END

Symbol

Name 'circle'

Type ELLIPSE

Filled TRUE

Points

1 1

END

END

Kemudian ubah file contoh2.map menjadi seperti dibawah ini : MAP

name "jogja_aja"

status on

extent 392000 9094000 483500 9166500

imagetype png

size 800 600







WEB


imageurl "/ms_tmp/"

END

LAYER

name "DIY"

data "jogies"

status default

type polygon

CLASS

color 155 155 255


END

END

LAYER

name "perusahaan"

data "kantor.shp"

status default

type point

CLASS

name "perus1"

symbol 1

size 18

color 32 122 22

END

END

LAYER

name "pantai_diy"

data "pantai"

status default

type point

CLASS

name "pantai"

symbol 2

size 18

color 14 15 167

END

END

END

Kemudian save as menjadi contoh3.map! Panggil alamt URL berikut ini :








Hasil dari file contoh3.map adalah seperti gambar dibawah ini:

Pada gambar diatas muncul gambar pantai yang digambarkan dengan simbol lingkaran

berwarna biru.

1.4. Menampilkan label pada layer.

MAP

name “indone”

status on

extent 392000 9094000 483500 9166500

imagetype png

size 800 600

shapepath “../data/shp”


symbolset ”../etc/symbols.sym”

fontset ”../etc/fonts.txt”

WEB

imagepath “/tmp/ms_tmp/”

imageurl “/ms_tmp/”

END

LAYER




name “DIY”

data “jogies”

status default

type polygon

CLASS

color 155 155 255


END

END

LAYER

name “perusahaan”

data “kantor.shp”

status default

type point

labelitem “kantor”

CLASS

name “perus1”

symbol 1

size 18

color 32 122 22

LABEL

font fritqat-italic

type truetype

size 12

position auto

partials false


color 0 0 0

END

END

END

LAYER

name “pantai_diy”

data “pantai”

status default

type point

CLASS

name “pantai”

symbol 2

size 18

color 14 15 167

END

END

END

Kemudian save as menjadi contoh4.map! Panggil alamat URL berikut ini :








Hasil dari file contoh4.map adalah seperti gambar dibawah ini:

2. Menggunakan File Template HTML

File template HTML digunakan untuk mengatur tampilan peta dan user interface

ataupun kenampakan legenda yang tidak bisa dilakukan jika hanya dengan menggunakan file

MAP.

2.1 Perbedaan file MAP dengan file template dan tanpa file template.

Salah satu parameter yang dapat dikirim kepada Mapserver adalah parameter mode. Ada

beberapa pilihan untuk parameter ini, antara lain :

1. Mode map.

Pada mode ini, hanya bisa mengakses file MAP tanpa menggunakan template. Dan

peta yang ditampilkan akan bersifat static.

2. Mode browse




Mode browse digunakan untuk menampilkan peta interaktif, dengan memanfaatkan

file template Mapserver. Jika Mapserver membaca file *.map dengan mode

browse, dan di dalam definisi objek web di file *.map terdapat parameter template,

maka file template yang ditujukan akan diproses

Modifikasi objek web pada file contoh1.map menjadi seperti ini :

web

template "template1.html"


imageurl "/ms_tmp/"

end

Kemudian simpan dengan nama ”pakai_template1.map”

Selanjurtnya buat file template1.html, dengan isi speeti dibawah ini :

<html>

<head>

<title>

Contoh File template

</title>

</head>

<body>

Gambar peta yang dihasilkan:

<br><br>

<img border=1 src="[img]"></img>

<br><br>

Koordinat batas tampilan peta:

<br><br>

[mapext]

<br><br>

</body>

</html>

panggil alamat url berikut :

http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map

/pakai_template1.map&mode=browse





Bandingkan hasilnya jika diakses dengan mode map, dengan URL berikut ini :


/pakai_template1.map&mode=map

2.2 Membuat navigasi peta

Modifikasi objek web pada file pakai_template1.map menjadi seperti ini :

web



imageurl "/ms_tmp/"

end

Kemudian simpan dengan nama pakai_template2.map

Selanjurtnya buat file template2.html, dengan isi seperti dibawah ini :

<html>

<head>

<title>Navigasi pada MapServer CGI</title>

</head>

<form name="mapserv" method="GET">

<input type="hidden" name="map" value="[map]">

<input type="hidden" name="imgext" value="[mapext]">

<input type="hidden" name="imgxy" value="225 150">

<input type="hidden" name="mode" value="browse">





<table width="450" border="1">

<tr>

<td>

<div align="center">

<select name="zoom">

<option value="3" [zoom_3_select]>

Zoom In 3x

</option>


Zoom In 2x

</option>


Recenter

</option>

<option value="-2" [zoom_-2_select]>

Zoom Out 2x

</option>

<option value="-3" [zoom_-3_select]>

Zoom Out 3x

</option>

</select>

</div>

</td>

<td>


<input type="submit" name="submit" value="Refresh">

</div>

</td>

</tr>

<tr>

<td colspan="3" align="center" valign="top">

<input type="image" name="img" src="[img]"

width="680" height="480" border="0">

</td>

</tr>

</table>

</form>

</body>

</html>








2.3 Mengontrol kenampakan layer

Modifikasi objek web pada file pakai_template2.map menjadi seperti ini :

web



imageurl "/ms_tmp/"

end


Selanjurtnya buat file template3.html, dengan isi seperti dibawah ini :

<html>

<head>

<title>Mengontrol kenampakan layer</title>

</head>

<body>








<table width="450" border="1" align="center">

<tr>

<td>

Layer Aktif:

<input type="checkbox" name="layer"

value="DIY" [DIY_check]>DIY


value="perusahaan" [perusahaan_check]>Kantor<br>

</td>

</tr>

<tr>

<td>



</div>

</td>

</tr>

<tr>

<td align="center" valign="top">

<img src="[img]">

</td>

</tr>

</table>

</form>

</body>

</html>








2.4 Menampilkan Skala grafis dan legenda

Modifikasi file pakai_template3.map menjadi seperti ini :

map

name "jogja_aja"

status on

extent 392000 9094000 483500 9166500

imagetype png

size 700 450




units meters

WEB



imageurl "/ms_tmp/"

END

LEGEND

KEYSIZE 18 12

LABEL

TYPE BITMAP

SIZE MEDIUM

COLOR 0 0 89

END

STATUS ON




END

SCALEBAR

LABEL

COLOR 0 0 0

SIZE MEDIUM

END

SIZE 600 5

STYLE 1

UNITS kilometers

INTERVALS 8

STATUS ON

END

layer

name "DIY"

data "jogies"

status off

type polygon

class

name "DIY"

color 155 155 255


end

end

layer

name "perusahaan"

data "kantor.shp"

status off

type point

class

name "kantor"

symbol 1

size 18

color 32 122 22

end

end

end


Selanjurtnya buat file template3.html, sehingga menjadi seperti dibawah ini :

<html>

<head>

<title>Mengontrol kenampakan layer</title>

</head>

<body>








<table width="450" border="1" align="center">

<tr>

<td>

Layer Aktif:


value="DIY" [DIY_check]>DIY


value="perusahaan" [perusahaan_check]>Kantor<br>

</td>

</tr>

<tr>

<td>



</div>

</td>

</tr>

<tr>


<img src="[img]">

</td>

</tr>

<tr>


<img src="[legend]">

</td>

</tr>

<tr>


<img src="[scalebar]">

</td>

</tr>

</table>

</form>

</body>

</html>

Simpan script diatas dengan nama template4.html




Panggil alamat url berikut :



3. Pemrograman PHP/Mapscript 3.1 Menampilkan peta sederhana dan batas koordinat

Buat file mapscript1.phtml dengan isi seperti di bawah ini :

<html>

<body>

<h3>Menggunakan kelas MapObj</h3>

<?php

$oMap = ms_newMapObj("../map/pakai_mapscript1.map");

printf("Koordinat batas: (%f, %f) - (%f, %f)<br>",

$oMap->extent->minx,

$oMap->extent->miny,

$oMap->extent->maxx,

$oMap->extent->maxy);

$oImg = $oMap->draw();

$url = $oImg->saveWebImage(MS_PNG, 0, 0, -1);

?>

<h4>Tampilan peta dalam bentuk image, format PNG:<br></h4>

<img src=<?php echo $url ?> > </img>

</body>





</html>

Kode PHTML di atas menghasilkan gambar peta berdasarkan file

pakai_template1.map. Untuk melihat hasilnya melalui browser ketikan url berikut :

http://localhost/mapscript/mapscript1.phtml

3.2 Menampilkan Legenda dan skala grafis

Ubah file pakai_template1.map menjadi seperti di bawah ini :

map

name "jogja_aja"

status on

extent 392000 9094000 483500 9166500

imagetype png

size 600 400




web


imageurl "/ms_tmp/"

end

LEGEND

KEYSIZE 18 12

LABEL

TYPE BITMAP

SIZE MEDIUM

COLOR 0 0 89

END





STATUS ON

END

SCALEBAR

LABEL

COLOR 0 0 0

SIZE MEDIUM

END

SIZE 600 5

STYLE 1

UNITS kilometers

INTERVALS 8

STATUS ON

END

layer

name "DIY"

data "jogies"

status default

type polygon

class

color 155 155 255


end

end

layer

name "perusahaan"

data "kantor.shp"

status default

type point

class

name "perus1"

symbol 1

size 18

color 32 122 22

end

end

end

Simpan hasil modifikasi di atas dengan nama pakai_mapscript2.map

Kemudian buat file mapscript2.phtml dengan baris-baris dibawah ini :

<html>

<body>

<h3>Menampilkan legenda dan skala grafis</h3>

<?php

$oMap = ms_newMapObj("../map/pakai_mapscript2.map");

$oMapImg = $oMap->draw();

$mapurl = $oMapImg->saveWebImage(MS_PNG, 0, 0, -1);




$oLegImg = $oMap->drawLegend();

$legendurl = $oLegImg->saveWebImage(MS_PNG, 0, 0, -1);

$oScaleImg = $oMap->drawScaleBar();

$scalebarurl = $oScaleImg->saveWebImage(MS_PNG, 0, 0, -1);

?>

<table border="1">

<th> Legenda </th>

<th>Peta</th>

<tr>

<td valign="top">

<img src=<? echo $legendurl ?> >

</td>

<td>

<img src=<? echo $mapurl ?> >

</td>

</tr>

<tr>

<td>

</td>

<td align="center">

<img src=<? echo $scalebarurl ?> >

</td>

</tr>

</table>

</body>

</html>

Kode PHTML di atas menghasilkan gambar peta berdasarkan file pakai_mapscript2.map.

Untuk melihat hasilnya melalui browser ketikan url berikut :





3.3 Membuat navigasi peta

Navigasi peta berfungsi sebagai tools untul berinteraksi antara sistem dengan user. Navigasi

yang akan dibangun sekarang meliputi Zoom All (untuk menampilkan peta secara

keseluruhan), Zoom In (Untuk memperbesar peta), Zoom Out (Untuk Memperkecil peta), dan

Recenter (menentukan titik tengah peta). Untuk membuat fungsi navigasi peta akan

dibutuhkan 3 buah file, yaitu *.map, *.php, *.phtml. Untuk file *.map akan digunakan file

paka_mapscript2.map tanpa ada modifikasi. Selanjutnya kita akan membuat file

mapscript3.phtml, isinya sbb:

<?php

include("mapscript3.php");

?>

<html>

<body>

<h3>Fungsi navigasi peta</h3>

<form name="main" method="POST">

<table border="1">

<th>Legenda</th>

<th>Peta</th>

<th>Navigasi</th>

<tr>



<td valign="top">

<?php DrawLegend(); ?>

</td>



<td>

<?php DrawMap(); ?>

</td>



<td valign="top">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<input TYPE="radio" NAME="CMD" VALUE="ZOOM_ALL"

<?php if (IsCurrentTool("ZOOM_ALL")) echo "CHECKED";?>

>

</td>

<td>

<img SRC="images/icon_zoomfull.png"

WIDTH="20" HEIGHT="20">

</td>

<td>Zoom all</td>

</tr>

<tr>

<td>

<input TYPE="radio" NAME="CMD" VALUE="ZOOM_IN"

<?php if (IsCurrentTool("ZOOM_IN")) echo "CHECKED";?>

>

</td>

<td>

<img SRC="images/icon_zoomin.png"


</td>

<td>Zoom in</td>

</tr>

<tr>

<td>

<input TYPE="radio" NAME="CMD" VALUE="ZOOM_OUT"

<?php if (IsCurrentTool("ZOOM_OUT")) echo

"CHECKED";?>

>

</td>

<td>

<img SRC="images/icon_zoomout.png"


</td>

<td>Zoom out</td>

</tr>

<tr>

<td>

<input TYPE="radio" NAME="CMD" VALUE="RECENTER"

<?php if (IsCurrentTool("RECENTER")) echo

"CHECKED";?>

>

</td>

<td>

<img SRC="images/icon_recentre.png"


</td>

<td>Recenter</td>

</tr>

</table>

</td>

</tr>

<tr>

<td></td>



<td align="center">

<?php DrawScaleBar(); ?>

</td>

<td></td>

</tr>

</table>

</form>

</body>

</html>

Sedangkan file mapscript3.php berisi sbb:

<?php

Main();

function Main()

{

$GLOBALS["goMap"] = ms_newMapObj("../map/pakai_mapscript2.map" );

//batas koordinat seluruh peta, untuk tool 'zoom all'

$GLOBALS["gfMinX"] = (float)$GLOBALS["goMap"]->extent->minx;

$GLOBALS["gfMinY"] = (float)$GLOBALS["goMap"]->extent->miny;

$GLOBALS["gfMaxX"] = (float)$GLOBALS["goMap"]->extent->maxx;

$GLOBALS["gfMaxY"] = (float)$GLOBALS["goMap"]->extent->maxy;

//set nilai $aVars dengan nilai parameter URL

if (sizeof($_POST) > 0) {

$aVars = $_POST;


} else {

if (sizeof($_GET) > 0) {

$aVars = $_GET;

} else {

$aVars = array();

}

}

//tool navigasi default: zoom in

$GLOBALS["gszCurrentTool"] = "ZOOM_IN";

//proses parameter URL

ProcessURLArray( $aVars );

}

function DrawMap()

{

$img = $GLOBALS["goMap"]->draw();

$url = $img->saveWebImage();

$nWidth = $GLOBALS["goMap"]->width;

$nHeight = $GLOBALS["goMap"]->height;

echo "<INPUT TYPE=image SRC=".$url." BORDER=0 WIDTH=\"".

$nWidth."\" HEIGHT=\"".$nHeight."\" NAME=MAINMAP>\n";

echo "<INPUT TYPE=HIDDEN NAME=MINX VALUE=\"".

$GLOBALS["goMap"]->extent->minx."\">\n";

echo "<INPUT TYPE=HIDDEN NAME=MINY VALUE=\"".

$GLOBALS["goMap"]->extent->miny."\">\n";

echo "<INPUT TYPE=HIDDEN NAME=MAXX VALUE=\"".

$GLOBALS["goMap"]->extent->maxx."\">\n";

echo "<INPUT TYPE=HIDDEN NAME=MAXY VALUE=\"".

$GLOBALS["goMap"]->extent->maxy."\">\n";

}

function DrawScaleBar()

{

$img = $GLOBALS["goMap"]->drawScaleBar();


echo"<IMG SRC=$url BORDER=0>\n";

}

function DrawLegend()

{

$img = $GLOBALS["goMap"]->drawLegend();


echo "<img src=$url>";

}

function ProcessURLArray( $aVars)




{

//simpan tool navigasi yang sedang aktif

$GLOBALS["gszCurrentTool"] = (isset($aVars["CMD"])) ?

$aVars["CMD"] : "ZOOM_IN";

//set batas koordinat peta

$oExt = $GLOBALS["goMap"];

$fMinX = isset($aVars["MINX"]) ? $aVars["MINX"] : $oExt->extent->minx;

$fMinY = isset($aVars["MINY"]) ? $aVars["MINY"] : $oExt->extent->miny;;

$fMaxX = isset($aVars["MAXX"]) ? $aVars["MAXX"] : $oExt->extent->maxx;;

$fMaxY = isset($aVars["MAXY"]) ? $aVars["MAXY"] : $oExt->extent->maxy;;

$GLOBALS["goMap"]->setextent( $fMinX, $fMinY, $fMaxX, $fMaxY );

//lebar dan tinggi gambar peta

$fW = $GLOBALS["goMap"]->width;

$fH = $GLOBALS["goMap"]->height;

//lakukan perubahan skala, sesuai tool navigasi terpilih

if (isset($aVars["CMD"])) {

//titik tempat user meng-klik pada lokasi peta

$nX = isset($aVars["MAINMAP_x"]) ?

intval($aVars["MAINMAP_x"]) : $fW/2.0;

$nY = isset($aVars["MAINMAP_y"]) ?

intval($aVars["MAINMAP_y"]) : $fW/2.0;

if (isset($aVars["MAINMAP_x"]) && isset($aVars["MAINMAP_y"])) {

$oPixelPos = ms_newpointobj();

$oPixelPos->setxy($nX, $nY);

$oGeoExt = ms_newrectobj();

$oGeoExt->setextent($fMinX, $fMinY, $fMaxX, $fMaxY);

//ubah skala peta, dengan method zoompoint atau setextent

if ($aVars["CMD"] == "ZOOM_IN") {

$GLOBALS["goMap"]->zoompoint(2, $oPixelPos,

$fW, $fH, $oGeoExt);

} else if ($aVars["CMD"] == "ZOOM_OUT") {

$GLOBALS["goMap"]->zoompoint(-2, $oPixelPos,


} else if ($aVars["CMD"] == "RECENTER") {



} else if ($aVars["CMD"] == "ZOOM_ALL") {

$GLOBALS["goMap"]->setextent($GLOBALS["gfMinX"],

$GLOBALS["gfMinY"], $GLOBALS["gfMaxX"],

$GLOBALS["gfMaxY"]);

}

}

}

}

function IsCurrentTool( $szTool )

{

return (strcasecmp($GLOBALS["gszCurrentTool"], $szTool) == 0);

}




?>

Ketikan URL berikut untuk melihat hasil tampilan peta :


Untuk menggunakan navigasi diatas kita tinggal memilih salah satu radio button sesuai

navigasi yang diinginkna kemudian klik pada peta, maka akan terjadi perubahan sesuai dari

fungsi navigasi yang dipilih.

3.3 Menggunakan Peta Index

Peta index adalah peta yang ukurannya lebih kecil dari peta utama dan digunakan untuk

navigasi dengan cara meng-klik bagian dari peta index. Untuk menampilkan peta index, pada

file map perlu ditambahkan definisi objek reference. Untuk itu ubah isi dari file

pakai_mapscript2.map menjadi seperti dibawah ini, kemudian simpan dengan nama

pakai_mapscript3.map.

MAP

name "jogja_aja"

status on

extent 392000 9094000 483500 9166500

imagetype png

size 600 400








web


imageurl "/ms_tmp/"

end

REFERENCE

COLOR -1 -1 -1

EXTENT 92.5 -19.5 142.5 14.0

IMAGE "qq.jpg"

OUTLINECOLOR 255 0 0

SIZE 120 80

STATUS ON

END

LEGEND

KEYSIZE 18 12

LABEL

TYPE BITMAP

SIZE MEDIUM

COLOR 0 0 89

END

STATUS ON

END

SCALEBAR

LABEL

COLOR 0 0 0

SIZE MEDIUM

END

SIZE 600 5

STYLE 1

UNITS kilometers

INTERVALS 8

STATUS ON

END

layer

name "DIY"

data "jogies"

status on

type polygon

class

color 155 155 255


end

end

layer

name "perusahaan"

data "kantor.shp"

status on

type point



class

name "perus1"

symbol 1

size 18

color 32 122 22

end

end

end

Modifikasi file mapscript3.phtml menjadi sbb :

<?php


?>

<html>

<body>

<h3>Fungsi navigasi peta</h3>

<form name="main" method="GET">

<table border="1">

<th>Legenda</th>

<th>Peta</th>

<th>Navigasi</th>

<tr>



<td valign="top">

<?php DrawLegend(); ?>

</td>



<td>

<?php DrawMap(); ?>

</td>



<td valign="top">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<input TYPE="radio" NAME="CMD" VALUE="ZOOM_ALL"

<?php if (IsCurrentTool("ZOOM_ALL")) echo "CHECKED";?>

>

</td>

<td><img SRC="images/icon_zoomfull.png" WIDTH="20"

HEIGHT="20"></td>

<td>Zoom all</td>

</tr>

<tr>

<td>

<input TYPE="radio" NAME="CMD" VALUE="ZOOM_IN"

<?php if (IsCurrentTool("ZOOM_IN")) echo "CHECKED";?>

>

</td>

<td><img SRC="images/icon_zoomin.png" WIDTH="20"

HEIGHT="20"></td>

<td>Zoom in</td>

</tr>

<tr>

<td>

<input TYPE="radio" NAME="CMD" VALUE="ZOOM_OUT"

<?php if (IsCurrentTool("ZOOM_OUT")) echo "CHECKED";?>

>

</td>

<td><img SRC="images/icon_zoomout.png" WIDTH="20"

HEIGHT="20"></td>

<td>Zoom out</td>

</tr>

<tr>

<td>

<input TYPE="radio" NAME="CMD" VALUE="RECENTER"

<?php if (IsCurrentTool("RECENTER")) echo "CHECKED";?>

>

</td>

<td><img SRC="images/icon_recentre.png" WIDTH="20"

HEIGHT="20"></td>

<td>Recenter</td>

</tr>

<tr>

<td> </td>

</tr>

<tr>

<td colspan=3 align="CENTER">

<b>Peta Index</b>

</td>

</tr>

<tr>

<td colspan=3>

<?php DrawKeyMap(); ?>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td></td>



<td align="center">

<?php DrawScaleBar(); ?>

</td>

<td>

</td>

</tr>

</table>

</form>


</body>

</html>

Kemudian simpan dengan nama mapscript4.phtml. Selanjutnya ubah file

mapscript3.php menjadi sbb:

<?php

Main();

function Main()

{

$GLOBALS["goMap"] = ms_newMapObj("../map/pakai_mapscript3.map" );








$aVars = $_POST;

} else {


$aVars = $_GET;

} else {

$aVars = array();

}

}





}

function DrawMap()

{


















}


{




}


{

$img = $GLOBALS["goMap"]->drawLegend();


echo "<img src=$url>";

}

function DrawKeyMap()

{

$img = $GLOBALS["goMap"]->drawreferencemap();


echo "<INPUT TYPE=image SRC=$url BORDER=1 NAME=KEYMAP>\n";

}


{






$fMinX = isset($aVars["MINX"]) ? $aVars["MINX"] : $oExt->extent->minx;

$fMinY = isset($aVars["MINY"]) ? $aVars["MINY"] : $oExt->extent->miny;;

$fMaxX = isset($aVars["MAXX"]) ? $aVars["MAXX"] : $oExt->extent->maxx;;

$fMaxY = isset($aVars["MAXY"]) ? $aVars["MAXY"] : $oExt->extent->maxy;;






if (isset($aVars["CMD"]) && isset ($aVars["MAINMAP_x"])) {









if (isset($aVars["MAINMAP_x"]) && isset($aVars["MAINMAP_y"])) {



















}

}

} else if (isset($aVars["KEYMAP_x"]) && isset($aVars["KEYMAP_y"])) {

$oRefExt = $GLOBALS["goMap"]->reference->extent;

$nX = intval($aVars["KEYMAP_x"]);

$nY = intval($aVars["KEYMAP_y"]);

$fWidthPix = doubleval($GLOBALS["goMap"]->reference->width);

$fHeightPix = doubleval($GLOBALS["goMap"]->reference->height);

$nGeoX = Pix2Geo($nX, 0, $fWidthPix, $oRefExt->minx, $oRefExt->maxx,

0);

$nGeoY = Pix2Geo($nY, 0, $fHeightPix, $oRefExt->miny, $oRefExt->maxy,

1);

$fDeltaX = ($fMaxX - $fMinX) / 2.0;

$fDeltaY = ($fMaxY - $fMinY) / 2.0;

$GLOBALS["goMap"]->setextent($nGeoX - $fDeltaX, $nGeoY - $fDeltaY,

$nGeoX + $fDeltaX, $nGeoY + $fDeltaY);

}

}

function Pix2Geo($nPixPos, $fPixMin, $fPixMax, $fGeoMin, $fGeoMax,

$bInversePix)

{

$fDeltaPix = ($bInversePix) ? $fPixMax - $nPixPos : $nPixPos -

$fPixMin;

$fDeltaGeo = $fDeltaPix * ($fGeoMax - $fGeoMin) / ($fPixMax -

$fPixMin);




return $fGeoMin + $fDeltaGeo;

}


{


}

?>

Jika sudah simpan dengan nama mapscript4.php. Maka hasilnya akan terlihat seperti pada

gambar di bawah ini :

3.4 Legenda Peta

Di dalam mapserver kita dapat menampilkan legenda sekaligus sebagai tools untuk

mengaktifkan ataupun me-nonaktifkan layer. Dalam hal ini legenda akan disertai sebuah chek

box disampingnya untuk menggontrol kenampakan layer. Untuk menampilkan legenda

dibutuhkan sebuah file template untuk legenda dalam bentuk HTML. Untuk itu ikuti langkah

dibawah ini :

1. Buat file template legend.html dengan isi seperti dibawah ini :

[leg_layer_html order=ascending opt_flag=15]

<tr height=20px>

<td align="center">

<input type="checkbox" name="legendlayername[]"




value="[leg_layer_name]"

[if name=layer_status oper=eq value=1]CHECKED[/if]

[if name=layer_status oper=eq value=2]CHECKED[/if]>

</td>

<td>

<img src="[leg_icon width=20 height=13]" width=20 height=13>

</td>

<td>

<font face="Verdana" size="2">

[metadata name=DESCRIPTION]

</font>

</td>

</tr>

[/leg_layer_html]

2. Sisipkan kode objek web pada file pakai_mapscript3.map dengan parameter

template seperti dibawah ini :

template "legend.html"

Kemudian simpan dengan nama pakai_mapscript4.map

3. Simpan file mapscript4.phtml sebagai file mapscript5.phtml, dan ubah baris yang

menunjuk file mapscript4.php menjadi seperti dibawah ini :

<?php


?>

4. simpan file mapscript4.php menjadi mapscript5.php. kemudian modifikasi

sehingga menjadi :

<?php

Main();

function Main()

{

$GLOBALS["goMap"]= ms_newMapObj("../map/pakai_mapscript4.map" );








$aVars = $_POST;

} else {


$aVars = $_GET;

} else {




$aVars = array();

}

}





}

function DrawMap()

{















}


{




}


{

echo "<table cellspacing=0 cellpadding=0>";

echo "<tr bgcolor=\"#E2EFF5\">\n";

echo "<td></td>\n";

echo "<td></td>\n";

echo "</tr>\n";

echo $GLOBALS["goMap"]->processLegendTemplate( array() );

echo "<tr>\n";

echo "<td><input type=\"image\"".

" src=\"./images/icon_update.png\"".

" width=\"20\" height=\"20\"></td>\n";

echo "<td colspan=2>".

"<font face=\"Arial,Helvetica,sans-serif\" size=\"2\">".




"Update</td>\n";

echo "</tr>\n";

echo "</table>";

}

function DrawKeyMap()

{

$img = $GLOBALS["goMap"]->drawreferencemap();


echo "<INPUT TYPE=image SRC=$url BORDER=1 NAME=KEYMAP>\n";

}


{






$fMinX = isset($aVars["MINX"]) ? $aVars["MINX"] : $oExt->extent-

>minx;

$fMinY = isset($aVars["MINY"]) ? $aVars["MINY"] : $oExt->extent-

>miny;;

$fMaxX = isset($aVars["MAXX"]) ? $aVars["MAXX"] : $oExt->extent-

>maxx;;

$fMaxY = isset($aVars["MAXY"]) ? $aVars["MAXY"] : $oExt->extent-

>maxy;;





if (isset($_GET["legendlayername"]))

{

for( $i=0; $i<$GLOBALS["goMap"]->numlayers; $i++ )

{

$oLayer = $GLOBALS["goMap"]->getLayer($i);

if (in_array( $oLayer->name, $_GET["legendlayername"]

))

$oLayer->set( "status", MS_ON );

else

$oLayer->set( "status", MS_OFF );

}

}


if (isset($aVars["CMD"]) && isset ($aVars["MAINMAP_x"])) {









if (isset($aVars["MAINMAP_x"]) && isset($aVars["MAINMAP_y"]))

{



















}

}

} else if (isset($aVars["KEYMAP_x"]) &&

isset($aVars["KEYMAP_y"])) {

$oRefExt = $GLOBALS["goMap"]->reference->extent;

$nX = intval($aVars["KEYMAP_x"]);

$nY = intval($aVars["KEYMAP_y"]);

$fWidthPix = doubleval($GLOBALS["goMap"]->reference->width);

$fHeightPix = doubleval($GLOBALS["goMap"]->reference->height);

$nGeoX = Pix2Geo($nX, 0, $fWidthPix, $oRefExt->minx, $oRefExt-

>maxx, 0);

$nGeoY = Pix2Geo($nY, 0, $fHeightPix, $oRefExt->miny,

$oRefExt->maxy, 1);

$fDeltaX = ($fMaxX - $fMinX) / 2.0;

$fDeltaY = ($fMaxY - $fMinY) / 2.0;

$GLOBALS["goMap"]->setextent($nGeoX - $fDeltaX, $nGeoY -

$fDeltaY,

$nGeoX + $fDeltaX, $nGeoY +

$fDeltaY);

}

}

function Pix2Geo($nPixPos, $fPixMin, $fPixMax, $fGeoMin, $fGeoMax,

$bInversePix)

{

$fDeltaPix = ($bInversePix) ? $fPixMax - $nPixPos : $nPixPos -

$fPixMin;




$fDeltaGeo = $fDeltaPix * ($fGeoMax - $fGeoMin) / ($fPixMax -

$fPixMin);

return $fGeoMin + $fDeltaGeo;

}


{


}

?>

5. Untuk melihat tampilan panggil URL: http://localhost/mapscript/mapscript5.phtml





Daftar Pustaka

1. Nuryadin, Ruslan, 2005, ”Panduan Menggunakan MapServer” Bandung,

Informatika Bandung.




BIOGRAFI

Agung Yulianto Nugroho, terlahir dari sebuah keluarga sederhana di kota Sragen Jawa Tengah. Semenjak tahun 2002 telah memantapkan hati untuk hijrah ke Jogjakarta untuk menempuh pendidikan S1 di Universitas Islam Indonesia dengan mengambil jurusan Teknik Informatika. Kemudian Setelah lulus sarjana melanjutkan pendidikan Magister di kampus dan jurusan yang sama. Selain sebagai dosen di kampus almamaternya, juga mempunyai jam terbang sebagai pengajar di beberapa lembaga pendidikan non formal pada bidang teknologi informasi.

Spesialisasi pada bidang Sistem Informasi terutama GIS membuat beberapa universitas dan beberapa lembaga Pemerintah maupun swasta mempercayainya sebagai konsultan GIS application development. Selain itu juga kerap diundang sebagai pemateri dalam workshop maupun profesional training di beberapa perusahaan.

Di tengah – tengah kesibukannya yang

padat, pada pertengahan 2009 lalu mendirikan sebuah IT training center, dengan nama Imagine IT Education Center (www.imagineitcenter.com). Bermodalkan semangat untuk berbagi serta keinginan yang kuat dalam memajukan Dunia IT di Indonesia, Imagine IT Education Center yang ber-tagline ‘One Place to Learn All About IT’ telah menjadi sebuah pusat pendidikan dan pelatihan IT yang berkembang pesat dan menciptakan banyak ‘High Quality IT Heroes’. IT heroes merupakan sebutan yang diberikan oleh Imagine IT Education Center kepada peserta didik yang ikut berperan serta memajukan teknologi informasi di Indonesia.




20121227 mapserver opensource gis imagine it center

Documents