Modul Pembuatan dan Updating WebGIS

1. Pengenalan Mapserver

MapServer merupakan salah satu aplikasi pemetaan online (web GIS) yang dikembangkan oleh Universitas Minnesota, NASA, dan Departemen Sumber Daya Alam Minnesota (Minnesota Departemen of Natural Resources). MapServer dapat dijalankan pada beberapa sistem operasi yaitu Unix/Linux, MacOS dan Windows. Web-GIS merupakan Sistem Informasi Geografi berbasis web yang terdiri dari beberapa komponen yang saling terkait. Web-GIS merupakan gabungan antara design grafis pemetaan, peta digital dengan analisa geografis, pemrograman komputer, dan sebuah database yang saling terhubung menjadi satu bagian web design dan web pemetaan. Fitur yang didukung oleh MapServer adalah:  Format vektor: ESRI shapefile, ESRI ArcSDE, mapinfo tab  Format raster: TIFF/GeoTIFF, GIF, PNG, ERDAS, JPEG, EPPL7  Quadtree spatial indexing untuk shapefile  Dapat sepenuhnya dikustomisasi untuk menghasilkan hasil yang diinginkan  Pemilihan fitur menggunakan item/nilai, titik, area atau fitur lainnya  Mendukung TrueType font  Mendukung OpenGIS  Mendukung penggabungan data raster dan vektor (untuk penyajian data)  Legenda dan skala yang otomatis  Mendukung pengembangan peta tematik online  Pelabelan fitur  Konfigurasi dapat dilakukan secara online (on-the fly configuration)  Proyeksi dapat dilakukan secara online (on-the-fly projection) Sumber: Tutorial Mapserver, Mapserver-pmapper 2008 2. Instalasi Mapserver  Tutorial ini menggunakan MapServer for Windows  Extract ms4w.zip atau MS4W.rar ke directori C:/  Double klik file apache-install.bat di direktori c:/ms4w/

Ketik http://localhost pada browser (eg. Firefox). Jika MapServer sudah berhasil di install akan muncul tampilan berikut pada browser.

 

Membuat folder untuk membangun suatu aplikasi pada MapServer di direktori c:/ms4w/apps/. Beri nama tutorial pada folder tersebut. Buat file index.html dalam folder yang baru dibuat. Ketik seperti di bawah ini.

Untuk registrasi folder tersebut, buat file baru bernama httpd_tutorial.conf di direktori c:/ms4w/httpd.d/. Edit file tersebut dengan aplikasi text editor (eg. notepad), ketik konfigurasi seperti contoh dibawah ini.

Jika berhasil akan tampil seperti dibawah ini.map. Jenis file yang umum digunakan adalah shapefile dari ESRI (*. Anatomi Aplikasi MapServer   Map File : File berisi konfigurasi untuk membangun mapserver yang berekstensi *. file .bat di direktori c:/ms4w/ Ketik http://localhost/tutorial/ pada browser. MapServer CGI: File binari atau yang dapat dieksekusi berfungsi untuk mengirim.dan lain-lain. Geographic Data: Data spasial yang digunakan dapat berupa vektor. MapServer akan selalu membutuhkan minimal sebuah mapfile. web server yang umum digunakan adalah Apache dan IIS.    Arsitektur dasar aplikasi MapServer 4. Mapfile merupakan file teks biasa . 3. HTML Pages : Halaman web yang dibangun menggunakan HTML (HyperText Markup Language) untuk tampilan antar muka pengguna.shp). meminta. raster. MapFile Untuk memanfaatkan fungsionalitasnya yang paling sederhana sekalipun. dan menerima gambar.  Double klik file apache-restart. HTTP Server: Web server untuk mengirim dokumen web ke internet. Berbagai macam jenis file lain dapat juga dipergunakan.

Sebelum benar-benar menggunakan MapServer untuk pertama kalinya. File yang disebut mapfile tersebut memiliki ketentuan-ketentuan penulisan sebagai berikut:      Teks pada mapfile tidak bersifat case-sensitive.map yang akan mendeskripsikan apa dan dimana sumber datanya. Oleh karena itu. penting bagi kita untuk memahami struktur mapfile ini terlebih dahulu sebelum memasuki bahasan selanjutnya. Susunan atau isi mapfile memiliki hierarki struktur dengan objek “MAP” sebagai “root”. Sementara objek-objek lainnya berada di bawah objek ini. Penulisan path lokasi file bisa dilakukan secara absolut maupun relatif.map. Penulisan string yang berisi campuran beberapa karakter non-alphanumerik (selain karakter huruf dan angka) atau keywords milik MapServer harus diapit oleh tanda petik ganda ( “ ). pengguna harus membuat file teks yang berekstensi *. dan bagaimana cara data tersebut harus ditampilkan. . Pengguna dapat menambahkan baris-baris komentar di dalam mapfile dengan cara mengawali komentar tersebut dengan karakter pagar (#).yang berekstensi *.

Jangkauan batas koordinat peta adalah (817736. PNG EXTENT 817736. berikut ini adalah isi mapfile sederhana yang dapat digunakan untuk menampilkan sebuah layer peta di dalam program aplikasi browser internet./common/symbols/symbols-pmapper.1. 9224249..087952.sym" #konfigurasi simbol UNITS meters SIZE 600 500 # ukuran image yang dihasilkan IMAGECOLOR 108 166 205 # # Mulai pendefinisian layer # LAYER # tanda awal definisi layer NAME “ciamis_u” # nama layer CONNECTIONTYPE postgis CONNECTION "user=postgres password=1234 dbname=ciamis host=localhost port=5432" DATA "the_geom FROM administrasi. 9132478. # # Komentar untuk mapfile # MAP # tanda awal mapfile NAME Ciamis # nama mapfile IMAGETYPE JPEG # bisa juga GIF.264415 950803.169445 SYMBOLSET ". Nilai-nilai tersebut diambil dari (extent) cakupan peta aslinya.4.264415).169445).087952 9132478.900246. Semua layer dimunculkan (STATUS ON).900246 9224249. .ciamis_u using unique gid using SRID=32748" STATUS ON # layer dimunculkan TYPE POLYGON # untuk tipe poligon CLASS NAME “ciamis” STYLE COLOR 255 255 255 # warna latar putih OUTLINECOLOR 108 166 205 # warna batas luar poligon END # akhir style END #akhir class END #akhir definisi layer Keterangan mapfile urutan baris): END # akhir (sesuai     MapFile tersebut memiliki objek MAP yang bernama “Ciamis” File sementara yang dihasilkan oleh MapServer nantinya berupa file JPEG (bisa juga berupa GIF maupun PNG).Contoh Pembuatan MapFile Sederhana Sebagai contoh pertama kita. (950803.

# # BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN # MAP .2.Objek-objek di dalam MapFile Pada contoh sederhana di bagian sebelumnya. kita lihat bahwa secara garis besar mapfile terdiri dari 5 bagian: Map. Digunakan untuk menentukan scalebar dan komputasi lainnya yang terkait dengan koordinat & skala. Di dalam layer “ciamis_u” terdapat unsur-unsur spasial yang bertipe poligon dengan nama “ciamis” juga. Class.2.. Map Objek ini mendefinisikan objek master milik mapfile. Layer Objek ini paling sering digunakan untuk mendefinisikan layer-layer yang kemudian membentuk peta.. Untuk memudahkan dalam memilih warna. 4. Kelas “ciamis” akan disajikan dengan warna latar putih (RGB: 255 255 255) dengan garis tepi warna biru muda yang sama dengan warna latar peta. terdapat layer yang bernama “Asean”.2. Pada peta “Indonesia” tersebut.        Satuan koordinat peta dalam meters. Nama shapefile yang digunakan untuk layer “Asean” tersebut adalah “Aseanoceania. Layer tersebut statusnya dimunculkan (STATUS ON)..shp”. Artinya. layer yang paling dulu dituliskan akan ditempatkan di bagian paling bawah dari peta. 4. Label.1. . Ukuran (resolusi) gambar yang dihasilkan adalah 600×400 pixel.2. Anda bisa menggunakan tool ColorPic yang dapat di download di internet. dan Style. . END # AKHIR MAP 4.. Layer. Kita akan bahas 5 bagian tersebut satu-per-satu. yang isinya adalah parameterparameter global untuk peta yang akan ditampilkan. Urutan penempatan layer di peta adalah sesuai dengan urutan penulisannya. Warna latar pada peta adalah warna biru muda (RGB: 108 166 205).

END # AKHIR DEFINISI OBJEK LAYER . END # AKHIR MAP 4.. # # BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN # MAP . . setiap layer pasti memiliki paling tidak satu kelas..... END # AKHIR MAP 4. Mengenai ekspresi akan dibahas di bagian selanjutnya.. Ketika layer memiliki lebih dari satu kelas. maka kelas-kelas tersebut dibedakan oleh nilai-nilai yang terkait beserta ekspresi yang digunakan untuk mengevaluasinya.. Class Objek ini digunakan untuk mendefinisikan kelas tematik untuk suatu layer. END # AKHIR DEFINISI OBJEK LAYER .2... Label Objek ini digunakan untuk mendefinisikan anotasi suatu unsur dalam peta. CLASS .3. END # AKHIR DEFINISI CLASS .# # BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN # MAP . Selain itu. LAYER . label juga dapat dijadikan sebagai simbol..... Jadi bisa dikatakan.2.... LAYER .4.

CLASS .. setiap kelas dapat memiliki simbol dengan tipe.. END # AKHIR DEFINISI CLASS . CLASS .. LAYER . END # AKHIR DEFINISI CLASS . END # AKHIR MAP 4.. dan warna tersendiri..2... Style Objek ini digunakan untuk menentukan parameter-parameter simbol yang dipakai.... END # AKHIR DEFINISI LABEL .. LABEL . Dengan adanya objek ini. END # AKHIR DEFINISI OBJEK LAYER .5..... END # AKHIR DEFINISI LABEL .. # # BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN # MAP . END # AKHIR DEFINISI STYLE LABEL .. END # AKHIR DEFINISI OBJEK LAYER ...# # BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN # MAP . END # AKHIR MAP 4..... STYLE ...3.Menampilkan MapFile ..... ukuran. LAYER ..

Untuk menampilkan peta pertama kita.exe?map=c:\ms4w\apps\map-ciamis\webciamis\config\latihan\latihan.map&mode=map&layers=all . silahkan buka melalui browser dengan perintah: http://localhost/cgi-bin/mapserv.

bat.Konfigurasi HTTPD Apache menyediakan fungsi untuk memanggil halaman web selain di “htdocs”.org. sehingga pada bagian aplikasi terdapat tulisan pmapper yang telah terinstal Gambar 5 pmapper 5. dan pastikan di folder app c:\ms4w\apps\ terdapat folder “map-ciamis”.5. Untuk instalasi pmapper silahkan untu meng-ekstraknya di tempat MS4W berada contoh c:\ms4w\. Pilihlah paket pmapper untuk MS4W.maptools. silahkan untuk di download di www. Dan masuk kembali ke halaman http://localhost/. Setelah itu restart apache yang berada dalam folder c:\ms4w\apache-restart. untuk tutorial ini digunakan ms4w. Gambar Isi dari httpd_pmapper .zip. Dalam tutorial ini httpd telah tersedia setelah kita meng-extrak pmmaper. Untuk melihat isinya silahkan untuk melihatnya memakai “notepad” atau aplikasi sejenisnya.1. Instalasi pmapper Untuk mendapatkan instalasi mapserver.

didalamnya terdapat file “config. 5.2.3.3. bisa pake notepad ataupun program khusus. “php_config.php”. “js_config. dan mapfile.Konfigurasi pmapper Gambar 7 struktur file pmapper Untuk melakukan konfigurasi pmapper. Pada subdirektori “default” terdapat file “custom. Doc Didalamnya terdapat documentasi mengenai pmapper. Untuk tutorial ini digunakan notepad++. Config Direktori untuk konfigurasi file. 5. dibutuhkan suatu applikasi yang dapat mengedit scripts pmapper. “search.5.php”. .js”.xml”. Disinilah nanti subdirektori untuk pembuatan peta baru.3.ini: dan subdirektori “default”.1.Direktori dan File struktur 5.2.

php : fungsi untuk melakukan print (cetak gambar) /print/pdfprint. pmdraw.js: pengaturan untuk hasil pencarian. Pada subdirektori “legend” terdapat icon untuk legenda.3.js: kostumisasi aplikasi seperti hyperlink forms. left/top) khusus tampilan mapserver.php : fungsi utiliti /print/print.js: fungsi untuk pencarian sorttable.php : menentukan variabel untuk javascript /init/init.3. pmapper.js: inisialisasi fungsi pmjson.php : fungsi untuk pdf /xajax/… : fungsi scripts ajax               5.php : berfungsi untuk menentukan variabel-variabel yang biasa digunakan Custom.4.php : untuk kostumisasi setting pada toolbar Js_init.php : inisialisasi untuk GROUP dan GLAYER objek Map.js: library untuk mengukur jarak layout.5. GUI.js: fungsi untuk query search.js: fungsi untuk query pmquery.js: menggambarkan garis pada saat pengukuran di peta .js: definisi untuk legenda dtree.js: fungsi umum aplikasi custom.js: layout parameter seperti (width/height. 5. Incphp Pada direktori ini terdapat file php dengan berbagai macam fungsi diantaranya Common.3.php : berfungsi untuk merender map /query/… : fungsi untuk query (identify. resize.php : berfungsi untuk membuat legenda Group. search) Legend. A-Z atau Z-A toc.php : class untuk fungsi GROUP dan GLAYER objek Util. query dan lainnya. Javascript fungsi Javascript:                 common. Images Didalamnya terdapat file-file image yang digunakan untuk tampilan di web.js: fungsi.js: struktur untuk menampilkan layer di legenda wz_jsgraphics.js: fungsi untuk form dan memilih skala geometry.5.3.js: fungsu untuk mengukur jarak di peta pminit.php : fungsi khusus untuk membuat file pdf /print/tcpdf.php : inisialisasi aplikasi Initgroups. select.php & initmap.js: fungsi utama untuk membuat peta dari file-file spasial.

Membuat config untuk latihan Langkah-langkah untuk menampilkan peta 1) Copy folder latihan kedalam direktori C:\ms4w\apps\map-ciamis\webciamis\config\ 2) Masuk kedalam direktori latihan tersebut 3) Pada direktori tersebut berisi file latihan.   xmlhttp.2. Dalam folder “data” di usahakan dibuat sestruktur mungkin. MODUL-MODUL 1..js: fungsi untuk tools zoom geser zoombox.Penyimpanan data Untuk mempermudah dalam pembuatan web-sig.4. seperti mana file vektor dan mana file raster dan file-file lainnya yang akan mendukung dalam pembuatan web-sig.php. seperti tidak munculnya peta. hal ini dilakukan agar pada saat pemindahan aplikasi tidak perlu lagi melakukan konfigurasi lagi.js: DHTML zoom/pan 5.map. custom. Untuk totorial kali ini data akan disimpan sebagai subirektori dari pmapper C:\ms4w\apps\pmapper\pmapper-3.. Untuk tutorial ini folder “data” diletakan sebagai subdirektori dari pmapper.js dan js_config. alangkah baiknya dalam penyimpanan data dibuat struktur sejelas mungkin (masalah letak).js: XMLHttp/AJAX fungsi zslider. Hal ini untuk meminimalisir kesalahan yang terjadi. .0\data\.

map 5) Membuat file config_latihan.xml .4) Berikut ini sebagian dari isi file latihan.xml di direktori C:\ms4w\apps\map-ciamis\webciamis\config\ 6) Berikut ini isi sebagian dari file config_latihan.

png. terlebih dahulu harus kita buat file image (bisa *. .7) Mengecek pada browser internet apakah konfigurasi yang dilakukan telah benar dengan mengetik alamat berikut ini http://localhost/map-ciamis/map. *. Menampilkan peta inset Untuk menampilkan peta inset. Kemudian klik fileexport as image.phtml?config=latihan 2.bmp). atau *. buka kembali aplikasi Qgis. cara membuatnya.jpg.

Kemudian save image tersebut sebagai file *.map dan ubah bagian REFERENCE Setelah itu refresh… .png dan simpan file tersebut di folder C:\ms4w\apps\map-ciamis\web-ciamis\images\reference_latihan.png Seletah itu buka pmapper_latihan.

Interaktif Peta (zoom in.3. dan pan) Fungsi secara otomatis berfungsi apabila di peta telah muncul gambar peta yang di harapkan. zoom out. Legenda Apabila konfigurasi config_latihan benar.ini . Apabila tidak silahkan untuk melalukan pengecekan ulang pada file latihan. maka secara otomasti legenda pun akan muncul. 4.map dan config_latihan.

5.xml yang berada di direktori latihan. Identifikasi Fungsi identifikasi akan menampilkan informasi mengenai atribut apabila pada file latihan. C:\ms4w\apps\map-ciamis\webciamis\config\config_latihan.map menjadi 6. Untuk itu rubah parameter layer di latihan.xml Rubah konfigurasi .map telah didefisinikan terlebih dahulu. Pencarian Pencarian akan berfungsi apabila kita terlebih dahulu melakukan konfigurasi pada config_latihan.

7. misalnya kita akan membuat layer tematik rasio guru dan sekolah (MI) . kita harus membuat layer baru. Peta Tematik Untuk menggambarkan peta secara tematik.

3" COLOR 175 254 175 OUTLINECOLOR 10 10 10 EXPRESSION ([ras_gr_skl] > 1.4. sekolah.5 and [ras_gr_skl] <=3) END # CLASS CLASS NAME "3 . GURU" # Uncomment if Folder Data "RESULT_FIELDS" "kecamatan. guru" # Uncomment if PostGIS "RESULT_HEADERS" "Kecamatan. MURID.1.5) END # CLASS CLASS .5) END # CLASS CLASS NAME "1. Guru" END CLASS NAME "0 .mi_negeri_swasta_u using unique gid using SRID=32748" ################################# METADATA "DESCRIPTION" "Rasio Guru : Sekolah (MI)" #"RESULT_FIELDS" "KECAMATAN.5 . Murid.5" COLOR 230 254 230 OUTLINECOLOR 10 10 10 EXPRESSION ([ras_gr_skl] >= 0 and [ras_gr_skl] <= 1. Sekolah. murid. SEKOLAH.########################################################################## ###################### Rasio Guru : Sekolah (MI) ########################### ########################################################################## LAYER NAME "rasio_SekolahGuruMI" TYPE polygon TRANSPARENCY 95 TEMPLATE void PROJECTION #"init=epsg:4326" "+proj=utm +zone=48 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs no_defs" END ##### Connection to POSTGIS ##### CONNECTIONTYPE postgis CONNECTION "user=postgres password=1234 dbname=ciamis host=localhost port=5432" DATA "the_geom FROM pendidikan.5" COLOR 0 255 0 OUTLINECOLOR 10 10 10 EXPRESSION ([ras_gr_skl] > 3 and [ras_gr_skl] <= 4.