Pengembangan Aplikasi Web GIS Papua

Web Map Service (WMS) dengan MapServer dan OpenLayers

Auriza Akbar 18 Januari 2012

1 Instalasi MapServer for Windows (MS4W)

1.1 Download MS4W
http://www.maptools.org/dl/ms4w/ms4w_3.0.3.zip 38 !"#

1.2 Unzip MS4W

$nzip k% dir%ktori root suatu dri&%' misaln(a C:/. Jika b%rhasil akan mun)ul dir%ktori baru /ms4w.

1.3 Install Apache MS4W web server

"uka cmd.exe s%bagai administrator dan *alankan skrip /ms4w/apache-install.bat.
C:\ms4w> apache-install.bat Installing the Apache MS4W Web Server service The Apache MS4W Web Server service is success ull! installe". Testing http".c#n .... $rr#rs rep#rte" here must be c#rrecte" be #re the service can be starte". http": C#ul" n#t reliabl! "etermine the server%s ull! &uali ie" "#main name' us ing ()*.+.+.( #r Server,ame The Apache MS4W Web Server service is starting. The Apache MS4W Web Server service was starte" success ull!.

$ntuk m%nghilangkan p%san %rror di atas' %dit /ms4w/Apache/conf/httpd.conf pada baris 1+3.
Server,ame l#calh#st:-+

,%start Apa)h% d%ngan m%n*alankan skrip /ms4w/apache-restart.bat.

1.4 Tes instalasi MS4W

"uka w%b brows%r and brows% k% http://lo)alhost. Jika b%rhasil akan mun)ul halaman utama !-4..

Persiapan Aplikasi Web !aru

2.1 !at dire"tori apli"asi bar! di /ms4w/apps/papua

2.2 Download librar# $avaScript dan %SS

/ownload librar( (ang dibutuhkan di http://auriza.sit%40.n%t/upload/lib0bootstrap0op%nla(%rs.zip dan unzip k% dir%ktori /ms4w/apps/papua. 1ibrar( ini t%rdiri dari: 2p%n1a(%rs 2.11' 3witt%r4s "ootstrap 1.4.0' dan *5u%r( 1.+.1.

2.3

!at &ap'ile "oson( di dire"tori /ms4w/apps/papua/map

"uat 6il% b%rnama papua.map di dir%ktori t%rs%but. 7anduan ini akan m%makai data g%ogra6is dari pro&insi 7apua.

2.4 Download contoh data shape'ile

/ownload shap%6il% (ang digunakan http://auriza.sit%40.n%t/upload/shp0papua.zip dan unzip k% dir%ktori /ms4w/apps/papua/map.

2.) Ta&bah"an "on'i(!rasi Apache di /ms4w/httpd.d

"uat 6il% b%rnama /ms4w/httpd.d/httpd_papua.conf dan isikan d%ngan kon6igurasi Apa)h% di bawah ini.
Alias .papua /.ms4w.apps.papua/ 01irect#r! /.ms4w.apps.papua/> All#w2verri"e ,#ne 2r"er All#w'1en! All#w r#m all 0.1irect#r!> 01irect#r! /.ms4w.apps.papua.map/> 2r"er 1en!'All#w 1en! r#m all 0.1irect#r!> Set$nv papua .ms4w.apps.papua.map.papua.map

2.* +estart Apache

Jalankan skrip /ms4w/apache-restart.bat.

" Penulisan Mapfile Seder#ana

!ap6il% m%rupakan input bagi program !ap-%r&%r. !ap6il% b%risi rin)ian sumb%r data g%ogra6is dan p%warnaan untuk data t%rs%but.

3.1 Str!"t!r Map'ile

-%)ara umum' map6il% b%risi satu ob*%k map d%ngan b%b%rapa layer. 7ro(%ksi pada ob*%k map m%rupakan pro(%ksi output' s%dangkan pro(%ksi pada ob*%k layer m%rupakan pro(%ksi data input.

3.2 ,eran("a Dasar Map'ile

"%rikut adalah k%rangka dasar map6il% (ang b%risi ob*%k map. /i dalam ob*%k map dapat ditambahkan b%b%rapa ob*%k layer. $ntuk )ontoh kali ini' ob*%k layer masih kosong. !ap6il% b%risi ob*%k dan pasangan key-value. $ntuk ob*%k map' key dan ob*%k (ang p%nting adalah name' extent' imagecolor' dan projection.
name:

nama map6il%' b%rikan nama (ang singkat dan *%las. batasan p%ta dalam satuan d%ra*at d%simal: 8min' (min' 8ma8' (ma8. warna background p%ta. pro(%ksi output p%ta' biasan(a ditulis dalam kod% 97-:.

extent:

imagecolor: projection:

;om%ntar pada map6il% diawali d%ngan tanda pagar <#. 3iap ob*%k harus ditutup d%ngan keyword end. "%rikan ind%ntasi supa(a susunan ob*%k dapat dib%dakan d%ngan mudah.

map name /papua/ e3tent (44 -(+ (4) ( imagec#l#r )55 )55 )55 pr#6ecti#n /init7epsg:44)8/ en" en" 9 tambah:an la!er-la!er "i sini

3.3 -ena&bahan .a#er Ad&inistrasi

$ntuk ob*%k layer' key dan ob*%k (ang p%nting adalah name' status' type' data' projection' dan class.
name:

nama la(%r' b%rikan nama (ang singkat dan *%las. pilihan apakah la(%r akan ditampilkan atau tidak. *%nis data g%ogra6is pada la(%r ini. sumb%r data g%ogra6is' dalam )ontoh ini adalah lokasi p%n(impanan shap%6il%. pro(%ksi input la(%r ini. b%risi in6ormasi p%warnaan untuk s%tiap 6itur.

status: type: data:

projection: class:

"%rikut adalah p%nulisan ob*%k layer untuk data administrasi (ang b%r*%nis polygon.
la!er name /a"m/ status #n t!pe p#l!g#n "ata /shp.A"m;)+(+;<apua.shp/ pr#6ecti#n /init7epsg:44)8/ en" class name /A"ministrasi/ st!le c#l#r )55 )55 (44 #utlinec#l#r )55 )55 )55 en" en" en"

3.4 -ena&bahan .a#er /-/

"%rikut adalah p%nulisan ob*%k layer untuk data =7= (ang b%r*%nis polygon.
la!er name /hph/ status #n t!pe p#l!g#n "ata /shp.=<=;<apua.shp/ pr#6ecti#n /init7epsg:44)8/ en" class name /=<=/ st!le

en" en" en"

c#l#r )8 (5) -+ #utlinec#l#r (+) (-> >>

3.) -ena&bahan .a#er /TI

"%rikut adalah p%nulisan ob*%k layer untuk data =3> (ang b%r*%nis polygon.
la!er name /hti/ status #n t!pe p#l!g#n "ata /shp.=TI;<apua.shp/ pr#6ecti#n /init7epsg:44)8/ en" class name /=TI/ st!le c#l#r )(5 4- 4> #utlinec#l#r )44 (+> 8* en" en" en"

3.* -ena&bahan .a#er /TI -encadan(an

"%rikut adalah p%nulisan ob*%k layer untuk data =3> 7%n)adangan (ang b%r*%nis polygon.
la!er name /hti;c/ status #n t!pe p#l!g#n "ata /shp.=TI;<enca"angan;<apua.shp/ pr#6ecti#n /init7epsg:44)8/ en" class name /=TI <enca"angan/ st!le c#l#r )54 (*4 >* #utlinec#l#r )54 ))4 (4> en" en" en"

3.0 -en(!1ian Map'ile

$ntuk m%ngu*i apakah map6il% (ang kita buat sudah b%nar' buka brows%r dan aks%s langsung k% http://lo)alhost/)gi0bin/maps%r&.%8%?map@papuaAmod%@mapAla(%rs@allAimgsiz%@800BC00.

4 Penamba#an $emampuan WMS pada Mapfile

.!- p%nting untuk int%rop%rabilitas d%ngan data dari s%r&%r lain (ang *uga m%ndukung standar .!-. $ntuk m%nambahkan k%mampuan .!-' maka pada map6il% p%rlu ditambahkan m%tadata .!- pada ob*%k map dan tiap ob*%k layer. 7ada tiap ob*%k layer *uga p%rlu ditambahkan template.

4.1 Metadata 2b1e" map

3ambahkan m%tadata di bawah ini di dalam ob*%k map.
web meta"ata /wms;title/ /?ehutanan <r#vinsi <apua/ /wms;#nlineres#urce/ /http:..l#calh#st.cgi-bin.mapserv.e3e@map7papuaA/ /wms;srs/ /$<SB:44)8/ /wms;enable;re&uest/ /C/ /wms; eature;in #;mime;t!pe/ /te3t.html/ en"

en"

4.2 Metadata 2b1e" layer

3ambahkan m%tadata di bawah ini di dalam ob*%k layer. wms_include_items b%risi nama kolom di databas% (ang bisa ditampilkan saat m%la(ani Du%r(. -%lain itu template dip%rlukan untuk m%ng%mbalikan hasil Du%r( :%tE%atur%>n6o dalam 6ormat =3!1. 7%mbuatan 6il% template !ap-%r&%r akan di*%laskan pada sub0bab s%lan*utn(a. "%rikut adalah m%tadata dan t%mplat% untuk la(%r administrasi.
meta"ata /wms;title/ /A"ministrasi/ /wms;inclu"e;items/ /AMA;?ADD;'=ectar;I,T/ en" template /html.a"m.html/

"%rikut adalah m%tadata dan t%mplat% untuk la(%r =7=.

meta"ata /wms;title/ /=<=/ /wms;inclu"e;items/ /,M;=<='A?TIEITAS'S?;AWAF;=<'STATGS;<$H'FGAS;I,T/ en" template /html.hph.html/

"%rikut adalah m%tadata dan t%mplat% untuk la(%r =3>.

meta"ata /wms;title/ /=TI/ /wms;inclu"e;items/ /,ama;=TI;('A:ti itas'S?;Awal'Status;<er'Fuas;I,T/ en" template /html.hti.html/

"%rikut adalah m%tadata dan t%mplat% untuk la(%r =3> 7%n)adangan.

meta"ata /wms;title/ /=TI <enca"angan/ /wms;inclu"e;items/ /,ama;=TI'Fuas;I,T'S?;<enca"a/ en" template /html.hti;c.html/

4.3 Te&plate /TM. MapServer

"uat dir%ktori baru di /ms4w/apps/papua/map/html untuk m%n(impan 6il%06il% t%mplat% =3!1 !ap-%r&%r. -%tiap 6il% t%mplat% !ap-%r&%r harus m%miliki string F!ap-%r&%r 3%mplat%F pada baris p%rtama. -tring d%ngan tanda kurung siku harus dis%suaikan d%ngan nama kolom pada shap%6il%. Gontoh t%mplat% b%rikut akan m%nghasilkan tab%l =3!1 d%ngan in6ormasi la(%r untuk satu 6itur. 4%"%1 &emplate 'a(er Administrasi "uat 6il% d%ngan nama /ms4w/apps/papua/map/html/adm.html untuk t%mplat% la(%r administrasi d%ngan isi s%bagai b%rikut.
0I-- MapServer Template --> 0table> 0capti#n>A1MI,ISTHASI0.capti#n> 0thea"> 0tr> 0th>?abupaten0.th> 0th>Fuas JhaK0.th> 0.tr> 0.thea"> 0tb#"!> 0tr> 0t">LAMA;?ADD;M0.t"> 0t">L=ectar;I,TM0.t"> 0.tr> 0.tb#"!> 0.table>

4%"%

&emplate 'a(er )P)

"uat 6il% d%ngan nama /ms4w/apps/papua/map/html/hph.html untuk t%mplat% la(%r =7= d%ngan isi s%bagai b%rikut.
0I-- MapServer Template --> 0table> 0capti#n>=<=0.capti#n> 0thea"> 0tr> 0th>,ama0.th> 0th>A:tivitas0.th> 0th>S? Awal0.th> 0th>?epemili:an0.th> 0th>Fuas JhaK0.th> 0.tr> 0.thea"> 0tb#"!> 0tr> 0t">L,M;=<=M0.t"> 0t">LA?TIEITASM0.t"> 0t">LS?;AWAF;=<M0.t"> 0t">LSTATGS;<$HM0.t"> 0t">LFGAS;I,TM0.t"> 0.tr> 0.tb#"!> 0.table>

4%"%" &emplate 'a(er )&I "uat 6il% d%ngan nama /ms4w/apps/papua/map/html/hti.html untuk t%mplat% la(%r =3> d%ngan isi s%bagai b%rikut.
0I-- MapServer Template --> 0table> 0capti#n>=TI0.capti#n> 0thea"> 0tr> 0th>,ama0.th> 0th>A:tivitas0.th> 0th>S? Awal0.th> 0th>?epemili:an0.th> 0th>Fuas JhaK0.th> 0.tr> 0.thea"> 0tb#"!> 0tr> 0t">L,ama;=TI;(M0.t"> 0t">LA:ti itasM0.t"> 0t">LS?;AwalM0.t"> 0t">LStatus;<erM0.t"> 0t">LFuas;I,TM0.t"> 0.tr> 0.tb#"!> 0.table>

4%"%4 &emplate 'a(er )&I Pen*adangan "uat 6il% d%ngan nama /ms4w/apps/papua/map/html/hti_c.html untuk t%mplat% la(%r =3> 7%n)adangan d%ngan isi s%bagai b%rikut.
0I-- MapServer Template --> 0table> 0capti#n>=TI <$,CA1A,BA,0.capti#n> 0thea"> 0tr> 0th>,ama0.th> 0th>S? <enca"angan0.th> 0th>Fuas JhaK0.th> 0.tr> 0.thea"> 0tb#"!> 0tr> 0t">L,ama;=TIM0.t"> 0t">LS?;<enca"aM0.t"> 0t">LFuas;I,TM0.t"> 0.tr> 0.tb#"!> 0.table>

4.4 Map'ile .en("ap

map name /papua/ e3tent (44 -(+ (4) ( imagec#l#r )55 )55 )55 pr#6ecti#n /init7epsg:44)8/ en" web meta"ata /wms;title/ /?ehutanan <r#vinsi <apua/ /wms;#nlineres#urce/ /http:..l#calh#st.cgi-bin.mapserv.e3e@map7papuaA/ /wms;srs/ /$<SB:44)8/ /wms;enable;re&uest/ /C/ /wms; eature;in #;mime;t!pe/ /te3t.html/ en"

en"

la!er name /a"m/ status #n t!pe p#l!g#n "ata /shp.A"m;)+(+;<apua.shp/ pr#6ecti#n /init7epsg:44)8/ en" meta"ata /wms;title/ /A"ministrasi/ /wms;inclu"e;items/ /AMA;?ADD;'=ectar;I,T/ en" template /html.a"m.html/ class name /A"ministrasi/ st!le c#l#r )55 )55 (44 #utlinec#l#r )55 )55 )55 en" en" en" la!er name /hph/ status #n t!pe p#l!g#n "ata /shp.=<=;<apua.shp/ pr#6ecti#n /init7epsg:44)8/ en" meta"ata /wms;title/ /=<=/ /wms;inclu"e;items/ /,M;=<='A?TIEITAS'S?;AWAF;=<'STATGS;<$H'FGAS;I,T/ en" template /html.hph.html/

class name /=<=/ st!le c#l#r )8 (5) -+ #utlinec#l#r (+) (-> >> en" en" en" la!er name /hti/ status #n t!pe p#l!g#n "ata /shp.=TI;<apua.shp/ pr#6ecti#n /init7epsg:44)8/ en" meta"ata /wms;title/ /=TI/ /wms;inclu"e;items/ /,ama;=TI;('A:ti itas'S?;Awal'Status;<er'Fuas;I,T/ en" template /html.hti.html/ class name /=TI/ st!le c#l#r )(5 4- 4> #utlinec#l#r )44 (+> 8* en" en" en" la!er name /hti;c/ status #n t!pe p#l!g#n "ata /shp.=TI;<enca"angan;<apua.shp/ pr#6ecti#n /init7epsg:44)8/ en" meta"ata /wms;title/ /=TI <enca"angan/ /wms;inclu"e;items/ /,ama;=TI'Fuas;I,T'S?;<enca"a/ en" template /html.hti;c.html/ class name /=TI <enca"angan/ st!le c#l#r )54 (*4 >* #utlinec#l#r )54 ))4 (4> en" en" en" en"

4.) -en(!1ian WMS

4%+%1 Get,apabilities ,%Du%st :%tGapabiliti%s akan m%ng%mbalikan dokum%n H!1 (ang b%risi rin)ian k%mampuan s%r&%r dalam m%la(ani p%rmintaan s%rta da6tar la(%r (ang dapat diaks%s. "uka w%b brows%r dan aks%s $,1 di bawah untuk m%ngu*i r%Du%st ini.
http:..l#calh#st.cgi-bin.mapserv.e3e @map7papua AS$HNIC$7WMS AH$OG$ST7BetCapabilities

4%+%

GetMap

,%Du%st :%t!ap akan m%ng%mbalikan gambar p%ta s%suai d%ngan koordinat' ukuran' dan 6ormat (ang diminta. "uka w%b brows%r dan aks%s $,1 di bawah untuk m%ngu*i r%Du%st ini.
http:..l#calh#st.cgi-bin.mapserv.e3e @map7papua AS$HNIC$7WMS AN$HSI2,7(.(.( AH$OG$ST7BetMap AFAP$HS7a"m'hph'hti'hti;c AE2HMAT7image.png ASHS7$<SB:44)8 ADD2Q7(4)'-(+'(4)'+ AWI1T=75() A=$IB=T75()

4%+%" Get-eatureInfo ,%Du%st :%tE%atur%>n6o akan m%ng%mbalikan dokum%n (ang b%risi in6ormasi 6itur pada titik t%rt%ntu pada p%ta. Eormat dokum%n untuk )ontoh di bawah adalah =3!1. "uka w%b brows%r dan aks%s $,1 di bawah untuk m%ngu*i r%Du%st ini.
http:..l#calh#st.cgi-bin.mapserv.e3e @map7papua AS$HNIC$7WMS AN$HSI2,7(.(.( AH$OG$ST7BetEeatureIn # AFAP$HS7a"m'hph'hti'hti;c AOG$HP;FAP$HS7a"m'hph'hti'hti;c AI,E2;E2HMAT7te3t.html ASHS7$<SB:44)8 ADD2Q7(4)'-(+'(4)'+ AWI1T=75() A=$IB=T75() AQ745+ AP74++

A/!>I>-3,A-> Kabupaten Luas (ha) ;A". "2J9I />:291 2K0C82L =7= Nama Aktivitas SK Awal Kepemilikan Luas (ha) 73."ad% !akmur 2rissa Akti6 K+/;pts/0>>/1LL3 -wasta 4C2C00

4%+%4 Get'egendGrap#i* ,%Du%st :%t1%g%nd:raphi) akan m%ng%mbalikan simbol l%g%nda untuk la(%r (ang diminta. ,%Du%st ini han(a dapat m%la(ani p%rmintaan untuk satu la(%r sa*a. "uka w%b brows%r dan aks%s $,1 di bawah untuk m%ngu*i r%Du%st ini.
http:..l#calh#st.cgi-bin.mapserv.e3e @map7papua AS$HNIC$7WMS AN$HSI2,7(.(.( AH$OG$ST7BetFegen"Braphic AE2HMAT7image.png AFAP$H7hph

+ Menampilkan WMS dengan .pen'a(ers

2p%n1a(%rs digunakan untuk m%nampilkan p%ta dinamis dan int%rakti6 dari s%r&%r .!-.

).1 ,eran("a /TM.

"uat 6il% =3!1 d%ngan nama /ms4w/apps/papua/index.php.
0I12CTP<$ html> 0html lang7/i"/> 0hea"> 0meta charset7/ut --/> 0title>WebBIS ?ehutanan <apua0.title> 0lin: rel7/st!lesheet/ hre 7/lib.b##tstrap.min.css/ .> 0lin: rel7/st!lesheet/ hre 7/lib.2penFa!ers.theme."e ault.st!le.css/ .> 0st!le t!pe7/te3t.css/> html' b#"! R bac:gr#un"-c#l#r: 9eeeS T .c#ntainer > ##ter p R te3t-align: centerS T .c#ntainer > .c#ntent R bac:gr#un"-c#l#r: 9 S pa""ing: )+p3S margin: + -)+p3S b#r"er-ra"ius: + + 8p3 8p3S b#3-sha"#w: + (p3 )p3 rgbaJ+'+'+'.(5KS T .page-hea"er R bac:gr#un"-c#l#r: 9 5 5 5S pa""ing: )+p3 )+p3 (+p3S margin: -)+p3 -)+p3 )+p3S T 9map R wi"th: 8-+p3S height: 4)+p3S bac:gr#un"-c#l#r: 9*4>(a"S b#r"er: (p3 s#li" 9"""S b#r"er-ra"ius: 4p3S b#3-sha"#w: + (p3 (p3 rgbaJ+'+'+'.+*5KS T 0.st!le> 0.hea"> 0b#"!> 0"iv class7/c#ntainer/> 0"iv class7/c#ntent/> 0"iv class7/page-hea"er/> 0h(>WebBIS ?ehutanan <apua0.h(> 0."iv> 0"iv class7/r#w/> 0"iv class7/span()/> 0"iv i"7/map/>0."iv> 0."iv> 0"iv class7/span4/> 0h4>Fegen"a0.h4> 0."iv> 0."iv> 0."iv> 0 ##ter> 0p>Ac#p!S )+(( 1inas ?ehutanan "an ?#nservasi <apua0.p> 0. ##ter> 0."iv> 0script 0script 0script 0script 0.b#"!> 0.html> src7/lib.6&uer!-(.*.(.min.6s/>0.script> src7/lib.b##tstrap-twips!.6s/>0.script> src7/lib.b##tstrap-p#p#ver.6s/>0.script> src7/lib.2penFa!ers.2penFa!ers.6s/>0.script>

-%t%lah itu brows% k% http://lo)alhost/papua. Jika b%nar akan mun)ul tampilan w%b s%p%rti di bawah ini. 3ampilan p%ta masih kosong kar%na kod% 2p%n1a(%rs b%lum ditambahkan.

).2 ,ode 2pen.a#ers Dasar

3ambahkan kod% Ja&a-)ript b%rikut ini di bagian paling bawah s%b%lum /body!. ;od% b%rikut akan m%nampilkan p%ta 7apua dalam satu la(%r .!-. -%t%lah itu' brows% k% http://lo)alhost/papua. Eungsi ini akan di*alankan pada saat loading halaman window.onload# t%lah s%l%sai. 7%n*%lasan singkat 6ungsi ini baris0p%r0baris adalah s%bagai b%rikut: m%mbuat ob*%k p%ta "pen#ayers.$ap%di&' # m%mbuat &ariab%l url untuk m%n(impan alamat .!m%mbuat la(%r .!- baru "pen#ayers.#ayer.($)%title* url* params* options' # m%nambahkan la(%r t%rs%but k% p%ta m%nambahkan kontrol garis skala k% p%ta m%nambahkan kontrol p%milih la(%r k% p%ta m%ng%s%t lokasi dan zoom d%6ault p%ta

0script> win"#w.#nl#a" 7 uncti#nJK R var map 7 new 2penFa!ers.MapJ/map/KS var url 7 /http:..l#calh#st.cgi-bin.mapserv.e3e@map7papuaA/S var papua 7 new 2penFa!ers.Fa!er.WMSJ/=utan <apua/' url' R la!ers: /a"m'hph'hti'hti;c/' #rmat: /image.png/' bgc#l#r: /*4>(a"/ TKS map.a""Fa!ersJLpapuaMKS map.a""C#ntr#lJnew 2penFa!ers.C#ntr#l.ScaleFineJKKS map.a""C#ntr#lJnew 2penFa!ers.C#ntr#l.Fa!erSwitcherJKKS map.setCenterJnew 2penFa!ers.F#nFatJ(4-' -4.5K' 8KS TS 0.script>

).3 ,ode 2pen.a#ers !nt!" M!ltiple .a#ers

;od% Ja&a-)ript b%rikut akan m%nampilkan p%ta 7apua (ang dipisahkan m%n*adi dua la(%r. 1a(%r administrasi dis%t s%bagai base layer' s%dangkan la(%r lainn(a dis%t s%bagai overlay. 1a(%r d%ngan param%t%r .!- transparent b%rnilai true otomatis m%n*adi overlay. $bah kod% di atas d%ngan kod% di bawah ini. -%t%lah itu' brows% k% http://lo)alhost/papua. 7%milihan la(%r dapat dilakukan d%ngan kontrol p%milih la(%r di kanan atas p%ta.
0script> win"#w.#nl#a" 7 uncti#nJK R var map 7 new 2penFa!ers.MapJ/map/KS var url 7 /http:..l#calh#st.cgi-bin.mapserv.e3e@map7papuaA/S var a"m 7 new 2penFa!ers.Fa!er.WMSJ/A"ministrasi/' url' R la!ers: /a"m/' #rmat: /image.png/' bgc#l#r: /*4>(a"/ TKS var hph;hti 7 new 2penFa!ers.Fa!er.WMSJ/=<=' =TI/' url' R la!ers: /hph'hti'hti;c/' transparent: /true/ T' R #pacit!: +.- TKS map.a""Fa!ersJLa"m' hph;htiMKS map.a""C#ntr#lJnew 2penFa!ers.C#ntr#l.ScaleFineJKKS map.a""C#ntr#lJnew 2penFa!ers.C#ntr#l.Fa!erSwitcherJKKS map.setCenterJnew 2penFa!ers.F#nFatJ(4-' -4.5K' 8KS TS 0.script>

).4 ,ode 2pen.a#ers !nt!" 3et4eat!reIn'o

3ambahkan kod% Ja&a-)ript b%rikut ini untuk m%nambahkan kontrol :%tE%atur%>n6o' s%hingga *ika p%ta diklik akan m%nampilkan in6ormasi 6itur pada tiap la(%r. 1%takkan kod% b%rikut s%t%lah p%rintah map.add#ayers%'. -%t%lah m%nambahkan kod% ini' brows% k% http://lo)alhost/papua dan klik pada salah satu titik di p%ta untuk m%nampilkan in6o 6itur.
var in # 7 new 2penFa!ers.C#ntr#l.WMSBetEeatureIn #JR la!ers: La"m' hph;htiM' in #E#rmat: /te3t.html/' ma3Eeatures: (' &uer!Nisible: true' eventFisteners: R get eaturein #: uncti#nJeK R map.a""<#pupJ new 2penFa!ers.<#pup.Erame"Cl#u"J /p#pup/' map.getF#nFatEr#m<i3elJe.3!K' null' J uncti#nJte3tK R return Jte3t 77 //K @ /./ : te3tS TK Je.te3tK' null' true KKS TTTKS map.a""C#ntr#lJin #KS in #.activateJKS

).) Mena&bah"an .a#er WMS 2nline

1a(%r .!- dari s%r&%r mana pun dapat ditambahkan k% aplikasi kita. =al ini kar%na standar .!m%n*amin int%rop%rabilitas antar s%r&%r' s%hingga p%ta0p%ta dapat disatukan d%ngan mudah. Gontoh kali ini m%m%rlukan kon%ksi int%rn%t. "%rikut adalah )ontoh p%nambahan .!- onlin% dari !%taGarta. -%t%lah itu brows% k% http://lo)alhost/papua dan ganti la(%r dasar p%ta k% !%taGarta.
var metacarta 7 new 2penFa!ers.Fa!er.WMSJ/MetaCarta/' /http:..vmap+.tiles.#sge#.#rg.wms.vmap+@/' R la!ers: /basic/' #rmat: /image.png/ TKS map.a""Fa!ersJLa"m' metacarta' hph;htiMKS

).* Mena&bah"an .e(enda

1%g%nda p%ta diambil dari r%Du%st :%t1%g%nd:raphi) k% s%r&%r .!-. 1%g%nda p%ta harus ditambahkan satu0p%r0satu untuk tiap la(%r. 3ambahkan kod% 7=7 dan =3!1 b%rikut ini s%t%lah baris h+!#egenda /h+!.
0@php 0h4>Fegen"a0.h4> Uwms;legen" 7 htmlentitiesJ%http:..l#calh#st.cgi-bin.mapserv.e3e% .%@map7papuaAS$HNIC$7WMSAN$HSI2,7(.(.(% .%AH$OG$ST7BetFegen"Braphic% .%AE2HMAT7image.pngAFAP$H7%KS 0img 0img 0img 0img src7/0@php src7/0@php src7/0@php src7/0@php ech# ech# ech# ech# Uwms;legen"S Uwms;legen"S Uwms;legen"S Uwms;legen"S @>a"m/ .>0br .> @>hph/ .>0br .> @>hti/ .>0br .> @>hti;c/ .>

@>

).0 Mena&bah"an -opover pada .e(enda

7opo&%r akan m%nampilkan in6ormasi singkat *ika mous% b%rada t%pat di atas hover# pada salah satu gambar l%g%nda. $bah kod% untuk l%g%nda di atas d%ngan kod% b%rikut ini.
0@php 0h4>Fegen"a0.h4> Uwms;legen" 7 htmlentitiesJ%http:..l#calh#st.cgi-bin.mapserv.e3e% .%@map7papuaAS$HNIC$7WMSAN$HSI2,7(.(.(% .%AH$OG$ST7BetFegen"Braphic% .%AE2HMAT7image.pngAFAP$H7%KS Uin #L%hph%M 7 %=a: untu: mengusaha:an hutan "i "alam suatu :awasan% .% hutan !ang meliputi :egiatan penebangan :a!u'% .% pemu"aan "an pemeliharaan hutan' peng#lahan "an% .% pemasaran hasil hutan menurut :etentuan-:etentuan% .% !ang berla:u.%S Uin #L%hti%M 7 %Sebi"ang luas "aerah !ang senga6a "itanami "engan% .% tanaman in"ustri "engan tipe se6enis "engan tu6uan% .% men6a"i sebuah hutan !ang secara :husus "apat% .% "ie:spl#itasi tanpa membebani hutan alami.%S Uin #L%hti;c%M 7 %=utan !ang a:an "ipersiap:an untu: men6a"i =TI.%S

@>

0img src7/0@php ech# Uwms;legen"S @>a"m/ .>0br .> 0a hre 7/9/ class7/legen"-p#p#ver/ title7/=a: <engusahaan =utan/ "ata-c#ntent7/0@php ech# Uin #L%hph%MS @>/> 0img src7/0@php ech# Uwms;legen"S @>hph/ .>0.a>0br .> 0a hre 7/9/ class7/legen"-p#p#ver/ title7/=utan Tanaman In"ustri/ "ata-c#ntent7/0@php ech# Uin #L%hti%MS @>/> 0img src7/0@php ech# Uwms;legen"S @>hti/ .>0.a>0br .> 0a hre 7/9/ class7/legen"-p#p#ver/ title7/=TI <enca"angan/ "ata-c#ntent7/0@php ech# Uin #L%hti;c%MS @>/> 0img src7/0@php ech# Uwms;legen"S @>hti;c/ .>0.a>

;%mudian' tambahkan kod% Ja&a-)ript b%rikut ini pada bagian paling bawah' s%b%lum tag /body!.
0script> UJ uncti#n JK R UJ/.legen"-p#p#ver/K .p#p#verJR placement: /bel#w/ TK .clic:J uncti#nJeK R e.prevent1e aultJK TK TK 0.script>