MEMBANGUN WEB-based GIS DENGAN GOOGLE MAPS API

OUTLINE Dasar Pemrograman Web GIS dengan Google Cara kerja GPS dan prinsip Matematika Cara memperoleh Google Maps API key Menambahkan fungsi klik kanan pada peta Google Maps API Javascript (dynamic map) Menambahkan dan menampilkan data dari database Menambahkan rute dan arah pada peta google

The World Wide Web Clients Servers Communication Networks Server 12.10.2017 The World Wide Web Clients Servers Communication Networks Server Client

Clients Applications that run on computers Rely on servers for 12.10.2017 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 Manage Resources 12.10.2017 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 12.10.2017 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 What is a Google Map? Maps.google.com - interactive street, satellite, terrain maps and more. 12.10.2017 What is a Google map? Go to maps.google.com: and there is an interactive map interface 7

What is Google Maps? An enormous amount of searchable geographic information (gazetteer) A way of organizing the worlds information geographically 12.10.2017 Mymaps – custom maps to share with anyone. Ability to add points, with information embedded within. Polygons possible too. 8

What is a Google Map. Maps. google What is a Google Map? Maps.google.com > MyMaps – create custom maps to share. 12.10.2017 Mymaps – custom maps to share with anyone. Ability to add points, with information embedded within. Polygons possible too. 9

What is a Google Map? Google MyMaps – customize maps with user created enhancements. 12.10.2017 Mymaps – custom maps to share with anyone. Ability to add points, with information embedded within. Polygons possible too. 10

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) 12.10.2017 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 Windows, Facebook, Myspace 12

12.10.2017 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. Windows, Facebook, Myspace 13

What is a Mashup MyWebPage + Google Map + Other web service(s) 12.10.2017 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) Windows, Facebook, Myspace 14

Google Map mashups examples: embeddable and customizable 12.10.2017 Mymaps – custom maps to share with anyone. Ability to add points, with information embedded within. Polygons possible too. 15

Google Maps, Mashups, and Google Earth Differences and similarities 12.10.2017 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. 16

Google Maps, Mashups, and Google Earth Which one to use? 12.10.2017 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. 17

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