Pengenalan mendasar bgt nih...mudah2an aj ngerti n kebaca,,susah jg nerangin nya..hehe...

1. Tema : Sistem Informasi Geografis Berbasis
Web
Imat Ruhimat, Indonesian Computer University,2009
blog.imat@gmail.com
PENGENALAN MAPSERVER
Dasar pemikiran mapserver adalah mengubah data peta berupa vektor menjadi
data raster (gambar) yang ditampilkan dalam halaman web. Mapserver dapat
melakukan hal itu dengan menjalankan program CGI pada webserver. Secara
umum hal yang dimaksud diatas adalah bahwa mapserver dijalankan pada
server dan output yang berupa peta raster ditampilkan di web browser pada
komputer pengguna.
Data Masukan MapServer adalah :
1. File Konfigurasi (pada umumnya disebut file *.map) contoh : kabgarut.map
2. Satu atau lebih data peta berupa vektor (file *.shp) contoh :
(pertanian.prj,,,,pertanian.shp,,,,,pertanian.shx) ketiganya hatus ada
yaitu .shp,.shx,.prj
3. Satu atau lebih template web dalam format HTML, dalam hal ini sebagai
media untuk menampilkan data peta berupa raster dalam format GIF.
Contoh : qindustri.html, qkecamatan.html

3. Isi dari File Map (kabgarut.map)
MAP # awal pendeskripsian file map
NAME POTENSIGARUT #memberi awalan nama file output
STATUS ON #mengaktifkan peta agar dapat terlihat
SIZE 600 600 #ukuran peta dalam pixel
FONTSET font/fontset.txt #font untuk label peta
EXTENT 107.400710 -7.762052 108.124868 -6.921875 # koordinat
peta
UNITS DD #unit koordinat peta digunakan untuk skala
SHAPEPATH "peta" #alamat tempat data disimpan
IMAGECOLOR 128 128 255 #warna latar peta
WEB #pendefinisian utk halaman web
TEMPLATE kabgarut.html #halaman web untuk menampilkan peta
IMAGEPATH "tmp" #alamat tempat output mapserver
disimpan
END
QUERYMAP #menampilkan hasil query
SIZE 300 300 #butuh gambar kecil utk hasil
STATUS ON #agar query map terlihat
STYLE HILITE #menandai pilihan
COLOR 255 0 0 #dengan warna ini....utk yg ditandai
END
REFERENCE #pendefinisian peta referensi
STATUS ON #visibilitas

4. IMAGE "referensi.gif" #gambar dasar untuk referensi
SIZE 250 250 #ukuran gambar dalam pixel
EXTENT 107.400710 -7.762052 108.124868 -6.921875
COLOR -1 -1 -1 #warna transparan untuk fill
OUTLINECOLOR 255 0 0 #warna merah untuk outline
END
SCALEBAR #memulai objek balok skala
IMAGECOLOR 255 255 255 #warna dasar putih
LABEL
COLOR 0 0 0 #warna tex hitam
SIZE MEDIUM #ukuran relatif
END
SIZE 280 8 #ukuran panjang dan lebar dalam pixel
COLOR 255 255 255 #warna pertama apada balok skala
BACKGROUNDCOLOR 0 0 0 #warna dasar balok skala
OUTLINECOLOR 0 0 0 #warna kedua pada balok skala
UNITS KILOMETERS #unit pada balok skala
INTERVALS 5 #jumlah interval yang diinginkan
STATUS ON #visibilitas
STYLE 0 style memiliki dua harga yaitu 0 dan 1
END
LEGEND
IMAGECOLOR 230 238 226 #warna latar legenda
STATUS EMBED #legenda bergabung dengan peta
POSITION LR #posisi legenda kanan-bawah
KEYSIZE 15 10 #ukuran simbol

5. LABEL #memulai objek label
COLOR 0 0 0 #warna tex
SIZE 8 #ukuran font
FONT arial #nama font
TYPE truetype #tipe font
END
END
SYMBOL
NAME 'CIRCLE'
TYPE ELLIPSE
POINTS 1 1 END
FILLED TRUE
END
SYMBOL
NAME 'INDUSTRI'
TYPE ELLIPSE
POINTS 0 1
20
END
FILLED TRUE
END

6. SYMBOL #mendefinisikan symbol
NAME 'PETERNAKAN' #objek yg dipilih utk ditampilkan dlm
bntuk simbol
TYPE VECTOR #tipe simbol
POINTS 2 1 #bentukny mau kyk apa
22
12
END
FILLED TRUE #fill nya ditampilkan
END
LAYER
NAME kecamatan
TYPE POLYGON #krna kecamatan mka typenya poliigon
STATUS OFF #default tdk terlihat ,akan terlihat jika diceklis
DATA kecamatan #nama file vektor (shp)
LABELITEM "kecamatan"
CLASS
NAME Kecamatan #tex yg akan dtmpilkan pada legenda
COLOR 255 255 100
OUTLINECOLOR 0 200 0
LABEL
COLOR 000
SIZE 8
POSITION CC
BUFFER 5
FONT tahoma
TYPE truetype
END

7. END
TEMPLATE qkecamatan.php #file template utk menampilkan
raster
END
LAYER
NAME industri
TYPE POINT
STATUS OFF
DATA industri
CLASS
NAME Industri
COLOR 250 0 230
SYMBOL 'INDUSTRI' #simbol yang digunakan
SIZE 8
END
TEMPLATE qindustri.html
END
LAYER
NAME pertanian
TYPE POINT
STATUS OFF
DATA pertanian
CLASS
NAME Pertanian
COLOR 0 0 100
SYMBOL 'CIRCLE'
SIZE 9
END

8. TEMPLATE qpertanian.php
END
LAYER
NAME peternakan
TYPE POINT
STATUS OFF
DATA peternakan
CLASS
NAME peternakan
COLOR 0 255 0
SYMBOL 'PETERNAKAN'
SIZE 18
END
TEMPLATE qpeternakan.html
END
LAYER
NAME pasar_tradisional
TYPE POINT
STATUS OFF
DATA pasar_tradisional
CLASS
NAME "Pasar Tradisional"
COLOR 0 200 200
SYMBOL 'CIRCLE'
SIZE 9
END
TEMPLATE qpasar.html

9. END
LAYER
NAME jalan
TYPE LINE #karena berupa garis maka gunakan tipe line
STATUS OFF
DATA jalan #akses data shp
CLASS
NAME Jalan
COLOR 50 26 255
END
TEMPLATE qjalan.html
END
LAYER
NAME rel_kereta
TYPE LINE
STATUS OFF
DATA rel_kereta
CLASS
NAME "Rel Kereta"
COLOR 90 0 100
END
TEMPLATE qrelkereta.html
END
END
Isi dari kabgarut.html

10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Map Server Kabupaten Garut</title>
<script language="javascript"><!--
function FullExtent(){
document.mapserv.imgext.value="107.400710 -7.762052 108.124868
-6.921875";
document.mapserv.imgxy.value="300 300";
document.mapserv.submit();
}
function Koordinat(img){
var x=Number([minx] + ((event.clientX - img.offsetLeft)*([maxx] -
[minx]))/[mapwidth]);
var y=Number([maxy] - ((event.clientY - img.offsetTop)*([maxy] -
[miny]))/[mapheight]);
window.status="Koordinat Geografis :" + (x) + " and y=" + (y);
}
function Update(){setmode('browse');document.mapserv.submit();}
function setmode(m) {document.mapserv.mode.value=m;}
// --></script>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style5 {font-family: Arial, Helvetica, sans-serif; font-weight:
bold; color: #FFFFFF; }
.style6 {font-family: Arial, Helvetica, sans-serif; color:
#FFFFFF; }
-->
</style>
</head>
<body>
<center>
<form method="get" action="mapserv.exe" name="mapserv">
<table width="950" border="0" cellpadding="0" cellspacing="0">
<tr>
<th scope="col"><table border="0" cellpadding="0"
cellspacing="0" width="950">
<!-- fwtable fwsrc="Untitled-1.png" fwbase="index.gif"
fwstyle="Dreamweaver" fwdocid = "2100863515" fwnested="0" -->
<tr>
<td><img src="images/spacer.gif" width="100" height="1"
border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="94" height="1"
border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="98" height="1"
border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="97" height="1"
border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="412" height="1"
border="0" alt="" /></td>

11. <td><img src="images/spacer.gif" width="132" height="1"
border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="17" height="1"
border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1"
border="0" alt="" /></td>
</tr>
<tr>
<td colspan="7"><img
src="http://localhost/kabgarut/images/index_r1_c1.gif" alt=""
name="index_r1_c1" width="950" height="127" border="0"
id="index_r1_c1" /></td>
<td><img src="images/spacer.gif" width="1" height="127"
border="0" alt="" /></td>
</tr>
<tr>
<td><a href="http://localhost/kabgarut/index.htm"><img
src="http://localhost/kabgarut/images/index_r2_c1.gif" alt=""
name="index_r2_c1" width="100" height="26" border="0"
id="index_r2_c1" /></a></td>
<td><a href="http://localhost/kabgarut/profil.php"><img
src="http://localhost/kabgarut/images/index_r2_c2.gif" alt=""
name="index_r2_c2" width="94" height="26" border="0"
id="index_r2_c2"
onmouseover="MM_showMenu(window.mm_menu_1112002012_0,0,26,null,'inde
x_r2_c2')" onmouseout="MM_startTimeout();" /></a></td>
<td><a
href="http://localhost/kabgarut/profil_tani.php"><img
src="http://localhost/kabgarut/images/index_r2_c3.gif" alt=""
name="index_r2_c3" width="98" height="26" border="0"
id="index_r2_c3"
onmouseover="MM_showMenu(window.mm_menu_1112011151_0,0,26,null,'inde
x_r2_c3')" onmouseout="MM_startTimeout();" /></a></td>
<td><a
href="http://localhost/kabgarut/isibukutamu.php"><img
src="http://localhost/kabgarut/images/index_r2_c4.gif" alt=""
name="index_r2_c4" width="97" height="26" border="0"
id="index_r2_c4"
onmouseover="MM_showMenu(window.mm_menu_1112013816_0,0,26,null,'inde
x_r2_c4')" onmouseout="MM_startTimeout();" /></a></td>
<td><img
src="http://localhost/kabgarut/images/index_r2_c5.gif" alt=""
name="index_r2_c5" width="412" height="26" border="0"
id="index_r2_c5" /></td>
<td><a href="peta.htm"><img
src="http://localhost/kabgarut/images/index_r2_c6.gif" alt=""
name="index_r2_c6" width="132" height="26" border="0"
id="index_r2_c6" /></a></td>
<td><img
src="http://localhost/kabgarut/images/index_r2_c7.gif" alt=""
name="index_r2_c7" width="17" height="26" border="0"
id="index_r2_c7" /></td>
<td><img src="images/spacer.gif" width="1" height="26"
border="0" alt="" /></td>
</tr>
</table></th>

12. </tr>
</table>
<table width="950" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" bgcolor="#000099"><p align="center"
class="style5">LAYER
</p>
<p class="style6">
<input type="checkbox" name="layer" value="kecamatan"
[kecamatan_check] onclick="Update()" />
Kecamatan<br />
<input type="checkbox" name="layer" value="jalan"
[jalan_check] onclick="Update()" />
Jalan<br />
<input type="checkbox" name="layer"
value="pasar_tradisional" [pasar_tradisional_check]
onclick="Update()" />
Pasar Tradisional<br />
<input type="checkbox" name="layer" value="rel_kereta"
[rel_kereta_check] onclick="Update()" />
Rel Kereta<br />
<input type="checkbox" name="layer" value="industri"
[industri_check] onclick="Update()" />
Industri<br />
<input type="checkbox" name="layer" value="peternakan"
[peternakan_check] onclick="Update()" />
Peternakan<br />
<input type="checkbox" name="layer" value="pertanian"
[pertanian_check] onclick="Update()" />
Pertanian</p></td>
<td width="639" rowspan="4" valign="top" bgcolor="#0033CC"><div
align="center">
<p><span class="style5">
TOOLS :
<input type="radio" name="zoomdir" value="1"
[zoomdir_1_check] onclick="Update()">
Zoom In |
<input type="radio" name="zoomdir" value="-1" [zoomdir_-
1_check] onclick="Update()">
Zoom Out |
<input type="radio" name="zoomdir" value="0"
[zoomdir_0_check] onclick="Update()" />
Pan |
<input type="radio" name="zoomdir" value="0"
onclick="FullExtent()" />
FullExtent |
<input type="radio" name="zoomdir" value="0"
onclick="setmode('query')" />
Info </span></p>
<p>
<input name="img" type="image" img src="/kabgarut/tmp/
[img]" alt="Kabupaten Garut" onmousemove="Koordinat(this);">
</p>
</div> </td>
</tr>

13. <tr align="center" bgcolor="#000099">
<td><div align="left" class="style6">
<p align="center"><strong>PETA REFERENSI </strong></p>
<p align="center"><img name="ref" type="image"
src="/kabgarut/tmp/[ref]"> </p>
<p align="center"><span class="style1">Skala 1 :
[scale]</span> </p>
</div></td>
</tr>
<tr align="center" bgcolor="#000099">
<td><div align="left" class="style6">
<div align="center"><img src="/kabgarut/tmp/[scalebar]"
name="skala" id="skala" type="image" /></div>
</div></td>
</tr>
<tr align="left" bgcolor="#000099">
<td width="261"><div align="left" class="style6">
<div align="center">
<p>Badan Perencanaan Pembangunan Daerah (BAPPEDA)</p>
<p>Subid. Pengolahan Data <br>
</p>
</div>
</div></td>
</tr></table>
<input type="hidden" name="map" value="[map]">
<input type="hidden" name="imgext" value="[mapext]">
<input type="hidden" name="imgxy" value="[center]">
<input type="hidden" name="zoomsize" value="2">
<input type="hidden" name="mode" value="browse">
</form>
</center>
</body>
</html>

14. Isi dari qindustri (salah satu contoh utk
menampikan query)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Data Pasar Tradisional</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1">
<style type="text/css">
<!--
.style2 {font-family: Arial, Helvetica, sans-serif; color:
#FFFFFF; }
.style3 {color: #FFFFFF}
.style4 {font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;
font-size: 24px; }
-->
</style>
</head>
<body>
<table width="600" border="1" align="center">
<tr>
<td align="center" bgcolor="#000099"><h1 class="style4">SENTRA
INDUSTRI : [INDUSTRI]</h1></td>
</tr>
<tr>
<td align="center" bgcolor="#0033CC"><p class="style3"><img
src="/kabgarut/tmp/[img]" type="image"></p>
<p class="style2">Keterangan : Warna merah adalah objek yang
dipilih.</p></td>
</tr>
<tr>
<td bgcolor="#0033CC"><table width="100%" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td width="50%" bgcolor="#0033CC" class="style2">Letak Desa
</td>
<td width="5%" bgcolor="#0033CC" class="style2">:</td>
<td nowrap bgcolor="#0033CC"
class="style2">[LETAK_DESA]</td>
</tr>
<tr>
<td width="50%" bgcolor="#0033CC" class="style2">Nilai
Investasi </td>
<td width="5%" bgcolor="#0033CC" class="style2">:</td>
<td nowrap bgcolor="#0033CC" class="style2">[INVESTASI]</td>
</tr>
<tr>
<td bgcolor="#0033CC" class="style2">Kapasitas Produksi
</td>

15. <td bgcolor="#0033CC" class="style2">&nbsp;</td>
<td nowrap bgcolor="#0033CC" class="style2">[PRODUKSI]</td>
</tr>
<tr>
<td bgcolor="#0033CC" class="style2">Nilai Produksi </td>
<td bgcolor="#0033CC" class="style2">:</td>
<td nowrap bgcolor="#0033CC" class="style2">[PRODUKSI0]</td>
</tr>
<tr>
<td bgcolor="#0033CC" class="style2">Letak Kecamatan </td>
<td bgcolor="#0033CC" class="style2">:</td>
<td nowrap bgcolor="#0033CC" class="style2">[KECAMATAN]</td>
</tr>
<tr>
<td width="50%" bgcolor="#0033CC" class="style2">Berita</td>
<td width="5%" bgcolor="#0033CC" class="style2">:</td>
<td nowrap bgcolor="#0033CC" class="style2">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Karena hanya pengenalan ,,jd nggak
semua file ditampilkan
disini...hanyha file2 penting konsep
pembentukan petanya aja...hehe..