Map Server + PHP/MapScript
Catur Iswahyudi
Pendahuluan
• MapServer merupakan aplikasi freeware dan open source yang
memungkinkan kita menampilkan data spasial (peta) di web.
• Aplikasi ini pertama kali dikembangkan di Universitas Minesotta,
Amerika Serikat untuk proyek ForNet (sebuah proyek untuk
menajemen sumber daya alam) yang disponsori NASA (Nasional
Aeronautics and Space Administration).
• Dukungan NASA dilanjutkan dengan dikembangkan proyek
TerraSIP untuk menajemen data lahan. Saat ini, karena sifatnya
yang terbuka (open source), pengembangan MapServer dilakukan
oleh pengembang dari berbagai negara
• Sebagai web mapping service, mapserver dapat
melakukan berbagai kegiatan:
– Membuat CGI yang berfungsi sebagai jembatan
antara mapserver – web server.
– Mencari basis data informasi dengan perantara peta.
– Membuat laporan berdasarkan data tabular (attribut)
GIS.
• Pengembangan MapServer menggunakan
berbagai aplikasi open source atau freeware
seperti Shapelib untuk baca/tulis format data
Shapefile, FreeType untuk merender karakter,
GDAL/OGR untuk baca/tulis berbagai format data
vektor maupun raster, dan Proj.4 untuk
menangani beragam proyeksi peta.
• Pada bentuk paling dasar, MapServer berupa
sebuah program CGI (Common Gateway
Interface).
• Program tersebut akan dieksekusi di web server
dan berdasarkan beberapa parameter tertentu
(terutama konfigurasi dalam bentuk file *.MAP)
akan menghasilkan data yang kemudian akan
dikirim ke web browser, baik dalam bentuk
gambar peta atau bentuk lain.
• Dari kegiatan-kegiatan tersebut aplikasi mapserver
terbagi menjadi dua:
– Map file
– Map script / Map server CGI
• Map file berguna untuk mengubah database spasial
menjadi bentuk peta.
• Map script berguna untuk membuat tools aplikasi
webGIS seperti panning, zooming, identify, dan lainnya.
• Sebagai server, mapserver memiliki beberapa
komponen pembentuk untuk menunjang
pembentukan sistem informasi geografis.
– Komponen Penggambaran Peta
– Komponen Proyeksi Peta, dan
– Komponen Akses Data Spasial
• Ketiga komponen tersebut memiliki library masingmasing.
• Untuk penggambaran peta, server akan menampilkan
kepada user peta dalam format vektor maupun raster.
Libpng; library untuk penampilan peta dalam bentuk
.png. Libjpeg; library untuk penampilan dalam bentuk
.jpeg, dan GD; library untuk penampilan peta raster dan
vektor.
• Proyeksi peta memiliki satu library yang populer yaitu
Proj.4. yang memberikan informasi sistem referensi
koordinat dan datum yang digunakan dalam data
spasial.
• Sedangkan komponen akses data spasial, terdapat
Shapelib; library untuk mengakses data spasial dalam
bentuk .shapefile (bentukan format file vector produksi
ESRI), dan GDAL/OGR; library untuk mengakses data
spasial berbagai format yang disetujui oleh OGC (Open
Geospatial Consortium).
• Saat ini, selain dapat mengakses MapServer
sebagai program CGI, kita dapat mengakses
MapServer sebagai modul MapScript, melalui
berbagai bahasa skrip : PHP, Perl, Phyton atau
Java.
• Akses fungsi-fungsi MapServer melalui skrip akan
lebih memudahkan pengembangan aplikasi.
Pengembang dapat memilih bahasa yang paling
familiar.
Fitur MapServer
• Menampilkan data spasial dalam format vektor seperti :
Shapefile (ESRI), ArcSDE (ESRI), PostGIS dan berbagai
format data vektor lain dengan menggunakan library
OGR
• Menampilkan data spasial dalam format raster seperti
TIFF/GeoTIFF, EPPL7 dan berbagai format data raster
lain dengan menggunakan library GDAL
• Menggunakan quadtree dalam indexing data spasial,
sehingga operasi-operasi spasial dapat dilakukan dengan
cepat.
Fitur MapServer (2)
• Dapat dikembangkan (customizable), dengan tampilan
keluaran yang dapat diatur menggunakan file-file
template
• Dapat melakukan seleksi objek berdasar nilai, berdasar
titik, area, atau berdasar sebuah objek spasial tertentu
• Mendukung rendering karakter berupa font TrueType
• Mendukung penggunaan data raster maupun vektor
yang di-tiled (dibagi-bagi menjadi sub bagian yang lebih
kecil sehingga proses untuk mengambil dan
menampilkan gambar dapat dipercepat)
Fitur MapServer (3)
• Dapat menggambarkan elemen peta secara otomatis ,
skala grafis, peta indeks dan legenda peta
• Dapat menggambarkan peta tematik yang dibangun
menggunakan ekspresi logik maupun ekspresi reguler
• Dapat menampilkan label dari objek spasial, dengan
label dapat diatur sedemikian rupa sehingga tidak saling
tumpang tindih
• Konfigurasi dapat diatur secara on the fly melalui
parameter yang ditentukan pada URL
• Dapat menangani beragam system proyeksi secara on
the fly
Arsitektur Umum Aplikasi Web GIS
Client Side
Server Side
Database
Server
Web Browser
Web Server
Application
Server
Map Server
• Interaksi antara client-server (request-respon).
• Web server menerima request client, akan tetapi web server
tidak memiliki kemampuan pemrosesan peta, maka diteruskan
ke application server dan map server.
• Hasil dikembalikan ke web server berupa paket file HTML atau
applet.
14
Arsitektur MapServer
Aplikasi mapserver sederhana
terdiri dari:
• Map File - Konfigurasi file teks yang terstruktur untuk
sebuah aplikasi mapserver.
• Mendefiniskan bentuk area peta, memberitahukan
dimana data peta dan konfigurasi dan juga output
gambar peta, dan temporary folder peta.
• Mendefinisikan informasi layer termasuk layer peta dan
data atributnya, termasuk juga sumber data (data
source), proyeksi dan penyimbolan (symbology).
• Ekstensi filenya harus berupa .map atau kalo tidak
mapserver tidak akan bisa mengenalinya.
• Geographic Data - MapServer dapat menangani
berbagai macam tipe data geografis.
• The default format is the ESRI shapefile.
• Ref:
http://www.mapserver.org/introduction.html#ad
ding-data-to-your-site
• HTML Pages - the interface between the user and MapServer .
They normally sit in Web root. In it’s simplest form, MapServer
can be called to place a static map image on a html page. To make
the map interactive, the image is placed in an html form on a
page.
• CGI programs are ‘stateless’, every request they get is new and
they don’t remember anything about the last time that they were
hit by your application. For this reason, every time your
application sends a request to MapServer, it needs to pass
context information (what layers are on, where you are on the
map, application mode, etc.) in hidden form variables or URL
variables.
• MapServer CGI - The binary or executable file
that receives requests and returns images, data,
etc. It sits in the cgi-bin or scripts directory of the
http server. The Web server user must have
execute rights for the directory that it sits in, and
for security reasons, it should not be in the web
root. By default, this program is called mapserv
• HTTP Server - serves up the html pages when hit
by the user’s browser. You need a working HTTP
(Web) server, such as Apache or Microsoft
Internet Information Server, on the machine on
which you are installing MapServer.
Arsitektur Web Mapping
• Pendekatan Thin Client
Pendekatan ini menfokuskan diri 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
sembarang web browser.
• Kelemahan utama pendekatan ini menyangkut
keterbatasan opsi interaksi dengan user yang kurang
fleksibel.
• Pendekatan Thick Client
Pada pendekatan ini, pemrosesan data dilakuakn di sisi
klien menggunakan beberapa teknologi seperti kontrol
ActiveX atau applet.
• Kontrol ActiveX atau applet akan dijalankan di klien
untuk memungkinkan web browser dengan format data
yang tidak dapat ditangani oleh web browser dengan
kemampuan standard.
• Dengan adanya pemrosesan di klien, maka transfer data
antara klien dengan web server akan berkurang
• MapServer menggunakan pendekatan thin client.
Semua pemrosesan dilakukan di sisi sever.
Informasi peta dikirinkan ke web browser di sisi
klien dalam bentuk file gambar (JPG, PNG, GIF
atau TIFF).
Komponen Pembentuk MapServer
• Kebutuhan MapServer: Webserver (Apache, IIS) dan
komponen MapServer.
• Komponen MapServer dibagi menjadi 4 kategori:
1.
2.
3.
4.
Komponen utk akses data spasial
Komponen utk penggambaran peta
Komponen utk menangani proyeksi peta on the fly
Komponen pendukung
Komponen Pembentuk MapServer (2)
1. Komponen untuk Akses Data Spasial
• Digunakan utk baca/tulis data spasial
(file/DBMS).
• Meliputi:
– Shapelib: library ditulis bahasa C, utk keperluan
baca/tulis format data Spahefile (*.SHP) by ESRI.
Format Shapefile digunakan utk menyimpan data
vektor sederhana (tanpa topologi) + atribut. Pada
MapServer shapefile adalah default data type.
25
Komponen Pembentuk MapServer (2)
– GDAL/OGR (Geofraphic Data Abstraction
Library):
•
•
GDAL: library sbg penterjemah berbagai format data
raster. (misal utk akses data: Arc/Info, ESRI, .gif,
TIFF/GeoTIFF, GRASS raster, dll.
OGR: library utk membaca beragam format data
vektor. Kode OGR digabung dgn library GDAL utk
membaca format data vektor: Arc/Info, .csv, ESRI,
Mapinfo file, MySQL, ODBC, Oracle Spatial,
PostgreSQL, SQLite, dll.
26
Komponen Pembentuk MapServer (2)
2. Komponen untuk Penggambaran Peta
• Digunakan utk membentuk gambar peta oleh
MapServer
• Meliputi:
– libpng: library utk baca/tulis gambar format PNG.
– Libjpeg: library utk baca/tulis format gambar JPG/JPEG.
– GD: library utk menggambar obyek geografis (garis,
poligon, atau bentuk geometris lain). Juga utk
menghasilkan format gambar PNG, JPEG.
– FreeType: library utk menampilkan tulisan font TrueType.
27
Komponen Pembentuk MapServer (2)
3. Komponen untuk Menangani Proyeksi Peta
• Library Proj.4 yg digunakan utk menangani sistem
proyeksi peta.
4. Komponen Pendukung
• Meliputi:
– Zlib: dibutuhkan library GD utk kepentingan kompresi
data gambar.
– Regex: library utk menangani regular expression.
28
Map File
• Untuk memanfaatkan fungsionalitasnya yang
paling sederhana sekalipun, MapServer akan
selalu membutuhkan minimal sebuah mapfile.
• Mapfile merupakan file teks biasa yang
berekstensi *.map yang akan mendeskripsikan
apa dan dimana sumber datanya, dan bagaimana
cara data tersebut harus ditampilkan.
• Oleh karena itu, penting bagi kita untuk
memahami struktur mapfile
Tentang Map File
• Sebelum benar-benar menggunakan MapServer untuk pertama kalinya,
pengguna harus membuat file teks yang berekstensi *.map. File yang disebut
mapfile tersebut memiliki ketentuan-ketentuan penulisan sebagai berikut:
– Teks pada mapfile tidak bersifat case-sensitive.
– Penulisan string yang berisi campuran beberapa karakter nonalphanumerik (selain karakter huruf dan angka) atau keywords milik
MapServer harus diapit oleh tanda petik ganda ( “ ).
– Setiap mapfile dapat digunakan untuk mendefinisikan (secara default)
maksimal 50 layer peta.
– Penulisan path lokasi file bisa dilakukan secara absolut maupun relatif.
– Susunan atau isi mapfile memiliki hierarki struktur dengan objek “MAP”
sebagai “root”. Sementara objek-objek lainnya berada di bawah objek ini.
– Pengguna dapat menambahkan baris-baris komentar di dalam mapfile
dengan cara mengawali komentar tersebut dengan karakter pagar (#).
Contoh MapFile
• Sebagai contoh, berikut ini adalah isi mapfile
sederhana yang dapat digunakan untuk
menampilkan sebuah layer peta di dalam
program aplikasi browser internet.
Penjelasan
• MapFile tersebut memiliki objek MAP yang bernama “Indonesia”
File sementara yang dihasilkan oleh MapServer nantinya berupa
file JPEG (bisa juga berupa GIF maupun PNG).
• Jangkauan batas koordinat peta adalah (73.33,-10.28);
(160.20,5.80). Nilai-nilai tersebut diambil dari (sebagian) cakupan
peta aslinya.
• Semua layer dimunculkan (STATUS ON).
• Satuan koordinat peta dalam derajat (DD). Digunakan untuk
menentukan scalebar dan komputasi lainnya yang terkait dengan
koordinat & skala.
• Ukuran (resolusi) gambar yang dihasilkan adalah 600×400 pixel.
• Data spasial yang digunakan berlokasi di “../data/asean”
(relatif terhadap folder dimana mapfile berada).
• Warna latar pada peta adalah warna biru muda (RGB:
108 166 205). Untuk memudahkan dalam memilih
warna, Anda bisa menggunakan tool ColorPic yang
dapat di download di internet.
• Pada peta “Indonesia” tersebut, terdapat layer yang
bernama “Asean”. Nama shapefile yang digunakan
untuk layer “Asean” tersebut adalah “Aseanoceania.shp”.
• Layer tersebut statusnya dimunculkan (STATUS ON).
• Di dalam layer “Asean” terdapat unsur-unsur
spasial yang bertipe poligon dengan nama
“Asean” juga.
• Kelas “Asean” akan disajikan dengan warna latar
putih (RGB: 255 255 255) dengan garis tepi
warna biru muda yang sama dengan warna latar
peta.
Objek dalam MapFile
• Pada contoh sederhana di bagian sebelumnya,
kita lihat bahwa secara garis besar mapfile terdiri
dari 5 bagian: Map, Layer, Class, Label, dan Style.
Kita akan bahas 5 bagian tersebut satu-per-satu.
Map
• Objek ini mendefinisikan objek master milik
mapfile, yang isinya adalah parameter-parameter
global untuk peta yang akan ditampilkan.
Layer
• Objek ini paling sering digunakan untuk
mendefinisikan layer-layer yang kemudian
membentuk peta.
• Urutan penempatan layer di peta adalah sesuai
dengan urutan penulisannya.
• Artinya, layer yang paling dulu dituliskan akan
ditempatkan di bagian paling bawah dari peta.
Class
• Objek ini digunakan untuk mendefinisikan kelas
tematik untuk suatu layer. Setiap layer pasti
memiliki sedikitnya satu kelas.
• Ketika layer memiliki lebih dari satu kelas, maka
kelas-kelas tersebut dibedakan oleh nilai-nilai
yang terkait beserta ekspresi yang digunakan
untuk mengevaluasinya.
Label
• Objek ini digunakan untuk mendefinisikan anotasi suatu unsur
dalam peta. Selain itu, label juga dapat dijadikan sebagai simbol.
Style
• Objek ini digunakan untuk menentukan
parameter-parameter simbol yang dipakai.
Dengan adanya objek ini, setiap kelas dapat
memiliki simbol dengan tipe, ukuran, dan warna
tersendiri.
Menampilkan Peta
• buat suatu file html yang isinya adalah sebagai berikut
• Simpanlah dengan nama file peta.html di direktori
C:\ms4w\apps\latih\htdocs\
• Selanjutnya, buatlah file html baru yang isinya
adalah sebagai berikut:
• Simpanlah dengan nama file contoh_01.html
dan simpan di C:\ms4w\apps\latih\htdocs\
• Pada browser bukalah alamat
http://localhost:1111/latih/peta.html sehingga akan muncul
tampilan seperti berikut ini.
• Ketika link yang ada pada halaman tsb di klik, akan muncul
tampilan peta seperti pada gambar berikut
• Oke… selamat… sampai tahap ini Anda sudah
berhasil menampilkan peta di browser…
• itu sudah disebut dengan “WebGIS” meskipun
masih amat-sangat-sederhana-sekali
Layer Ganda
• Pada kenyataannya, jarang sekali suatu peta
hanya terdiri dari satu layer saja.
• Karena informasi geografis yang sesungguhnya
adalah gabungan dari beberapa layer sehingga
membentuk suatu informasi peta yang lengkap.
• Bagaimana caranya menampilkan beberapa layer
dalam satu peta ?
Skema MapFile
Contoh MapFile 2 Layer
• Lanjutan ...
• Simpanlah mapfile tersebut dengan nama kab_kota.map di
direktori C:\ms4w\apps\latih\map\
Menampilkan Layer Ganda
• Buka kembali file
c:\ms4w\apps\latih\htdocs\peta.html dan ubahlah
menjadi seperti berikut ini:
• Kemudian, buatlah file html baru dengan isinya
sebagai berikut:
• Simpan file tersebut dengan nama contoh_02.html dan
simpan di c:\ms4w\apps\latih\htdocs\
• Pada browser bukalah alamat
http://localhost:1111/latih/peta.html sehingga akan muncul
tampilan seperti berikut ini.
• Ketika link “Menampilkan Layer Ganda” di klik, akan muncul
tampilan peta dengan 2 layer seperti gambar berikut ini.
• Pada peta tersebut terlihat ada 2 peta yang
ditampilkan, yaitu peta “Asean-oceania.shp”
yang berlatar putih dan peta “Propinsi.shp” yang
berlatar abu-abu.
• Mudah kan?
• Jika ingin menambahkan layer lagi, tinggal
tambah saja blok LAYER … END pada mapfile
sesuai kebutuhan.
• Selamat mencoba
Selanjutnya ?
• Simbol dan Font
(https://arioss.wordpress.com/2012/05/15/webgis-5simboldan-font/)
• Peta Tematik (https://arioss.wordpress.com/2012/05/21/webgis6-pembuatan-peta-tematik/)
Chameleon
• Chameleon merupakan framework yang dapat
digunakan untuk mengembangkan aplikasi GIS
berbasis mapserver secara cepat.
• Sudah ada banyak widget yang dapat disisipkan
pada file html untuk template.
• Dengan chameleon setiap perancang web-GIS
dapat mengembangkan aplikasinya dengan
mudah hanya dengan cara menambahkan
beberapa tags (widget) ke halaman file template
html
Komponen Chameleon
• CWC (chameleon web-mapping components)
Kumpulan widget, didefinisikan sebagai tags CWC dalam halaman
web html template.
• Chameleon server
Berkomunikasi dengan mapserver untuk menghasilkan dan
mengintegrasikan bagian-bagian yang kemudian membentuk
komposisi peta
• Mapserver
Mesin peta menghasilkan map image, mengelola data yang
tepetakan dan menangani pemrosesan geografis.
Chameleon Widgets
•
•
•
•
•
•
•
CursorPos
KeepSessionAlive
LegendTemplate
MapDHTMLWidget
MapSize
MapTitle
PanMap
•
•
•
•
•
•
•
Query
Scalebar
SharedResource
UpdateMap
ZoomAllLayers
ZoomIn
ZoomOut
http://www.gommap.org/gommap/docs/gommap_widget_reference.html
Contoh
• Membuat situs webGIS menggunakan
mapserver dan phpmapscript
• Aplikasi GIS berbasis web yang menggunakan
teknologi mapserver.
• Interface menggunakan bahasa dan fungsi
php/mapscript.
• Databasenya menggunakan mysql.
• Komponen :
– Database
– Peta Digital
– Web GIS
• Database
• Screenshot
Note !
• Database menggunakan MySQL untuk
menyimpan content web; untuk peta digitalnya
digunakan hanya untuk menyimpan alamat file
.map .
• Karena MS4W tidak terdapat database mysql,
maka install mysql terlebih dahulu. Disarankan
menggunakan xampp 1.6. yang cocok dengan
ms4w karena masih menggunakan PHP4.
Selamat Belajar
Ini Amunisinya
Referensi
Tools:
• http://www.maptools.org
• http://www.mapserver.org
Learning:
• http://www.pribadiraharja.com/trihartanto/e-book/
• http://mapserver.wordpress.com
• http://ri32.wordpress.com
• https://arioss.wordpress.com/2011/02/07
Final Project
• Buat kelompok (anggota maks. 5 mhsw)
• Buat map file untuk layer Map_province, Map_street dan
Map_town.
• Sebelumnya, buat tampilan Map_provice menjadi per-bagian
propinsi.
• Tampilkan di web menggunakan MapServer.
• Buat tampilan di web:
– Label nama kota masing-masing
– Warna masing-masing poligon propinsi berbeda-beda
– Pemberian fitur arah mata angin dan skala
• Presentasi Minggu depan (29 Des 2014)