09
Des
13

[WebGIS 8] – ka-Map!

 

ka-Map! merupakan proyek open source yang tujuannya adalah menyediakan API javascript untuk membangun antarmuka web-mapping yang sangat interaktif menggunakan fitur-fitur yang terdapat pada web browser modern. ka-Map! dibangun oleh DM Solutions Group Inc. Alamat web resminya adalah http://ka-map.maptools.org/ .

ka-Map! dibangun dengan menggunakan AJAX (Asynchronous Javascript And XML) dan berkomunikasi dengan server secara asinkron, yang artinya, ketika Anda melakukan query pada peta Anda tidak harus menunggu sampai respon diberikan, tetapi sambil menunggu respon Anda dapat melakukan perintah-perintah lainnya seperti zooming, panning, dll.

Sebenarnya proyek ka-Map! ini sudah dihentikan sejak 2007, tetapi tujuan dari tulisan ini adalah untuk memperlihatkan bagaimana mudahnya pemrograman WebGIS yang interaktif jika menggunakan framework. Selain dari itu, ka-Map! merupakan salah satu framework yang paling mudah digunakan dan di masa keemasannya merupakan framework yang lumayan canggih. Begitu sudah tahu, Anda tidak akan menemui banyak kesulitan untuk berpindah ke framework lainnya (walaupun tergantung orang dan framework-nya juga sih Smile with tongue out).

 

Fitur

  • Dapat diinstal di sistem operasi Linux, Unix dan Windows yang sudah terpasang Apache, Mapserver, PHP dan PHP Mapscript
  • Continuous panning yang interaktif, tanpa perlu me-load ulang seluruh halaman
  • Pilihan navigasi (zoom, pan)
  • Mendukung scalebar, legend dan keymap
  • Query data pada layer melalui klik di peta
  • Dapat mencari data di suatu layer dan bisa di zoom ke lokasi data tersebut
  • Cocok untuk:
    • Peta berbasis data statis
    • Skala yang sudah ditentukan
    • Peta yang berdimensi besar (full screen)
    • Peta yang dapat diubah-ubah ukurannya secara dinamis
  • Tidak cocok untuk:
    • Data yang berubah-ubah
    • Banyak layer yang terpisah

 

Browser yang didukung

Browser

Windows

Linux

Mac OS X

Internet Explorer

Ya (6, 7)

Mozilla/Firefox

Ya (1.0+)

Ya (1.0+)

Ya (1.0+)

Netscape

Ya (7+)

Ya (7+)

Ya (7+)

Epiphany

Ya

Opera

Ya (7+)

Ya (7+)

Ya (7+)

Konqueror

Tidak

Safari

?

Ya

Instalasi ka-Map!

Seperti yang sudah dijelaskan sebelumnya bahwa ka-Map! membutuhkan PHP Mapscript milik Mapserver. Oleh karena itu, pastikan dulu Mapserver sudah terinstalasi dengan baik pada komputer Anda. Adapun langkah-langkah instalasi ka-Map! adalah sebagai berikut (dengan asumsi MapServer sudah terpasang baik):

  1. Download paket “GMap Sample MS4W” berikut ini dari http://dl.maptools.org/dl/ms4w/gmap_ms4w_ms410.zip
  2. Ekstrak file tersebut ke lokasi dimana MapServer Anda berada.
  3. Download paket “ka-Map MS4W” dari http://www.maptools.org/dl/ms4w/ka-map-ms4w-1.0.zip 
  4. Ekstrak juga file tersebut ke drive dimana MapServer Anda berada.
  5. Restart Apache dengan menggunakan file \ms4w\apache-restart.bat
  6. Sekarang Anda sudah dapat membuka ka-Map! melalui alamat http://localhost:1111/kamap/. Jika tidak ada masalah, tampilan browser harusnya sudah seperti di bawah ini.
  7. Untuk mengkonfigurasi ka-Map!, Anda bisa mengubah isi file config.php yang terdapat di folder /ms4w/apps/ka-map-1.0/include/. Semua dokumentasi untuk daftar parameter yang dapat diubah sudah ada di dalam file tersebut dalam bentuk komentar.

 

Fitur Standar ka-Map!

image

Tampilan default ka-Map!

 

Secara default, framework ka-Map! sudah dilengkapi dengan fitur navigasi peta standar seperti: rubber zoom, pan, zoom in/out, query, dll. Semuanya sudah disediakan fungsi-fungsinya. Dengan kata lain, kita tidak perlu membangun dengan PHP Mapscript-nya dari awal. Hanya siapkan data dan file konfigurasi (mapfile).

 

Menambah Peta Baru di ka-Map!

Seperti yang sudah dijelaskan di poin 7 pada bagian Instalasi ka-Map!, ka-Map! dapat dikonfigurasi melalui file config.php yang terdapat pada folder /ms4w/apps/ka-map-1.0/include/. Sekarang mari kita coba tambahkan peta ke dalam daftar peta yang terdapat pada ka-Map! melalui langkah-langkah berikut ini:

  1. Siapkan mapfile kabkota_label.map beserta file-file petanya yang terkait (file kabupaten.* dan raster.tif)
  2. Copy file kabkota_label.map ke direktori /ms4w/apps/gmap/htdocs/
  3. Copy file-file peta (file kabupaten.* dan raster.tif) ke direktori /ms4w/apps/gmap/data/
  4. Buka file /ms4w/apps/ka-map-1.0/include/config.php
  5. Buatlah array baru $aszIndonesia yang akan mendefinisikan peta baru kita sebagai berikut:

    $aszIndonesia = array (
       ‘title’ => ‘Indonesia’,
       ‘path’ => ‘../../gmap/htdocs/kabkota_label.map’,
       ‘scales’ => array( 25000000, 20000000, 17500000, 15000000, 10000000, 7500000, 5000000, 2500000, 1000000, 500000 ),
       ‘format’ =>’PNG’
    );

    image

  6. Masukkan array $aszIndonesia ke dalam array global $aszMapFiles sehingga isinya menjadi sebagai berikut:

    $aszMapFiles = array( ‘gmap’ => $aszGMap, ‘Indonesia’ => $aszIndonesia

  7. Simpanlah file config.php tersebut, kemudian buka file kabkota_label.map
  8. Ubahlah lokasi FONTSET sebagai berikut:

    FONTSET "../etc/fonts.txt"

  9. Masih di dalam file kabkota_label.map. Ubahlan SEMUA baris “FONT CALIBRI” menjadi sebagai berikut:

    FONT SANS

  10. Simpan file kabkota_label.map, kemudian kembali ke browser dan tekan tombol F5 untuk me-refresh tampilan ka-Map!

 

Jika tidak ada kesalahan, maka pada ka-Explorer! akan dapat memunculkan peta Indonesia seperti yang terlihat pada gambar di bawah.

image

Tampilan peta Indonesia (melalui mapfile kabkola_label.map) pada ka-Map!

 

Perlu diketahui juga bahwa ka-Map! akan gagal menampilkan peta jika:

  • Ada kesalahan sintaks di file config.php.
  • Ada kesalahan lokasi file map di file config.php.
  • Ada kesalahan sintaks di mapfile.

Untuk mengetahui pesan kesalahannya, Anda bisa buka file init.php melalui browser sebagai berikut: http://localhost:1111/kamap/init.php

Menambahkan Key/Reference Map

Pertama-tama kita persiapkan sebuah file gambar berukuran kecil (misal 202×126 pixel) yang diberi nama keymap_indonesia.png, kemudian file tersebut disimpan di direktori /ms4w/apps/gmap/htdocs/images/.

image

File "keymap_indonesia.png” untuk key/reference map

 

Selanjutnya pada file kabkota_label.map tambahkan baris kode berikut ini (yg ditulis tebal):


EXTENT 92.93 -16.38 142.59 11.10

REFERENCE
    IMAGE images/keymap_indonesia.png
    EXTENT 92.93 -16.38 142.59 11.10
    STATUS ON
    COLOR -1 -1 -1
    OUTLINECOLOR 255 0 0
    SIZE 202 126
END

LAYER
    NAME "Citra"
    DATA "raster.tif"
    STATUS ON
    TYPE RASTER
END

Setelah tampilan peta pada browser di refresh, maka akan muncul keymap seperti gambar berikut ini.

image

Tampilan peta Indonesia dengan key/reference map.

 

Tidak sulit kan? Tulisan berikutnya akan membahas struktur dari ka-Map! tersebut.


6 Responses to “[WebGIS 8] – ka-Map!”


  1. Februari 19, 2014 pukul 11:47 am

    mas saya mau tanya lagi nih…
    saya mencoba membuka peta dengan template.html yang saya buat, frame dan tabelnya memang muncul tetapi pada bagian peta dan keymapnya putih (blank).. bagaimana cara mengatasinya ya mas??

  2. Agustus 8, 2015 pukul 10:56 am

    maaf mas saya juga punya permasalahan yg sama seperti komentar di atas, solusinya bagaimana ya? saya sudah tunggu komentar selanjutnya ternyata ga ada balasan juga, mohon bantuan nya ya,,

    • Agustus 8, 2015 pukul 11:12 am

      waduh, maap-maap, lagi sibuk banget, ga sempet liat2 komentar di blog
      trus sudah lama juga sy tidak pake Mapserver w/ ka-Map
      sekarang lebih enak pake OpenLayers (walaupun ribet juga sih, hahaha…), jadi saya sudah agak2 lupa juga nyari solusinya…😀


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s


arioss

Arsip

Blog Stats

  • 68,494 hits

RSS Fokus ITB

  • Sebuah galat telah terjadi; umpan tersebut kemungkinan sedang anjlok. Coba lagi nanti.

%d blogger menyukai ini: