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.

Noviana Putri Kusumasari – G64052436 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 Sistem Informasi Geografis http://resource..esri.com/ http://www.yogyes.com/ Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 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

Noviana Putri Kusumasari – G64052436 Tujuan SIG Berbasis Web Noviana Putri Kusumasari – G64052436

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

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/0-7645-1622-1_0302.jpg Sumber : http://en.wikipedia.org/wiki/Map_projection Noviana Putri Kusumasari – G64052436

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 Web Server with ApplicationServer Map Server Data Server Klien Klien (Peng & Tsoe 2003) Noviana Putri Kusumasari – G64052436

Evolusi SIG Terdistribusi (Peng & Tsoe 2003) Noviana Putri Kusumasari – G64052436

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

Noviana Putri Kusumasari – G64052436 Google Maps API Situs Web (http://code.google.com/apis/maps/) Noviana Putri Kusumasari – G64052436

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

Noviana Putri Kusumasari – G64052436 Flex FLEX Framework gratis Command Line Compiler Eclipse Flex Builder Rich Internet Application Berbasis Flash Player Blok Programming & User Interface ActionScript MXML Bekerja dengan beberapa bahasa pemrograman PHP ColdFUsion Java ASP.NET (http://learn.adobe.com/) Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Flex data request data request (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 (Peng & Tsoe 2003) http://www.opengeospatial.org/standards/kml Noviana Putri Kusumasari – G64052436

Metodologi Penelitian

Noviana Putri Kusumasari – G64052436 Proses Rekayasa Web (Pressman 2001) Noviana Putri Kusumasari – G64052436

Komunikasi dengan Kustomer Analisis Bisnis Definisi lingkungan sistem  pengguna Perumusan Identifikasi masalah Identifikasi kebutuhan Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Perencanaan Perencanaan Fungsi Data Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 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

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

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 Sistem (BLACK BOX) ? input output Noviana Putri Kusumasari – G64052436

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

Noviana Putri Kusumasari – G64052436 Perencanaan Perencanaan Fungsi Data Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Perencanaan Fungsi Menampilkan data peta secara overlay pada Google Maps Menampilkan data peta secara berlapis Menampilkan data atribut atau deskripsi peta Pencarian lokasi Zoom in dan zoom out Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Perencanaan Data Batas wilayah administrasi Kota Bogor sampai tingkat kelurahan. Batas wilayah kecamatan di Kota Bogor, Landuse Kota Bogor, Jalan di Kota Bogor, 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

Noviana Putri Kusumasari – G64052436 Modeling Analisis Kebutuhan Fungsional Perancangan Proses Antarmuka Input Output Basis data Objek Arsitektur Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Analisis Identifikasi jenis data 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. Shapefile UTM 48S WGS84 KML2.2 GCS WGS84 Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Analisis Data Bakosurtanal Wilayah administrasi sampai tingkat kelurahan, Wilayah kecamatan, Landuse, Semua sungai, Semua jenis jalan, Semua jenis bangunan Data Anggraeni (2008) berupa fasilitas kota Bogor : Pemerintahan diklasifikasikan menjadi kantor walikota, kantor camat, kantor lurah, kantor desa, kantor polisi, kantor, dan balai penelitian, 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, Wisata diklasifikasikan menjadi penginapan, biro perjalanan, wisata kota, wisata sejarah, wisata kuliner, sport, dan museum Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Analisis Pengolahan data Konversi Sistem Koordinat Konversi Format Data Projection Utility ArcView 3.3 GCS WGS84 UTM WGS84 SHP2KML SHP KML Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Analisis Fungsional Fungsi Menampilkan data peta secara overlay pada Google Maps Menampilkan data peta secara berlapis Menampilkan data atribut atau deskripsi peta Pencarian lokasi Zoom in dan zoom out Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Perancangan Perancangan Proses Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Perancangan Perancangan Antarmuka Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Perancangan Perancangan Input No Jenis Input Deskripsi 1 Cek tema Pengguna melakukan cek pada pilihan checkbox tema. 2 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. Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Perancangan Perancangan Output No Output Deskripsi 1 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. Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Perancangan Perancangan Data Data spasial dari penelitian Anggraeni (2008) fasilitas jalan sungai kelurahan kecamatan landuse Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Perancangan Perancangan Basis Data Nonspasial Field Tipe Keterangan Id Int(5) Id tema Nama Varchar(100) Nama tema Path Varchar(500) Path berkas KML tema disimpan Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Perancangan Perancangan Objek Digunakan untuk merancang objek peta Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Modeling Perancangan Perancangan Arsitektur Google Maps Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Konstruksi Definisi Lingkungan Pengembangan Arsitektur Sistem Pendaftaran Sistem Inisialisasi Sistem Pemilihan Tema Spasial Fungsi Pencarian Noviana Putri Kusumasari – G64052436

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

Noviana Putri Kusumasari – G64052436 Konstruksi Arsitektur Sistem Developer MXML Library: Flexmap.swc Gmapslibrary.swc Web Server AS Database Server PHP Google Maps Klien Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 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_U2VrG7krxSGSLzvh1hLBFhn0rfm-dJAPurYLhQug8bTB_06KUQmzanqY6TI9TsWJw"/> Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Konstruksi InisilisasiSistem getTema.php <mx:HTTPService id="dataRequest“ url="php/getTema.php"/> Web Server Database Server XML Klien <myData> <dataItem> <tema>Kecamatan Bogor </tema> <linkFile>kec.kml</linkFile> <isSelected>true</isSelected> </dataItem> </myData> Noviana Putri Kusumasari – G64052436

Noviana Putri Kusumasari – G64052436 Konstruksi Proses Klien Load Tema Spasial Web Server kecamatan.kml Resuest KML KMLObj Kecamatan.kml Klien map.addOverlay(Marker) childObj Request to overlay Overlay Added Google Maps Noviana Putri Kusumasari – G64052436

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 1 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 Zoom in, zoom out Skala peta akan membesar jika dilakukan zoom in. Sebaliknya, skala peta akan mengecil jika dilakukan zoom out. 5 Klik objek detail tema Deskripsi objek tema muncul di atas peta vektor yang diklik. Noviana Putri Kusumasari – G64052436

Kesimpulan dan Saran

Noviana Putri Kusumasari – G64052436 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

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

Noviana Putri Kusumasari – G64052436 PetaBogor http://localhost/scriptov09/scriptov09.html Noviana Putri Kusumasari – G64052436

Sekian dan Terima Kasih