MODUL 5 MENAMPILKAN PETA

MODUL 5

MENAMPILKAN PETA

1. Indikator

Praktikan dapat menampilkan peta dan menampilkan data dari database.

2. Tujuan

Praktikan mendapatkan pengetahuan tentang cara yang dibutuhkan untuk membangun

sebuah webGIS.

3. Perangkat Lunak

a. PostgreSql

b. Notepad++/ Sublime Text

c. Ms4w/XAMPP

4. Teori

A. API Key

API (Application programming interface) adalah fungsi-fungsi pemrograman yang

disediakan oleh aplikasi atau layanan agar layanan tersebut bisa diintegrasikan dengan

aplikasi yang kita buat. Untuk penggunaan API biasanya setiap pemilik layanan

memberikan kode tertentu untuk bisa mengakses layanan tersebut, Salah satu pemilik

layanan yang ada dan yang akan kita pakai adalah Google dengan API Key Google.

API Key yang dipergunakan pada Google Map untuk membuat webGIS didasarkan dari kode kunci yang dibuat dari akun Google sendiri.API Key pada Google sebenarnya merupakan bagian dari bisnis. Google menyediakan perizinan standar ( harga gratis, penggunaan API Key tanpa batas waktu namun perhari dibatasi dengan maksimal penggunaan 1000 permintaan (default) hingga 150000 permintaan (setelah validasi kartu kredit) dan premium (harga tergantung besar penggunaan data dan atau permintaan).

Penggunaan API dibedakan menjadi 3 jenis:

1.

Android

2.

IOS

3.

WEB

Google API pada library-nya memiliki lebih dari 100 jenis dalam 8 kelompok besar yang masing masing memiliki minimal 3 jenis API. Kelompok API yang kita gunakan adalah Google Maps APIs.

B. Data Geometri

Pada saat kita menyimpan data kolom geometri pada sebuah tabel di dalam basis data PostgreSql sebelumnya, sebenarnya kita juga telah menyimpan koordinat geografis yang sesungguhnya dengan format WKB (Well Known Binary). Format WKB ditentukan oleh Open GIS

Consortium (OGC) yang mendefinisikan informasi objek spasial GIS (titik, garis, poligon, dll).

Postgis yang kita gunakan sebelumnya adalah alat untuk menganalisa data geometri dengan format umum .shp dan .dbf sekaligus sebagai penerapan basis data spasial pada PostgreSql. Fungsi Postgis untuk menganalisa dan mengolah data saat ini sudah cukup banyak dan akan terus berkembang.

Fungsi Spasial

Data geometri dari basis data memerlukan fungsi spasial untuk pengolahannya. Basis data spasial yang menyediakan fitur fungsi analisis data dapat dikelompokkan menjadi 5 kategori, yaitu:

1. Konversi: untuk konversi data geometri dan data eksternal.

2. Manajemen: untuk pegelolaan informasi tabel spasial dan administrasi Postgis. 3. Retrieval: pengambilan dan pengukuran geometri.

4. Perbandingan: pembandingan dua geometri melalui hubungan spasial. 5. Generasi: geometri baru.

Beberapa fungsi geometri Postgis ditampilkan pada Tabel 1. TABEL 1. Fungsi Postgis

Fungsi Pengolahan AddGeometryColumn(<schema_name>,

<table_name>, <column_name>, <srid>, <type>, <dimension>)

Menambah kolom geometri pada tabel yang sudah ada

DropGeometryColumn(<schema_name>, <table_name>, <column_name>)

Menghapus kolom geometri

Fungsi pemrosesan

ST_centroid(geometry) Mengembalikan geometri sebagai titik poin ST_Area(geometry) Mengembalikan sebuah area data ke bentuk

awalnya (untuk polygon dan multi-polygon) Fungsi Akses

ST_AsText(geometry) Mengembalikan data geometri ke bentuk teks. ST_AsBinary(geometry) Mengembalikan data geometri ke bentuk

binary.

ST_EndPoint(geometry) _{Membuat titik poin akhir dari Linestring} menjadi titik tunggal.

ST_StartPoint(geometry) _{Membuat titik poin awal dari Linestring} menjadi titik tunggal.

ST_GeometryType(geometry) Mengembalikan tipe geometri sebagai string. ST_X _{Mengambil data geometri koordinat X} ST_Y Mengambil data geometri koordinat Y ST_Z Mengambil data geometri koordinat Z, Null

jika tidak ada.

ST_M _{Mengambil data geometri koordinat M, Null} jika tidak ada.

Geometri konstruktor

ST_GeomFromText(text,[<srid>]) Membuat data geometri yang dari bentuk WKT oleh SRID.

ST_LinestringFromText(text,[<srid>]) Membuat data geometri yang dari bentuk WKT oleh SRID namun dalam tipe garis bersambung. Jika tidak ada SRID, otomatis menjadi -1.

ST_PolygonFromText(text,[<srid>]) Membuat data geometri yang dari bentuk WKT oleh SRID namun dalam tipe poligon. Jika tidak ada SRID, otomatis menjadi -1. Output Geometri

ST_AsGeoJson([version], geometry, [precision], [options])

Mengambil data geometri sebagai elemen GeoJSON (geometry Javascript Object

Notation)

C. SQL

Pembelajaran SQL dari sebelumnya dilanjutkan dengan mengkhususkan pada Query untuk menampilkan data geometri. Penerapan kali ini adalah bagaimana menerapkan hasil Query untuk bisa diintegrasikan dengan array pada Javascript nantinya.

Untuk SQL tahap ini kita akan menyuntikkan fungsi tipe spasial (ST) yang berasal dari Postgis.

*catatan: query bekerja pada bahasa pemograman server dan pada php terdapat 89 fungsi untuk pengolahan data SQL khusus untuk PostgreSQL

*catatan: SQL termasuk sebuah Bahasa pemograman yang standar untuk basis data.

Contoh penggunaan SQL: pg_query(“SELECT row_to_json(fc)

FROM ( SELECT 'FeatureCollection' As type, array_to_json(array_agg(f)) As features FROM (SELECT 'Feature' As type , ST_AsGeoJSON(geog)::json As geometry

, row_to_json((SELECT l FROM (SELECT gid, nama, field3, field4) As l )) As properties

Keterangan:

- pg_query: untuk menjalankan query pada PHP.

- ST_AsGeoJson(geog): geog merupakan kolom geometri dari tabel PostgreSQL, lalu diubah menjadi data JSON oleh ST_AsGeoJson.

- SELECT gid, nama, field3, field4: gid, nama, field3, dan field4 merupakan kolom pada tabel PostgreSQL sebagai data non-spasial.

- Table_unand: nama tabel PostgreSQL.

D. Javascript

Kelanjutan pejelasan dari modul 4, kali ini kita fokuskan untuk dokumen HTML dari Javascript. DOM (Document Object Model) dibentuk untuk inisiasi objek dokumen HTML. Dengan model objek ini Javascript dapat dengan leluasa memanipulasi dokume HTML agar menjadi HTML dinamis. DOM adalah standar untuk W3C (World Wide Web Consortium).

DOM untuk menemukan elemen HTML:

1. Document.getElementById(“”): menemukan id pada dokumen HTML.

2. Document.getElementsByTagName(“”): menemukan dokumen HTML dengan nama yang dituliskan.

3. Document.getElementsByClassName(“”): menemukan nama class yang ditulis pada dokumen HTML.

E. AJAX

AJAX (Asynchronous JavaScript and XML) adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. AJAX dibentuk dari beberapa kombinasi, yaitu:

1. DOM yang diakses dengan client side scripting language. 2. Objek XMLHTTP dari Microsoft atau XMLHttpRequest . 3. XML

4. JSON

F. JQUERY

JQuery adalah sebuah library yang dibangun dengan menggunakan JavaScript untuk mengautomasi dan menyederhanakan perintah-perintah umum. Meskipun ada banyak library lain semacamnya, namun Jquery jauh lebih populer karena kemampuannya untuk menjalankan perintah pada peramban lama. Jquery berjalan pada browser bersamaan dengan JavaScript biasa. Ia terutama dipergunakan untuk animasi dan AJAX.

G. JSON

JSON (JavaScript Object Notation) adalah sebuah standar terbuka berbasis teks yang dirancang untuk pertukaran data yang bersifat human-readable (bisa dibaca). JSON berasal dari bahasa pemrograman Javascript untuk mempresentasikan struktur data sederhana dari array asosiatif yang disebut dengan objek.

JSON dibangun dalam dua struktur ;

1. Beberapa pasangan dari nama/nilai. Dalam beberapa bahasa pemrograman biasa disebut dengan istilah object, record, struct, hash table, key list atau associative array.

2. Nilai-nilai yang tersusun secara ordered list. Biasa disebut dengan array, vektor, atau daftar dalam bahasa pemrograman.

JSON pada PHP 1. Json_encode

Untuk merubah array ke dalam bentuk json 2. Json_decode

Untuk merubah bentuk json ke bentuk array

5. Cara Praktikum

Pembuatan API Key

1.

Masuklah melalui email google terlebih dahulu

2.

Buat atau pilih sebuah proyek

3.

Aktifkan Google Maps JavaScript API

4.

Dapatkan kunci API dengan

masuk ke halaman https://console.developers.google.com/apis/library

5.

Jadi jika ingin mempergunakan peta google map, lakuakan pendaftaran penggunaan mapping di google. Jadi kita harus memiliki akun google (pendaftaran email google).

6.

Pilih google maps API untuk javascript!

7.

Setelah itu buat projek baru dan ikuti instruksi website Google.

Halaman Peta WebGIS

1. Script dasar peta webGIS:

<!DOCTYPE html> <html> <head> <style> #map { height: 400px;

width: 100%; }

</style> </head> <body>

<h3>My Google Maps Demo</h3> <divid="map"></div>

<script>

function initMap() {

var uluru = {lat: -25.363, lng: 131.044};

var map = new google.maps.Map(document.getElementById('map'), { zoom: 4,

center: uluru });

var marker = new google.maps.Marker({ position: uluru,

map: map });

} </script>

<scriptasyncdefer

src="https://maps.googleapis.com/maps/api/js?key= YOUR_API_KEY &callback=initMap"> </script>

</body> </html>

2. Tukar tulisan “YOUR_API_KEY” dengan API Key yang didapatkan.

Geolokasi

1. Script dasar geolokasi:

<script>

// Note: This example requires that you consent to location sharing when // prompted by your browser. If you see the error "The Geolocation service // failed.", it means you probably did not give permission for the browser to // locate you.

function initMap() {

var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644},

});

var infoWindow = new google.maps.InfoWindow({map: map});

// Try HTML5 geolocation. if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) { var pos = {

lat: position.coords.latitude, lng: position.coords.longitude };

infoWindow.setPosition(pos);

infoWindow.setContent('Location found.'); map.setCenter(pos);

}, function() {

handleLocationError(true, infoWindow, map.getCenter()); });

} else {

// Browser doesn't support Geolocation

handleLocationError(false, infoWindow, map.getCenter()); }

}

function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos);

infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' :

'Error: Your browser doesn\'t support geolocation.'); }

</script>

2.

Masukkan ke halaman peta WebGIS.

Poligon

1. Script dasar memasukkan poligon ke webGIS:

var map = new google.maps.Map(document.getElementById('map'), { zoom: 6,

center: {lat: -33.872, lng: 151.252}, });

// Define the LatLng coordinates for the outer path. var outerCoords = [

{lat: -32.364, lng: 153.207}, // north west {lat: -35.364, lng: 153.207}, // south west {lat: -35.364, lng: 158.207}, // south east {lat: -32.364, lng: 158.207} // north east ];

// Define the LatLng coordinates for an inner path. var innerCoords1 = [ {lat: -33.364, lng: 154.207}, {lat: -34.364, lng: 154.207}, {lat: -34.364, lng: 155.207}, {lat: -33.364, lng: 155.207} ];

// Define the LatLng coordinates for another inner path. var innerCoords2 = [ {lat: -33.364, lng: 156.207}, {lat: -34.364, lng: 156.207}, {lat: -34.364, lng: 157.207}, {lat: -33.364, lng: 157.207} ];

map.data.add({geometry: new google.maps.Data.Polygon([outerCoords, innerCoords1,

innerCoords2])})

2. Masukkan ke dalam fungsi initMap() yang ada pada script geolokasi.

Menampilkan isi tabel dari basis data

1. Gunakan script contoh penggunaan SQL pada halaman 3 (teori SQL) dan ubah

kolom geog dengan kolom geometri pada tabel geometri yang anda miliki, ubah juga

isi kolom dan nama tabelnya.

2. Masukkan script tersebut pada halaman koneksi yang telah dibuat berdasarkan tugas

modul 4.