MODUL 5 MENAMPILKAN PETA 1. Indikator Praktikan dapat

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>,
Menambah kolom geometri pada tabel yang
<table_name>,
sudah ada
<column_name>,
<srid>,
<type>, <dimension>)
DropGeometryColumn(<schema_name>,
Menghapus kolom geometri
<table_name>, <column_name>)
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, Mengambil data geometri sebagai elemen
[precision], [options])
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
FROM table_unand As lg ) As f ) As fc;”);
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>
<div id="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>
<script async defer
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},
zoom: 6
});
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.