Mapserver Opensource GIS IMAGINE IT Center

Membangun Open Source GIS Menggunakan
Mapserver
(Untuk Pemula)
Oleh : Agung Yulianto Nugroho (2009)
www.AgungYuliantoNugroho.com
| www.imagineitcenter.com
Page 1
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)
Page 2
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.
Page 3
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
Page 4
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
Page 5
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
Status
Extent
: mendefinisikan nama peta

: mendefinisikan aktif atau tidaknya peta
: mendefinisikan koordinat peta yang muncul ketika peta pertama kali
diakses pada browser.
Imagetype
Size
Imagecolor
: Tytpe data hasil keluaran dari mapserver

: Ukuran peta pada browser
: 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.
Page 6
- 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

Page 7
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
Page 8
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.
Page 9
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
Page 10
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
Page 11
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 :

Page 12
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
Page 13
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 :

Page 14
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
Page 15
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
Page 16
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

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
<input
<input
<input
type="hidden"
type="hidden"
type="hidden"
type="hidden"
name="map" value="[map]">
name="imgext" value="[mapext]">
name="imgxy" value="225 150">
name="mode" value="browse">
Page 17
<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>

Page 18
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>
<input type="hidden" name="map" value="[map]">
<input type="hidden" name="imgext" value="[mapext]">
<input type="hidden" name="mode" value="browse">
Page 19
<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>

Page 20
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
Page 21
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>
<input type="hidden" name="map" value="[map]">
<input type="hidden" name="imgext" value="[mapext]">
Page 22
<input type="hidden" name="mode" value="browse">

<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
Page 23
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>
Page 24
</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
Page 25
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);
Page 26
$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 :
Page 27
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">
Page 28
<?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"))
"CHECKED";?>
>
</td>
<td>
echo
<img SRC="images/icon_zoomout.png"
</td>
<td>Zoom out</td>
</tr>
Page 29
<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;
Page 30
} 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)
Page 31
{
//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);
}
Page 32
?>
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
Page 33
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
Page 34
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>
Page 35
<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>
Page 36
</body>
</html>
Kemudian simpan dengan

mapscript3.php menjadi sbb:
nama
mapscript4.phtml.
Selanjutnya
ubah
file
<?php
Main();
function Main()
{
$GLOBALS["goMap"] = ms_newMapObj("../map/pakai_mapscript3.map" );
$aVars = $_POST;
} else {
$aVars = $_GET;
} else {
$aVars = array();
}
}
}
function DrawMap()
{
Page 37

}
{
}
{
$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"])) {
Page 38
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);
Page 39
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[]"
Page 40
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 {
Page 41
$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\">".
Page 42
"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"])) {
Page 43
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
$fDeltaY,
$nGeoX
$fDeltaY);
}
$fDeltaX,
$nGeoY
$fDeltaX,
$nGeoY
}
function Pix2Geo($nPixPos, $fPixMin, $fPixMax, $fGeoMin, $fGeoMax,
$bInversePix)
{
$fDeltaPix = ($bInversePix) ? $fPixMax - $nPixPos : $nPixPos $fPixMin;
Page 44
$fDeltaGeo = $fDeltaPix * ($fGeoMax - $fGeoMin) / ($fPixMax $fPixMin);

return $fGeoMin + $fDeltaGeo;
}
{
}
?>
5. Untuk melihat tampilan panggil URL: http://localhost/mapscript/mapscript5.phtml
Page 45
Daftar Pustaka
1. Nuryadin, Ruslan, 2005, Panduan Menggunakan MapServer Bandung,
Informatika Bandung.
Page 46
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.
Page 47

Mapserver Opensource GIS IMAGINE IT Center

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Mapserver Opensource GIS IMAGINE IT Center

Diunggah oleh

Hak Cipta:

Format Tersedia

Membangun Open Source GIS Menggunakan

Oleh : Agung Yulianto Nugroho (2009)

1. Apakah Itu Mapserver

Sejarah perkembangan SIG

dikembangkan oleh team

MSW4 adalah Mapserver untuk windows

Server HTTP Apache

MapServer CGI (Color Graphic Interface)

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

Fokus pada sisi server.

Data hasil pemrosesan kemudian dikirimkan ke klien dalam format standard

Sehingga dapat dilihat menggunakan sebarang web browser.

Kelemahan utama pendekatan ini menyangkut keterbatasan opsi interaksi dengan

2. Membuat file MAP

Kemudian simpan file diatas dengan nama contoh1.map

: mendefinisikan nama peta

: Tytpe data hasil keluaran dari mapserver

Shapepath : Menunjukan direktori tempat peta berada

: menunjukandirektori tempat file temporary dan gambar akan

: Menentukan URL yang mengacu pada direktori yang didefinisikan

Kemudian panggil alamat URL berikut ini:

Maka pada browser akan muncul gambar seperti berikut ini.

1.2. File MAP dengan multi layer

Kemudian simpan dengan nama file contoh2.map

Simpan file dengan nama symbols.sym

Maka pada browser akan muncul gambar seperti berikut ini.

Kemudian ubah file contoh2.map menjadi seperti dibawah ini :

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

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

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

Mode browse digunakan untuk menampilkan peta interaktif, dengan memanfaatkan

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

Kemudian simpan dengan nama pakai_template1.map

panggil alamat url berikut :

2.2 Membuat navigasi peta

Kemudian simpan dengan nama pakai_template2.map

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

panggil alamat url berikut :

2.3 Mengontrol kenampakan layer

Kemudian simpan dengan nama pakai_template3.map

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

panggil alamat url berikut :

2.4 Menampilkan Skala grafis dan legenda

Kemudian simpan dengan nama pakai_template4.map

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

Simpan script diatas dengan nama template4.html

Panggil alamat url berikut :

3.1 Menampilkan peta sederhana dan batas koordinat

Kode PHTML di atas menghasilkan gambar peta berdasarkan file

3.2 Menampilkan Legenda dan skala grafis

Simpan hasil modifikasi di atas dengan nama pakai_mapscript2.map

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

3.3 Membuat navigasi peta

<?php DrawLegend(); ?>

Sedangkan file mapscript3.php berisi sbb:

3.3 Menggunakan Peta Index

Modifikasi file mapscript3.phtml menjadi sbb :

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

Kemudian simpan dengan

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

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

return $fGeoMin + $fDeltaGeo;