Noviana Putri Kusumasari - G64052436 Pembimbing

Sistem Informasi Geografis Kota Bogor
menggunakan Flex dan Google Maps API for Flash
Noviana Putri Kusumasari - G64052436
Pembimbing : Hari Agung Adrianto, S.Kom., M.Si.
Latar Belakang
www.geocities.com/.../
bogor2000/map_bogor.gif
http://www.kotabogor
.go.id/
http://wandikotbogor.
ORG/
http://www.indotravelers.com/
bogor/peta_bogor.html
http://resource..esri.com/
http://www.yogyes.com/
Noviana Putri Kusumasari – G64052436
Sistem
Informasi
Geografis
Latar Belakang
Sistem Informasi Geografis
Fasilitas Kota Bogor
menggunakan ALOV Map
Google Maps API
Flex
Sistem Informasi Geografi kota Bogor menggunakan
Flex dan Google Maps API for Flash
Noviana Putri Kusumasari – G64052436
Tujuan
SIG Berbasis Web
Noviana Putri Kusumasari – G64052436
Ruang Lingkup
Sistem berbasis web.
Menampilkan peta vektor dari data spasial
penelitian Anggraeni (2008)
Fungsi pencarian berdasarkan nama atribut tempat
dari data spasial tersebut.
Noviana Putri Kusumasari – G64052436
Manfaat
Memberikan kemudahan bagi pengguna umum untuk
mendapatkan informasi secara visual dan interaktif
tentang lokasi wilayah atau tempat di Kota Bogor.
Melakukan evaluasi data spasial berdasarkan peta
satelit dari Google Maps.
Menyediakan fungsi dasar SIG yang bisa dikembangkan
menjadi sistem informasi yang lebih kaya tentang kota
Bogor.
Noviana Putri Kusumasari – G64052436
Tinjauan Pustaka
Sistem Informasi Geografis (SIG)
• Sistem komputer yang digunakan untuk
mengumpulkan, menyimpan, melakukan
query, menganalisis, dan menampilkan data
geografis.
(Chang K. T. 2002)
Noviana Putri Kusumasari – G64052436
Sistem Informasi Geografis (SIG)
Grid Geografi
Proyeksi
Peta
Sumber :
http://media.wiley.com/assets/7/87/07645-1622-1_0302.jpg
Sumber :
http://en.wikipedia.org/wiki/Map_projection
Noviana Putri Kusumasari – G64052436
SIG Terdistribusi
•
Perangkat SIG yang terpusat pada jaringan menggunakan
•
internet atau jaringan wireless sebagai akses utama untuk
mendistribusikan data dan informasi lain serta menyebarkan
informasi spasial dan analisis SIG.
Komponen Internet GIS :
Klien
Klien
Klien
Web Server
with
Application
Server
Map
Server
Data
Server
(Peng & Tsoe 2003)
Noviana Putri Kusumasari – G64052436
Evolusi SIG Terdistribusi
(Peng & Tsoe 2003)
Noviana Putri Kusumasari – G64052436
Google Maps
Penyedia layanan gratis pemetaan dan
kartografi berbasis web.
Waktu loading yang relatif lebih cepat
Tampilan tiled map
Script API yang kaya dan bisa dikembangkan
dengan mudah
(Gibson & Erle, 2006)
Noviana Putri Kusumasari – G64052436
Google Maps API
Situs
Web
(http://code.google.com/apis/maps/)
Noviana Putri Kusumasari – G64052436
Google Maps API Flash
Situs Web
Library : SWC
(http://code.google.com/apis/maps/documentation/flash/intro.html)
Noviana Putri Kusumasari – G64052436
Flex
Command Line Compiler
Framework gratis
Eclipse
Flex Builder
Rich Internet Application
Berbasis Flash Player
Blok Programming & User
Interface
ActionScript
FLEX
MXML
PHP
Bekerja dengan beberapa
bahasa pemrograman
ColdFUsion
Java
ASP.NET
(http://learn.adobe.com/)
Noviana Putri Kusumasari – G64052436
Flex
(http://learn.adobe.com/)
Noviana Putri Kusumasari – G64052436
Keyhole Markup Language (KML)
• Berbasis XML
• Menampilkan data
geografis pada Earth
browse
• Elemen-elemen kelas yang
membentuk suatu hirarki
objek
http://www.opengeospatial.org/standards/kml
(Peng & Tsoe 2003)
Noviana Putri Kusumasari – G64052436
Metodologi Penelitian
Proses Rekayasa Web
(Pressman 2001)
Noviana Putri Kusumasari – G64052436
Komunikasi dengan Kustomer
Analisis Bisnis
Definisi
lingkungan sistem
 pengguna
Identifikasi
masalah
Perumusan
Identifikasi
kebutuhan
Noviana Putri Kusumasari – G64052436
Perencanaan
Perencanaan
Noviana Putri Kusumasari – G64052436
Fungsi
Data
Modeling
Analisis
• Identifikasi jenis data
• Data awal dan data yang akan digunakan
• Klasifikasi Data
• Pengolahan data
• Proses konversi sebelum data tersebut digunakan
• Fungsi-fungsi sistem
• Menampilkan peta vektor dari data spasial
sebagai overlay peta raster Google Map
• Pencarian nama tempat
• Zoom in dan zoom out
Noviana Putri Kusumasari – G64052436
Modeling
Perancangan
• Perancangan Proses
• Perancangan Antarmuka
• Perancangan Input
• Perancangan Output
• Perancangan Basis Data
• Perancangan Objek
• Perancangan Arsitektur
Noviana Putri Kusumasari – G64052436
Konstruksi
Definisi Lingkungan Pengembangan
Arsitektur Sistem
Pendaftaran Sistem
Inisialisasi Sistem
Pemilihan Tema Spasial
Fungsi Pencarian
Fungsi Zoom in dan Zoom Out
Noviana Putri Kusumasari – G64052436
Penyebaran dan Feedback
input
Sistem
(BLACK BOX)
Noviana Putri Kusumasari – G64052436
output
?
Hasil dan Pembahasan
Komunikasi dengan Kustomer
Mengacu pada penelitian sebelumnya
Sistem Informasi Geografi kota Bogor berbasis
Web menggunakan ALOV Map. (Anggraeni, 2008)
Data spasial berdasarkan klasifikasi
kebutuhan masyarakat Bogor.
Noviana Putri Kusumasari – G64052436
Perencanaan
Fungsi
Perencanaan
Data
Noviana Putri Kusumasari – G64052436
Perencanaan
Menampilkan data peta secara overlay pada
Google Maps
Menampilkan data peta secara berlapis
Fungsi
Menampilkan data atribut atau deskripsi peta
Pencarian lokasi
Zoom in dan zoom out
Noviana Putri Kusumasari – G64052436
Perencanaan
Batas wilayah administrasi Kota Bogor sampai tingkat kelurahan.
Batas wilayah kecamatan di Kota Bogor,
Landuse Kota Bogor,
Jalan di Kota Bogor,
Data
Sungai di Kota Bogor,
Bangunan-bangunan Kota Bogor,
Layanan umum Kota Bogor,
Pemerintahan Kota Bogor.
Sentral bisnis Kota Bogor,
Lokasi wisata Kota Bogor
Noviana Putri Kusumasari – G64052436
Modeling
Analisis
• Kebutuhan
• Fungsional
Perancangan
•
•
•
•
•
•
•
Proses
Antarmuka
Input
Output
Basis data
Objek
Arsitektur
Noviana Putri Kusumasari – G64052436
Modeling
Analisis
• Identifikasi jenis data
Shapefile
UTM 48S WGS84
KML2.2
GCS WGS84
• Data vektor yang digunakan :
• Polygon, untuk wilayah kecamatan, kelurahan, dan landuse,
• Line, untuk sungai dan jalan,
• Point, untuk bangunan, fasilitas pemerintahan, layanan
umum, sentral bisnis, dan wisata.
Noviana Putri Kusumasari – G64052436
Modeling
Analisis
Data Bakosurtanal
Wilayah administrasi sampai
tingkat kelurahan,
Data Anggraeni (2008) berupa fasilitas kota Bogor :
Pemerintahan diklasifikasikan menjadi kantor
walikota, kantor camat, kantor lurah, kantor desa,
kantor polisi, kantor, dan balai penelitian,
Wilayah kecamatan,
Landuse,
Semua sungai,
Semua jenis jalan,
Layanan umum diklasifikasikan menjadi mesjid,
gereja, balai pertemuan, taman kanak-kanak,
sekolah dasar, sekolah menengah, universitas,
bimbingan belajar, rumah sakit, puskesmas /klinik
dokter, terminal/ stasiun, lembaga kesehatan lain,
kantor pos, SPBU, dan pemakaman,
Sentral bisnis diklasifikasikan menjadi bank, pasar
tradisional, mall, outlet, industri, pegadaian,
Semua jenis bangunan
Wisata diklasifikasikan menjadi penginapan, biro
perjalanan, wisata kota, wisata sejarah, wisata
kuliner, sport, dan museum
Noviana Putri Kusumasari – G64052436
Modeling
Analisis
• Pengolahan data
• Konversi Sistem Koordinat
Projection
Utility
ArcView
3.3
UTM
WGS84
GCS
WGS84
• Konversi Format Data
SHP
SHP2KML
Noviana Putri Kusumasari – G64052436
KML
Modeling
Analisis
• Fungsional
Menampilkan data peta secara overlay
pada Google Maps
Menampilkan data peta secara berlapis
Fungsi
Menampilkan data atribut atau
deskripsi peta
Pencarian lokasi
Zoom in dan zoom out
Noviana Putri Kusumasari – G64052436
Modeling
Perancangan
• Perancangan Proses
Noviana Putri Kusumasari – G64052436
Modeling
Perancangan
• Perancangan Antarmuka
Noviana Putri Kusumasari – G64052436
Modeling
Perancangan
• Perancangan Input
No
Jenis Input
Deskripsi
Cek tema
Pengguna melakukan cek pada pilihan checkbox tema.
Select objek tema
Pengguna melakukan seleksi pada objek dari detail tema
dalam bentuk tree yang muncul setelah melakukan cek
tema.
3
Search
Pengguna mengisi textfield berupa kata kunci pencarian
lalu menekan tombol untuk memulai pencarian. Aksi ini
dapat digunakan dengan menggunakan keyboard.
4
Zoom in, zoom out
Pengguna menekan tombol (+) untuk melakukan zoom in
dan tombol (-) intuk melakukan zoom out.
5
Klik objek detail tema
Pengguna melakukan klik pada peta vektor untuk melihat
detail tema.
1
2
Noviana Putri Kusumasari – G64052436
Modeling
Perancangan
• Perancangan Output
No
Output
Deskripsi
Peta raster Google Map
Peta yang pertama kali muncul sekaligus peta yang
terletak di layer terbawah dalam sistem ini. Tipe
peta ini dapat diubah-ubah sesuai dengan peta
terpilih.
2
Peta vektor
Peta yang dibangkitkan dari data spasial dalam
format KML yang tersimpan dalam web server. Peta
ini ditampilkan secara overlay.
3
Hasil pencarian
List tema yang memiliki nama yang sama dengan
kata kunci yang dimasukkan untuk pencarian.
4
Deskripsi tema
Deskripsi tentang objek tema.
1
Noviana Putri Kusumasari – G64052436
Modeling
Perancangan
• Perancangan Data
• Data spasial dari penelitian Anggraeni (2008)
kelurahan
kecamatan
jalan
sungai
landuse
Noviana Putri Kusumasari – G64052436
fasilitas
Modeling
Perancangan
• Perancangan Basis Data Nonspasial
Field
Id
Tipe
Int(5)
Keterangan
Id tema
Nama
Varchar(100) Nama tema
Path
Varchar(500) Path berkas KML tema disimpan
Noviana Putri Kusumasari – G64052436
Modeling
Perancangan
• Perancangan Objek
Digunakan untuk merancang objek peta
Noviana Putri Kusumasari – G64052436
Modeling
Perancangan
• Perancangan Arsitektur
Google
Maps
Noviana Putri Kusumasari – G64052436
Konstruksi
Definisi Lingkungan Pengembangan
Arsitektur Sistem
Pendaftaran Sistem
Inisialisasi Sistem
Pemilihan Tema Spasial
Fungsi Pencarian
Noviana Putri Kusumasari – G64052436
Konstruksi
• Lingkungan Pengembangan
Perangkat Lunak
• Microsoft Window XP sebagai sistem operasi
• Adobe Flex Builder sebagai IDE Flex SDK
• Notepad++ sebagai editor pemrograman
• SHP2KML sebagai konverter format data SHP ke KML
• Projection Utility ArcView 3.3 sebagai konverter proyeksi peta.
• Browser Firefox Mozilla
• Plugin Flash Player
Noviana Putri Kusumasari – G64052436
Konstruksi
• Arsitektur Sistem
Developer
MXML
AS
PHP
Library:
-Flexmap.swc
-Gmapslibrar
y.swc
Web Server
Google
Maps
Klien
Noviana Putri Kusumasari – G64052436
Database
Server
Konstruksi
• Pendaftaran Sistem
– Sebelum menggunakan Google Maps, pengguna
mendaftarkan URL sistemnya pada Google Maps untuk
mendapatkan key.
<maps:Map xmlns:maps="com.google.maps.*" id="map"
mapevent_mapready="onMapReady(event)" width="100%"
height="100%"
key="ABQIAAAAkyUs3puHVlgX_U2VrG7krxSGSLzvh1hLBFhn0
rfm-dJAPurYLhQug8bTB_06KUQmzanqY6TI9TsWJw"/>
Noviana Putri Kusumasari – G64052436
Konstruksi
• InisilisasiSistem
getTema.php
<mx:HTTPService
id="dataRequest“
url="php/getTema.php"/>
Web Server
XML
Database
Server
Klien
<myData>
<dataItem>
<tema>Kecamatan Bogor </tema>
<linkFile>kec.kml</linkFile>
<isSelected>true</isSelected>
</dataItem>
</myData>
Noviana Putri Kusumasari – G64052436
Konstruksi
• Load Tema Spasial Proses Klien
kecamatan.kml
Resuest KML
Web Server
Klien
KMLObj
Kecamatan.kml
map.addOverlay(Marker)
Request to overlay
childObj
Overlay Added
Google
Maps
Noviana Putri Kusumasari – G64052436
Konstruksi
• Fungsi Zoom In dan Zoom Out
map.addControl(new ZoomControl());
Noviana Putri Kusumasari – G64052436
Penyebaran dan Feedback
• Pengujian dilakukan dengan metode black box.
No Input
Output yang diharapkan
Status
Cek tema
Muncul peta vektor tema yang dipilih secara overlay di atas
peta raster Google Maps.

2
Select objek tema
Skala peta akan menyesuaikan dengan objek yang terpilih
dimana bagian tengah peta adalah objek tema yang dikenai
seleksi.

3
Search
Hasil pencarian dimunculkan dalam bentuk checkbox yang
bisa diaktifkan untuk memunculkan peta vektornya.

4
Skala peta akan membesar jika dilakukan zoom in.
Zoom in, zoom out Sebaliknya, skala peta akan mengecil jika dilakukan zoom
out.

5
Klik objek detail
tema

1
Deskripsi objek tema muncul di atas peta vektor yang diklik.
Noviana Putri Kusumasari – G64052436
Kesimpulan dan Saran
Kesimpulan
• Integrasi Flex dengan Google Maps API untuk membangun SIG
menghasilkan aplikasi yang dapat menampilkan peta vektor dari data
spasial di atas peta raster Google Maps.
• Pemanfaatan tipe peta Google Map seperti satelit, hybrid akan
memudahkan pengguna dalam mendapatkan informasi lokasi sesuai
dengan yang dibutuhkan.
• Sistem ini juga menyediakan fungsi pencarian berdasarkan nama objek
peta
Noviana Putri Kusumasari – G64052436
Saran
Melakukan instalasi di web server agar bisa dimanfaatkan secara maksimal
oleh pengguna sistem via internet.
Melakukan rancangan dan evaluasi antarmuka agar sistem ini dapat
dimanfaatkan secara efektif dan efisien.
Menjadikan sistem ini sebagai agregator informasi kota Bogor dengan
menambahkan fungsi-fungsi seperti detail lokasi dan penambahan wilayah.
Noviana Putri Kusumasari – G64052436
Demo
PetaBogor
• http://localhost/scriptov09/scriptov09.html
Noviana Putri Kusumasari – G64052436
Sekian dan Terima Kasih