Map Server + PHP/MapScript

Presentasi berjudul: "Map Server + PHP/MapScript"— Transcript presentasi:

1 Map Server + PHP/MapScript
Catur Iswahyudi

2 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

3 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.

4 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.

5 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.

6 Map file berguna untuk mengubah database spasial menjadi bentuk peta.
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.

7 Sebagai server, mapserver memiliki beberapa komponen pembentuk untuk menunjang pembentukan sistem informasi geografis. Komponen Penggambaran Peta Komponen Proyeksi Peta, dan Komponen Akses Data Spasial

8 Ketiga komponen tersebut memiliki library masing-masing.
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.

9 Proyeksi peta memiliki satu library yang populer yaitu Proj. 4
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).

10 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.

11 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.

12 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)

13 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

14 Arsitektur Umum Aplikasi Web GIS
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.

15 Arsitektur MapServer

16 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.

17 Geographic Data - MapServer dapat menangani berbagai macam tipe data geografis.
The default format is the ESRI shapefile. Ref:

18 HTML Pages - the interface between the user and MapServer
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.

19 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

20 HTTP Server - serves up the html pages when hit by the user’s browser
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.

21 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.

22 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

23 MapServer menggunakan pendekatan thin client
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).

24 Komponen Pembentuk MapServer
Kebutuhan MapServer: Webserver (Apache, IIS) dan komponen MapServer. Komponen MapServer dibagi menjadi 4 kategori: Komponen utk akses data spasial Komponen utk penggambaran peta Komponen utk menangani proyeksi peta on the fly Komponen pendukung

25 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.

26 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.

27 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.

28 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.

29 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

30 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 non-alphanumerik (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 (#).

31 Contoh MapFile Sebagai contoh, berikut ini adalah isi mapfile sederhana yang dapat digunakan untuk menampilkan sebuah layer peta di dalam program aplikasi browser internet.

32

33

34 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.

35 Data spasial yang digunakan berlokasi di “
Data spasial yang digunakan berlokasi di “../data/asean” (relatif terhadap folder dimana mapfile berada). Warna latar pada peta adalah warna biru muda (RGB: ). 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 “Asean-oceania.shp”. Layer tersebut statusnya dimunculkan (STATUS ON).

36 Di dalam layer “Asean” terdapat unsur-unsur spasial yang bertipe poligon dengan nama “Asean” juga.
Kelas “Asean” akan disajikan dengan warna latar putih (RGB: ) dengan garis tepi warna biru muda yang sama dengan warna latar peta.

37 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.

38 Map Objek ini mendefinisikan objek master milik mapfile, yang isinya adalah parameter-parameter global untuk peta yang akan ditampilkan.

39 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.

40

41 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.

42

43 Label Objek ini digunakan untuk mendefinisikan anotasi suatu unsur dalam peta. Selain itu, label juga dapat dijadikan sebagai simbol.

44 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.

45

46 Menampilkan Peta buat suatu file html yang isinya adalah sebagai berikut Simpanlah dengan nama file peta.html di direktori C:\ms4w\apps\latih\htdocs\

47 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\

48 Pada browser bukalah alamat http://localhost:1111/latih/peta
Pada browser bukalah alamat sehingga akan muncul tampilan seperti berikut ini.

49 Ketika link yang ada pada halaman tsb di klik, akan muncul tampilan peta seperti pada gambar berikut

50 Oke… selamat… sampai tahap ini Anda sudah berhasil menampilkan peta di browser…
itu sudah disebut dengan “WebGIS” meskipun masih amat-sangat-sederhana-sekali

51 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 ?

52 Skema MapFile

53 Contoh MapFile 2 Layer

54 Lanjutan ... Simpanlah mapfile tersebut dengan nama kab_kota.map di direktori C:\ms4w\apps\latih\map\

55 Menampilkan Layer Ganda
Buka kembali file c:\ms4w\apps\latih\htdocs\peta.html dan ubahlah menjadi seperti berikut ini:

56 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\

57 Pada browser bukalah alamat http://localhost:1111/latih/peta
Pada browser bukalah alamat sehingga akan muncul tampilan seperti berikut ini.

58 Ketika link “Menampilkan Layer Ganda” di klik, akan muncul tampilan peta dengan 2 layer seperti gambar berikut ini.

59 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

60 Selanjutnya ? Simbol dan Font (

61 Peta Tematik (https://arioss. wordpress

62

63 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

64

65 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.

66 Chameleon Widgets CursorPos KeepSessionAlive LegendTemplate
MapDHTMLWidget MapSize MapTitle PanMap Query Scalebar SharedResource UpdateMap ZoomAllLayers ZoomIn ZoomOut

67 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.

68 Komponen : Database Peta Digital Web GIS

69 Database

70 Screenshot

71 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.

72 Selamat Belajar

73

74 Ini Amunisinya

75 Referensi Tools: http://www.maptools.org http://www.mapserver.org
Learning:

76 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)

77