www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 1
Membangun Open Source GIS Menggunakan
Mapserver
(Untuk Pemula)
Oleh : Agung Yulianto Nugroho (2009)
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 2
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)
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 3
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.
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 4
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
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 5
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
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 6
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.
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 7
- 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
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 8
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
shapepath "../data/shp"
imagecolor 255 200 2
symbolset "../etc/symbols.sym"
WEB
imagepath "/tmp/ms_tmp/"
imageurl "/ms_tmp/"
END
LAYER
name "DIY"
data "jogies"
status default
type polygon
CLASS
color 155 155 255
outlinecolor 255 2 3
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
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 9
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:
http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map/
contoh2.map&mode=map
Maka pada browser akan muncul gambar seperti berikut ini.
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 10
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) :
symbolset "../etc/symbols.sym"
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
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 11
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
shapepath "../data/shp"
imagecolor 255 200 2
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 12
symbolset "../etc/symbols.sym"
WEB
imagepath "/tmp/ms_tmp/"
imageurl "/ms_tmp/"
END
LAYER
name "DIY"
data "jogies"
status default
type polygon
CLASS
color 155 155 255
outlinecolor 255 2 3
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 :
http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map/
contoh3.map&mode=map
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 13
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”
imagecolor 255 200 2
symbolset ”../etc/symbols.sym”
fontset ”../etc/fonts.txt”
WEB
imagepath “/tmp/ms_tmp/”
imageurl “/ms_tmp/”
END
LAYER
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 14
name “DIY”
data “jogies”
status default
type polygon
CLASS
color 155 155 255
outlinecolor 255 2 3
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
outlinecolor 255 255 255
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 :
http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map/
contoh4.map&mode=map
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 15
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
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 16
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"
imagepath "/tmp/ms_tmp/"
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
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 17
Bandingkan hasilnya jika diakses dengan mode map, dengan URL berikut ini :
http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map
/pakai_template1.map&mode=map
2.2 Membuat navigasi peta
Modifikasi objek web pada file pakai_template1.map menjadi seperti ini :
web
template "template2.html"
imagepath "/tmp/ms_tmp/"
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">
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 18
<table width="450" border="1">
<tr>
<td>
<div align="center">
<select name="zoom">
<option value="3" [zoom_3_select]>
Zoom In 3x
</option>
<option value="2" [zoom_2_select]>
Zoom In 2x
</option>
<option value="1" [zoom_1_select]>
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>
<div align="center">
<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>
panggil alamat url berikut :
http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map
/pakai_template2.map&mode=browse
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 19
2.3 Mengontrol kenampakan layer
Modifikasi objek web pada file pakai_template2.map menjadi seperti ini :
web
template "template3.html"
imagepath "/tmp/ms_tmp/"
imageurl "/ms_tmp/"
end
Kemudian simpan dengan nama pakai_template3.map
Selanjurtnya buat file template3.html, dengan isi seperti dibawah ini :
<html>
<head>
<title>Mengontrol kenampakan layer</title>
</head>
<body>
<form name="mapserv" method="GET">
<input type="hidden" name="map" value="[map]">
<input type="hidden" name="imgext" value="[mapext]">
<input type="hidden" name="mode" value="browse">
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 20
<table width="450" border="1" align="center">
<tr>
<td>
Layer Aktif:
<input type="checkbox" name="layer"
value="DIY" [DIY_check]>DIY
<input type="checkbox" name="layer"
value="perusahaan" [perusahaan_check]>Kantor<br>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="submit" name="submit" value="Refresh">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<img src="[img]">
</td>
</tr>
</table>
</form>
</body>
</html>
panggil alamat url berikut :
http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map
/pakai_template3.map&mode=browse
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 21
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
shapepath "../data/shp"
imagecolor 255 200 2
symbolset "../etc/symbols.sym"
units meters
WEB
template "template4.html"
imagepath "/tmp/ms_tmp/"
imageurl "/ms_tmp/"
END
LEGEND
KEYSIZE 18 12
LABEL
TYPE BITMAP
SIZE MEDIUM
COLOR 0 0 89
END
STATUS ON
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 22
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
outlinecolor 255 2 3
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
Kemudian simpan dengan nama pakai_template4.map
Selanjurtnya buat file template3.html, sehingga menjadi seperti dibawah ini :
<html>
<head>
<title>Mengontrol kenampakan layer</title>
</head>
<body>
<form name="mapserv" method="GET">
<input type="hidden" name="map" value="[map]">
<input type="hidden" name="imgext" value="[mapext]">
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 23
<input type="hidden" name="mode" value="browse">
<table width="450" border="1" align="center">
<tr>
<td>
Layer Aktif:
<input type="checkbox" name="layer"
value="DIY" [DIY_check]>DIY
<input type="checkbox" name="layer"
value="perusahaan" [perusahaan_check]>Kantor<br>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="submit" name="submit" value="Refresh">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<img src="[img]">
</td>
</tr>
<tr>
<td align="center" valign="top">
<img src="[legend]">
</td>
</tr>
<tr>
<td align="center" valign="top">
<img src="[scalebar]">
</td>
</tr>
</table>
</form>
</body>
</html>
Simpan script diatas dengan nama template4.html
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 24
Panggil alamat url berikut :
http://localhost/cgi-bin/mapserv_44.exe?map=/ms4w/apps/latihan/map
/pakai_template4.map&mode=browse
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>
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 25
</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
shapepath "../data/shp"
imagecolor 255 200 2
symbolset "../etc/symbols.sym"
web
imagepath "/tmp/ms_tmp/"
imageurl "/ms_tmp/"
end
LEGEND
KEYSIZE 18 12
LABEL
TYPE BITMAP
SIZE MEDIUM
COLOR 0 0 89
END
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 26
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
outlinecolor 255 2 3
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);
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 27
$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 :
http://localhost/mapscript/mapscript2.phtml
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 28
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>
<!-- tampilan legenda peta -->
<td valign="top">
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 29
<?php DrawLegend(); ?>
</td>
<!-- tampilan peta -->
<td>
<?php DrawMap(); ?>
</td>
<!-- menu navigasi, terdiri dari 4 radio button -->
<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>
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 30
<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>
</table>
</td>
</tr>
<tr>
<td></td>
<!-- skala grafis -->
<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;
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 31
} 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();
$url = $img->saveWebImage();
echo"<IMG SRC=$url BORDER=0>\n";
}
function DrawLegend()
{
$img = $GLOBALS["goMap"]->drawLegend();
$url = $img->saveWebImage();
echo "<img src=$url>";
}
function ProcessURLArray( $aVars)
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 32
{
//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,
$fW, $fH, $oGeoExt);
} else if ($aVars["CMD"] == "RECENTER") {
$GLOBALS["goMap"]->zoompoint(1, $oPixelPos,
$fW, $fH, $oGeoExt);
} 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);
}
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 33
?>
Ketikan URL berikut untuk melihat hasil tampilan peta :
http://localhost/mapscript/mapscript3.phtml
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
shapepath "../data/shp"
imagecolor 255 200 2
symbolset "../etc/symbols.sym"
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 34
web
imagepath "/tmp/ms_tmp/"
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
outlinecolor 255 2 3
end
end
layer
name "perusahaan"
data "kantor.shp"
status on
type point
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 35
class
name "perus1"
symbol 1
size 18
color 32 122 22
end
end
end
Modifikasi file mapscript3.phtml menjadi sbb :
<?php
include("mapscript4.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>
<!-- tampilan legenda peta -->
<td valign="top">
<?php DrawLegend(); ?>
</td>
<!-- tampilan peta -->
<td>
<?php DrawMap(); ?>
</td>
<!-- menu navigasi, terdiri dari 4 radio button -->
<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>
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 36
<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>
<!-- skala grafis -->
<td align="center">
<?php DrawScaleBar(); ?>
</td>
<td>
</td>
</tr>
</table>
</form>
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 37
</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" );
//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";
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 38
echo "<INPUT TYPE=HIDDEN NAME=MAXY VALUE=\"".
$GLOBALS["goMap"]->extent->maxy."\">\n";
}
function DrawScaleBar()
{
$img = $GLOBALS["goMap"]->drawScaleBar();
$url = $img->saveWebImage();
echo"<IMG SRC=$url BORDER=0>\n";
}
function DrawLegend()
{
$img = $GLOBALS["goMap"]->drawLegend();
$url = $img->saveWebImage();
echo "<img src=$url>";
}
function DrawKeyMap()
{
$img = $GLOBALS["goMap"]->drawreferencemap();
$url = $img->saveWebImage();
echo "<INPUT TYPE=image SRC=$url BORDER=1 NAME=KEYMAP>\n";
}
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"]) && isset ($aVars["MAINMAP_x"])) {
//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;
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 39
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,
$fW, $fH, $oGeoExt);
} else if ($aVars["CMD"] == "RECENTER") {
$GLOBALS["goMap"]->zoompoint(1, $oPixelPos,
$fW, $fH, $oGeoExt);
} else if ($aVars["CMD"] == "ZOOM_ALL") {
$GLOBALS["goMap"]->setextent($GLOBALS["gfMinX"],
$GLOBALS["gfMinY"], $GLOBALS["gfMaxX"],
$GLOBALS["gfMaxY"]);
}
}
} 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);
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 40
return $fGeoMin + $fDeltaGeo;
}
function IsCurrentTool( $szTool )
{
return (strcasecmp($GLOBALS["gszCurrentTool"], $szTool) == 0);
}
?>
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[]"
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 41
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
include("mapscript5.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" );
//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 {
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 42
$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();
$url = $img->saveWebImage();
echo"<IMG SRC=$url BORDER=0>\n";
}
function DrawLegend()
{
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\">".
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 43
"Update</td>\n";
echo "</tr>\n";
echo "</table>";
}
function DrawKeyMap()
{
$img = $GLOBALS["goMap"]->drawreferencemap();
$url = $img->saveWebImage();
echo "<INPUT TYPE=image SRC=$url BORDER=1 NAME=KEYMAP>\n";
}
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;
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 );
}
}
//lakukan perubahan skala, sesuai tool navigasi terpilih
if (isset($aVars["CMD"]) && isset ($aVars["MAINMAP_x"])) {
//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;
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 44
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,
$fW, $fH, $oGeoExt);
} else if ($aVars["CMD"] == "RECENTER") {
$GLOBALS["goMap"]->zoompoint(1, $oPixelPos,
$fW, $fH, $oGeoExt);
} else if ($aVars["CMD"] == "ZOOM_ALL") {
$GLOBALS["goMap"]->setextent($GLOBALS["gfMinX"],
$GLOBALS["gfMinY"], $GLOBALS["gfMaxX"],
$GLOBALS["gfMaxY"]);
}
}
} 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;
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 45
$fDeltaGeo = $fDeltaPix * ($fGeoMax - $fGeoMin) / ($fPixMax -
$fPixMin);
return $fGeoMin + $fDeltaGeo;
}
function IsCurrentTool( $szTool )
{
return (strcasecmp($GLOBALS["gszCurrentTool"], $szTool) == 0);
}
?>
5. Untuk melihat tampilan panggil URL: http://localhost/mapscript/mapscript5.phtml
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 46
Daftar Pustaka
1. Nuryadin, Ruslan, 2005, ”Panduan Menggunakan MapServer” Bandung,
Informatika Bandung.
www.AgungYuliantoNugroho.com | www.imagineitcenter.com Page 47
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.