<html>
<head><title>Aplikasi Peta GIS Interaktif Berbasis Web</title></head>
<body>
<script language="JavaScript">
<!-- FUNGSI POPUP -->
function toFrame() {
if (document.mapserv.mode.value == "query" || document.mapserv.mode.value == "nquery") {
document.mapserv.target = "_blank";
} else {
document.mapserv.target = "_self";
}
}
<!-- AKHIR FUNGSI POPUP -->
<!-- FUNGSI MENGGESER -->
var pansize = 0.01;
function pan(direction) {
var x,y;
if(direction == 'u') {
x = ([mapwidth]-1)/2.0;
y = 0 - ([mapheight]*pansize)/2.0;
} else if(direction == 'ub') {
x = 0 - ([mapwidth]*pansize)/2.0;
y = 0 - ([mapheight]*pansize)/2.0;
} else if(direction == 'ut') {
x = ([mapwidth]-1) + ([mapwidth]*pansize)/2.0;
y = 0 - ([mapheight]*pansize)/2.0;
} else if(direction == 's') {
x = ([mapwidth]-1)/2.0;
y = ([mapheight]-1) + ([mapheight]*pansize)/2.0;
} else if(direction == 'sb') {
x = 0 - ([mapwidth]*pansize)/2.0;
y = ([mapheight]-1) + ([mapheight]*pansize)/2.0;
} else if(direction == 'st') {
x = ([mapwidth]-1) + ([mapwidth]*pansize)/2.0;
y = ([mapheight]-1) + ([mapheight]*pansize)/2.0;
} else if(direction == 't') {
x = ([mapwidth]-1) + ([mapwidth]*pansize)/2.0;
y = ([mapheight]-1)/2.0;
} else if(direction == 'b') {
x = 0 - ([mapwidth]*pansize)/2.0;
y = ([mapheight]-1)/2.0;
}
//document.mapserv.zoom[3].selected = true;
document.mapserv.imgxy.value = x + " " + y
document.mapserv.submit();
}
<!-- AKHIR FUNGSI MENGGESER -->
<!-- -->
<!-- FUNGSI MENCETAK PETA -->
function print_map() {
var print_url; var mapsize;
var layers = "[layers]";
var nama_cgi = "http://localhost/cgi-bin/cgigis.exe";
var nama_peta = document.mapserv.map.value.slice(0,-4)+"-print.map";
// A3 dan Default
if (document.mapserv.print_layers.value == "default" && document.mapserv.print_size.value == "A3")
{
layers="All";
mapsize="1280+960";
}
// A4 dan Default
else if (document.mapserv.print_layers.value == "default" && document.mapserv.print_size.value == "A4")
{
layers="clip_kebalikan_utm+kebalikan kab_poly_utm+buat_pot_utm+laut+grs pantai_utm+kabupaten_poly_utm+batas administrasi_line2_utm+batas administrasi_line_utm+kecamatan_poly_utm+desa_poly_utm";
mapsize="800+600";
}
// A3 dan Sesuai Pilihan
else if (document.mapserv.print_layers.value == "pilihan" && document.mapserv.print_size.value == "A3")
{
mapsize="1280+960";
}
// A4 dan Sesuai Pilihan
else if (document.mapserv.print_layers.value == "pilihan" && document.mapserv.print_size.value == "A4")
{
mapsize="800+600";
}
print_url = nama_cgi + "?map=" + nama_peta + "&mapsize=" + mapsize + "&layers=" + layers + "&mapext=[minx]+[miny]+[maxx]+[maxy]";
window.open(print_url);
}
<!-- AKHIR FUNGSI MENCETAK PETA -->
<!-- -->
</script>
<!-- FORM HTML UTAMA -->
<form name="mapserv" method="GET" action="cgigis.exe">
<input type="hidden" name="map" value="[map]">
<input type="hidden" name="imgext" value="[mapext]">
<input type="hidden" name=savequery" value="[true]">
<input type="hidden" name="imgxy" value="[center]">
<input type="hidden" name="template" value="[html]">
<!-- -->
<!-- -->
<!-- TABEL UTAMA -->
<table border=1 cellpadding=5>
<tr><td align="center" colspan="3"><font size=5 face="Verdana" color="Green">RTRW Pacitan - Trenggalek</td></font>
</tr>
<tr>
<td valign="top" nowrap>
<input type="submit" value="Refresh"/><br>
<!-- LAYER CONTROLS -->
<font size="2" face="Arial">
<input type="checkbox" name="layer" value="jaringan_ipal_dan_iplt" [jaringan_ipal_dan_iplt_check]/>jaringan_ipal_dan_iplt<br>
<input type="checkbox" name="layer" value="jaringan_telepon" [jaringan_telepon_check]/>jaringan_telepon<br>
<input type="checkbox" name="layer" value="jar_listrik" [jar_listrik_check]/>jar_listrik<br>
<input type="checkbox" name="layer" value="air_bersih" [air_bersih_check]/>air_bersih<br>
<input type="checkbox" name="layer" value="rth_poly" [rth_poly_check]/>rth_poly<br>
<input type="checkbox" name="layer" value="rth" [rth_check]/>rth<br>
<input type="checkbox" name="layer" value="permukiman_kota_dan_desa" [permukiman_kota_dan_desa_check]/>permukiman_kota_dan_desa
<br>
<input type="checkbox" name="layer" value="kawasan_bencana" [kawasan_bencana_check]/>kawasan_bencana<br>
<input type="checkbox" name="layer" value="kawasan_rawan_bencana" [kawasan_rawan_bencana_check]/>kawasan_rawan_bencana<br>
<input type="checkbox" name="layer" value="kawasan_budidaya" [kawasan_budidaya_check]/>kawasan_budidaya<br>
<input type="checkbox" name="layer" value="desa_poly_utm" [desa_poly_utm_check]/>desa_poly_utm<br>
<input type="checkbox" name="layer" value="kecamatan_poly_utm" [kecamatan_poly_utm_check]/>kecamatan_poly_utm<br>
<input type="checkbox" name="layer" value="batas_administrasi_line_utm" [batas_administrasi_line_utm_check]/>batas_administrasi_line_utm<br>
<input type="checkbox" name="layer" value="batas_administrasi_line2_utm" [batas_administrasi_line2_utm_check]/>batas_administrasi_line2_utm<br>
<input type="checkbox" name="layer" value="kabupaten_poly_utm" [kabupaten_poly_utm_check]/>kabupaten_poly_utm<br>
<input type="checkbox" name="layer" value="grs_pantai_utm" [grs_pantai_utm_check]/>grs_pantai_utm<br>
<input type="checkbox" name="layer" value="laut" [laut_check]/>laut<br>
<input type="checkbox" name="layer" value="buat_pot_utm" [buat_pot_utm_check]/>buat_pot_utm<br>
<input type="checkbox" name="layer" value="kebalikan_kab_poly_utm" [kebalikan_kab_poly_utm_check]/>kebalikan_kab_poly_utm<br>
<input type="checkbox" name="layer" value="clip_kebalikan_utm" [clip_kebalikan_utm_check]/>clip_kebalikan_utm<br>
</font>
<!-- AKHIR LAYER CONTROLS -->
</td>
<!-- TAMPILAN PETA DI DALAM NESTED TABLE-->
<td align="center" valign="top">
<!-- -->
<!-- -->
<!-- TABEL NESTED: PETA -->
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#6EBE1E">
<!-- -->
<!-- TABEL NESTED (ROW PERTAMA): BINGKAI -->
<tr>
<td align="left">
<a href="javascript:pan('ub')">
<img src="../pics/directions/aub.gif" border="0" alt="geser ke Barat-laut">
</a>
</td>
<td align="center">
<a href="javascript:pan('u')">
<img src="../pics/directions/autara.gif" border="0" alt="geser ke Utara">
</a>
</td>
<td align="right">
<a href="javascript:pan('ut')">
<img src="../pics/directions/aut.gif" border="0" alt="geser ke Timur-laut">
</a>
</td>
</tr>
<!-- TABEL NESTED (AKHIR ROW PERTAMA) -->
<!-- -->
<!-- TABEL NESTED (ROW KEDUA): BINGKAI DAN PETA-->
<tr>
<td align="left">
<a href="javascript:pan('b')">
<img src="../pics/directions/abarat.gif" border="0" alt="geser ke Barat">
</a>
</td>
<td align="center">
<input type="image"
name="img"
src="[img]"
width="[mapwidth]"
height="[mapheight]"
border="0"
alt="PETA INTERAKTIF"
>
</td>
<td align="right">
<a href="javascript:pan('t')">
<img src="../pics/directions/atimur.gif" border="0" alt="geser ke Timur">
</a>
</td>
</tr>
<!-- TABEL NESTED (AKHIR ROW KEDUA) -->
<!-- -->
<!-- TABEL NESTED (ROW KETIGA): BINGKAI -->
<tr>
<td align="left">
<a href="javascript:pan('sb')">
<img src="../pics/directions/asb.gif" border="0" alt="geser ke Barat-daya">
</a>
</td>
<td align="center">
<a href="javascript:pan('s')">
<img src="../pics/directions/aselatan.gif" border="0" alt="geser ke Selatan">
</a>
</td>
<td align="right">
<a href="javascript:pan('st')">
<img src="../pics/directions/ast.gif" border="0" alt="geser ke Tenggara">
</a>
</td>
</tr><br>
<!-- TABEL NESTED (AKHIR ROW KETIGA) -->
</table>
<!-- AKHIR TABEL NESTED (PETA)-->
<!-- -->
<!-- SKALA -->
<b>Skala</b><br>
<img src="[scalebar]" alt="Skala batang">
<!-- AKHIR SKALA -->
<!-- -->
<!-- TABEL NESTED: FUNGSI CETAK -->
<table border="0" cellspacing="5" cellpadding="0" align="center">
<tr>
<td>
<table border="0" cellpadding="4" align="left">
<!-- LINK UNTUK PRINTING -->
<tr>
<td nowrap>
<a href=javascript:print_map()>
<img border="0" src="../pics/print.gif" align="center" alt="CETAK PETA">
</a>
</td>
</tr>
<!-- AKHIR LINK UNTUK PRINTING -->
</table>
</td>
<td>
</td>
<td>
<table border="0" cellpadding="4" align="left">
<!-- DROP-DOWN MENU UNTUK UKURAN-->
<tr>
<td nowrap>
<font size=2 face="Arial">
Ukuran Kertas:
<select name="print_size">
<option value="A4">A4</option>
<option value="A3">A3</option>
</select>
</font>
</td>
</tr>
<!-- AKHIR DROP-DOWN MENU UNTUK UKURAN-->
<!-- -->
<!-- DROP-DOWN MENU UNTUK PILIHAN LAYER-->
<tr>
<td nowrap>
<font size=2 face="Arial">
Layer Yang Dicetak:
<select name="print_layers">
<option value="default">Default</option>
<option value="pilihan">Sesuai Pilihan</option>
</select></font>
<td>
</tr>
<!-- AKHIR DROP-DOWN MENU UNTUK PILIHAN LAYER-->
</table>
</td>
<td>
</td>
</tr>
</table>
<!-- AKHIR TABEL NESTED UNTUK FUNGSI CETAK -->
<!-- -->
<!-- -->
</td>
<!-- AKHIR TAMPILAN PETA DI DALAM NESTED TABLE-->
<td valign="top" nowrap>
<!-- SELECT ZOOM LEVEL -->
<font face="Arial" size="2"><b>Mode Aplikasi</b></font><br>
<font size="2" face="Arial">
<select name="mode">
<option value="browse" [browse_select]>Browse</option>
<option value="query" [query_select]>Query</option>
</select><br><br>
<!-- AKHIR SELECT ZOOM LEVEL -->
<!-- -->
<!-- SELECT ZOOM LEVEL -->
<font face="Arial"><b>Navigasi Peta</b></font><br>
<font size="2" face="Arial">
Zoom Out <input type=radio name=zoom value=-2 [zoom_-2_check]><br>
Zoom In <input type=radio name=zoom value=2 [zoom_2_check]><br>
NORMAL <input checked type=radio name=zoom value=1 [zoom_1_check]><br></font>
<!-- AKHIR SELECT ZOOM LEVEL -->
<!-- -->
<!-- LEGENDA -->
<br><font face="Arial"><B>Legenda</B><font><font size=2 face="Arial"><HR>[legend]<HR><br></font>
<!-- AKHIR LEGENDA -->
<!-- -->
<!-- LOGO -->
<img src="../pics/logo-with-pt.jpg">
<!-- AKHIR LOGO -->
<!-- -->
</td>
</tr>
</table>
<!-- AKHIR TABEL UTAMA-->
<!-- -->
</form>
<!-- AKHIR FORM HTML UTAMA -->
<!-- -->
<!-- -->
</body>
</html>