membangun web gis dengan google maps api - elista:.

MEMBANGUN WEB-BASED GIS
DENGAN GOOGLE MAPS API
OUTLINE
1. Dasar Pemrograman Web GIS dengan Google
2. Cara kerja GPS dan prinsip Matematika
3. Cara memperoleh Google Maps API key
4. Menambahkan fungsi klik kanan pada peta
5. Google Maps API Javascript (dynamic map)
6. Menambahkan dan menampilkan data dari database
7. Menambahkan rute dan arah pada peta google
THE WORLD WIDE WEB
• Clients
• Servers
• Communication Networks
Server
Client
CLIENTS
Applications that run on computers
Rely on servers for
 Files
 Devices
 Processing power
Examples:
 E-mail
 Web Browser
 FTP
 ArcMap, QGIS
Clients are Applications
SERVERS
Computers or processes that manage network resources
 Disk drives (file servers)
 Printers (print servers)
 Web content (network servers)
Example: Database Server
 A computer system that processes database queries
Servers Manage Resources
CLIENT–SERVER RELATIONSHIP
Process takes place on the server and the client
Servers
 Store and protect data
 Process requests from clients
Clients
 Make requests
 Format data on the desktop
Client-Server Computing Optimizes
Computing Resources
What is a Google Map?
Maps.google.com - interactive street, satellite, terrain maps and more.
What is Google Maps?
An enormous amount of searchable geographic information (gazetteer)
A way of organizing the worlds information geographically
What is a Google Map?
Google MyMaps – customize maps with user created enhancements.
WHAT IS GOOGLE MAPS - SUMMARY
A web mapping service, free for non-commercial use that contains:
 Detailed global basemaps: streets, satellite imagery, and terrain.
 Useful services such as address and place locating by searching against an
information rich gazetteer.
 Ability to overlay a wide variety of map layers, (weather, traffic) from static or
dynamic sources.
 Map layer creation and light customization through functionality through MyMaps.
 An API that allows for embedding and extensive customization.
APPLICATION PROGRAMMING INTERFACE (API)
API - An interface to a software program that allows users to
interact and customize it.
 Determines the vocabulary and calling conventions a programmer uses
to employ the software services.
 Usually based on an existing programming languages (C, .NET,
VisualBasic, Java, javascript)
 Many desktop and web software applications have API’s
 Google Maps API uses javascript
GOOGLE MAPS API
Allows embedding of a Google map into one’s own web page
using javascript.
Free to use, on any website that is provided free of charge to
others.
Relatively gentle learning curve.
Highly customizable and easily transferrable.
Evolving - new functionality consistently being added.
WHAT IS A MASHUP
A web page or application that combines data or functionality from two or more
external sources to create a new service.
Therefore:
MyWebPage + Google Map = mashup
Even better:
MyWebPage + Google Map + Other web service(s)
Google Map mashups examples:
embeddable and customizable
GOOGLE MAPS, MASHUPS, AND GOOGLE EARTH
DIFFERENCES AND SIMILARITIES
Google Maps & MyMaps





A free web application (no software installation necessary)
2 dimensional map view, with street, satellite, terrain basemaps
Data creation possible (points, lines, polygons), reads limited kml.
A selected set of map overlays and functions available.
Specific maps can be saved and shared easily on the web.
Google Maps Mashups





A free service allowing one to embed a Google Map into a web page.
2 dimensional map view, with street, satellite, terrain basemaps.
Highly customizable to include everything in MyMaps and more.
Customization requires using javascript and HTML.
Requires access to a web-server to publish to the web.
Google Earth
 A free desktop application (downloading and installation necessary).
 3 dimensional map view with satellite basemap, many map overlay layers, and a rich set of visualization
tools.
 Data creation possible (points, lines, polygons).
 Complex kml creation is possible.
GOOGLE MAPS, MASHUPS, AND GOOGLE EARTH
WHICH ONE TO USE?
Google Maps
 Locating, measuring, or learning about the geography of a place.
 If you want to share a map.
 Communicate geographic information quickly.
Google Maps Mashups
 Used to embed a map into a new or existing website.
 Create interactive web maps for your users.
Google Earth
 Visualizing terrain, 3d buildings, historical imagery, and access to many thematic map
layers.
 Virtual tour creation (movies)
 Small amounts of data collection, geocoding, and image geo-referencing.
DASAR PEMROGRAMAN WEB GIS DENGAN
GOOGLE
Sistem Informasi Geografis (Geographic Information System) merupakan sebuah
aplikasi yang mampu mengolah, menyimpan dan menyajikan data yang memiliki
informasi spasial atau berbasis keruangan. Misalnya data yang berupa lokasi
bangunan, luas lahan, rute, dll.
GIS dapat dimanfaatkan dalam berbagai bidang, a.l penunjang pengambilan
keputusan perencanaan dan pengelolaan penggunaan lahan, sumber daya alam,
lingkungan, transportasi, fasilitas kota dan pelayanan umum lainya.
KOMPONEN SIG
1. Perangkat Keras
Perangkat keras GIS merupakan perangkat fisik yang digunakan dalam
memanipulasi data baik memasukkan(input), mengolah maupun menyajikan data.
2. Perangkat Lunak
Perangkat lunak pada GIS digunakan untuk menyimpan, mengolah, menganalisa, dan
menyajikan data baik yang berupa data ruang maupun non ruang.
3. Manusia
Manusia adalah inti dari GIS, tanpa manusia yang merancang dan menggunakan
GIS, maka GIS tidak pernah ada.
4. Data
Inti dari GIS adalah data, tanpa adannya data GIS tidak akan bernilai. Pada dasarnya ada dua
jenis data GIS yaitu:
a. Data spasial
Merupakan data yang menyajikan data suatu wilayah di permukaan bumi yang direpresentasikan
dalam bentuk grafik, peta, gambar dengan format digital dan disimpan dalam bentuk koordinat.
b. Data Non-spasial
Yaitu data yang berupa tabel dimana tabel-tabel tersebut memuat informasi-informasi yang
dimiliki oleh objek dalam data spasial. data tersebut merupakan data tabular yang saling
terintegrasi dengan data spasial yang ada.
5. Metode
Suatu GIS memiliki metode-metode yang berbeda untuk setiap permasalahan. GIS yang baik
tergantung pada aspek desain dan aspek real nya.
MENGAPA PERLU PETA ?
Seperti pengertian dasar dari GIS yang merupakan aplikasi untuk menyajikan data
berbasis keruangan tentu membutuhkan sebuah gambar denah atau peta. Google
map merupakan sebuah aplikasi dari google inc yang menyajikan data berupa peta
digital.
Kita hanya perlu menentukan titik-titik koordinat berupa longitude dan latitude dan
menempelkanya di google map, dan google map akan menyajikan data kita dalam
bentuk titik-titik dalam peta tersebut
Lantas bagaimana caranya menyajikan data ini menggunakan google map? Ada
beberapa hal yang diperlukan untuk keperluan GIS dengan menggunakan google
map. Diantaranya google map itu sendiri, data, dan karena google map merupakan
aplikasi berbasis web, maka kita memerlukan web server untuk keperluan ini.
Google Maps adalah layanan gratis Google yang cukup popular. Anda dapat
menambahkan fitur Google Maps dalam web Anda sendiri dengan Google Maps
API.
Google Maps API adalah library JavaScript. Menggunakan/memprogram Google
Maps API sangat mudah. Yand Anda butuhkan adalah pengetahuan tentang HTML
dan JavaScript, serta koneksi Internet
CARA KERJA GPS DAN PRINSIP MATEMATIKA
GPS (Global Positioning System) adalah suatu sistem untuk menentukan suatu titik di
permukaan bumi menggunakan teknologi satelit.
Prinsip kerja GPS mengadopsi prinsip matematika sederhana yang bernama
trilateration.
Bagaimana cara kerja prinsip tersebut ?
Misalnya anda tersesat di suatu tempat pada peta datar. Bagaimana cara anda
tahu dimana lokasi anda? Katakanlah ada seorang teman memberitahu anda bahwa
anda berada 5.52 KM dari Malioboro. Apakah anda tau sekarang anda berada
dimana? Meskipun belum jelas, tapi anda tahu anda berjarak 5.52 kilometer dari
Malioboro, walaupun anda belum tahu arah selatan barat timur atau utara dari
Malioboro.
Gambarlah lingkaran dengan skala 1:100 di peta dengan titik Maliboro berada di
tengah tengah lingkaran tersebut dengan jari-jari skala dari 5.52 km.
Selanjutnya bayangkan ada satu lagi teman anda yang memberi tahu lokasi anda
berada 10 KM dari Monumen Jogja Kembali. Gambar satu lagi lingkaran dengan
cara yang sama namun kali ini titik tengah berada di Monjali dengan jari-jari
lingkaran skala dari 10KM.
Apakah anda tahu dimana lokasi anda sekarang? belum? coba perhatikan kedua
lingkaran yang kita buat, apakah bertemu pada titik tertentu? ya kedua lingkaran
tersebut berpotongan di dua lokasi. Nah salah satu dari titik perpotongan lingkaran
ini adalah lokasi anda.
Tapi bagaimana cara kita mengetahui lokasi yang mana yang merupakan lokasi kita
sebenarnya? nah disinilah peran acuan ketiga. Sekarang umpamakan ada satu lagi
teman anda memberi tahu lokasi keberadaan anda adalah 10.44 KM dari Bandara.
Sekarang gambarlah lingkaran ketiga dengan metode yang sama dengan kedua
lingkaran sebelumnya dengan titik pusat lingkaran berada di Bandara dan jari-jari
lingkaran adalah skala dari 10.44 KM.
Apakah ketiga lingkaran tersebut berpotongan pada titik yang sama? Jika jarak
yang diberikan oleh ketiga teman anda kita asumsikan tepat, maka anda akan
melihat ketiga lingkaran tersebut bertemu di suatu titik yang sama. Nah inilah lokasi
anda.
Penjelasan di atas merupakan prinsip kerja dari trilateration, yang mana dapat
menentukan lokasi suatu titik dengan bantuan tiga titik yang telah diketahui yaitu
Malioboro, Monjali dan Bandara, serta jarak masing-masing titik ini ke lokasi
keberadaan anda.
Nah prinsip dasar inilah yang kemudian diterapkan pada penentuan lokasi anda di
permukaan bumi oleh GPS. Satelit GPS berperan sebagai 'teman' anda yang
memberitahu jarak anda dengan satelit tersebut. Dan seperti kasus di atas, anda
juga membutuhkan setidaknya 3 atau lebih satelit yang mengetahui atau dapat
dijangkau oleh penerima GPS atau GPS receiver milik anda.
Setidaknya ada 24 satelit yang mengelilingi bumi untuk dapat memenuhi syarat agar
minimal 4 Satelit dapat dijangkau dari setiap tempat di permukaan bumi pada
setiap saat.
DASAR PEMROGRAMAN WEB GIS DENGAN
GOOGLE MAP
CONTOH 1 – MENAMPILKAN PETA (GEOCODING)
CONTOH 2 – MENAMBAHKAN MARKER (DYNAMIC MAP)
CONTOH 3 – MENGGUNAKAN GM API KEY
Menampilkan kota Depok di file HTML (localhost) pada tag div berukuran 600 pixel
x 600 pixel. Bagaimana melakukannya?
Kita bisa mulai menulis program Google Map API dengan urutan sebagai berikut:
1. Memasukkan Maps API JavaScript ke dalam HTML kita.
2. Membuat element div dengan nama map_canvas untuk menampilkan peta.
3. Membuat beberapa objek literal untuk menyimpan property-property pada peta.
4. Menuliskan fungsi JavaScript untuk membuat objek peta.
5. Meng-inisiasi peta dalam tag body HTML dengan event onload.
CARA MEMPEROLEH GOOGLE MAPS API KEY
Perhatikan potongan script pada contoh 1 di atas
Kode yang dicetak tebal dan berwarna merah adalah Google Maps API key. Anda harus
mendaftar untuk mendapatkan key untuk website Anda, jika Anda ingin menampilkan peta
untuk website Anda di alamat https://developers.google.com/maps/signup?csw=1
Setelah mendaftar, termasuk memberikan alamat website Anda, Google akan memberi Anda
sebuah API key. Bentuknya kurang lebih seperti ini (tentu saja milik Anda nantinya akan
berbeda):
ABQIAAAA8tt4eKTuBZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0od
NPtk8VLkdrQF5grA
Key yang digunakan di atas digunakan untuk komputer local (untuk localhost). Jadi,
jika Anda ingin mencoba menulis program untuk dijalankan di komputer Anda sendiri,
sementara Anda bisa pakai key ini. Nanti kalau program sudah siap, baru perlu
mendaftar sendiri API key Anda, kemudian dipakai menggantikan API key contoh ini.
MENAMBAHKAN FUNGSI KLIK KANAN PADA PETA
Kita telah mengenal GIS dan mencoba membuat web gis sederhana untuk
menampilkan titik-titik koordinat tertentu di google map.
Selanjutnya kita dapat menambahkan fungsi tambahan pada web agar user dapat
menambahkan titik tertentu di peta dengan melakukan klik kanan pada peta
tersebut.
Marker yang baru
ditambahkan
Berdasarkan contoh sebelumnya, tambahkan baris berikut di paling bawah sebelum
tutup tag </script>
Selanjutnya kita perlu memanggil fungsi setAction(map); melalui fungsi initialize();
tempatkan baris code setAction(map); di bawah baris setMarkers(map,sites);
MENAMBAHKAN DAN MENAMPILKAN DATA DARI
DATABASE
MENAMBAHKAN RUTE DAN ARAH PADA PETA
GOOGLE