Geographic Information System (GIS) atau dalam bahasa indonesia adalah Sistem Informasi Geografis (SIG) merupakan sistem informasi khusus dalam mengelola suatu data yang mempunyai informasi spasial (bereferensi keruangan). Dengan perpaduan Google Map dan Ajax jQuery akan menghasilkan GIS sederhana yang akan memberikan informasi tentang letak lokasi-lokasi yang ditandai, nama, serta diskripsi untuk tempat-tempat tertentu untuk menjadi tujuan` rekreasi, ibadah dan lain sebagainya yang disimpan dalam database. jQuery pada website GIS berfungsi untuk menyimpan dan menampilkan lokasi-lokasi yang telah disimpan setelah memberikan nama dan deskripsi pada lokasi yang ditandai.
Pada artikel ini akan memberikan
pengetahuan bahwa GIS sederhana dapat dibuat dengan Google Map dan Ajax Jquery,
dengan cara sebagai berikut :
1. Membuat sebuah database dengan menggunakan
My SQL
Buat database dengan nama “test”
dengan nama tabel “datagis” dan membuat kolom yaitu `nomor` int(5) NOT NULL
auto_increment, `x` decimal(8,5) NOT
NULL, `y` decimal(8,5) NOT NULL, `namalokasi` varchar(100) NOT NULL, `deskripsi` text NOT NULL, PRIMARY KEY
(`nomor`).
2. Meloading Google Maps API
Pada website GIS nantinya akan
menggunakan dan menampilkan google map sebagai media yang dapat digunakan untuk
membuat suatu lokasi ditandai dengan memanfaatkan javascript API google Map.
<link
href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css"
rel="stylesheet" type="text/css" />
<script
type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
3. Elemen DOM Peta untuk tampilan google map
pada website
Google MAP yang ingin kita masukkan
pada website nantinya perlu kita atur penempatannya, sehingga perlu membuat
elemen DOM yaitu <div> :
<div
id="petaku" style="width:700px;
height:400px"></div>
4. Map Option (Titik awal Peta Muncul)
Pada bagian ini kita dapat mengatur
lokasi pertama kali muncul atau titik awal peta dimunculkan.
var kalsel = new
google.maps.LatLng(-2.801732, 107.6699666);
var petaoption = {
zoom: 9,
center: kalsel,
mapTypeId:
google.maps.MapTypeId.TERRAIN
};
Variabel kalsel menentukan titik awal
lokasi yang menjadi tampilan pertama kalinya pada google map dalam betuk
lalitudes dan longitudes.
Zoom yang terdapat pada coding berfungsi
untuk seberapa besar tampilan, makin besar nilainya makin zoom atau besar
petanya.
Center berfungsi menentukan lokasi
yang menjadi titiktengah peta dan tampilan akan menyesuaikan dengan lokasi
ditengah.
MapTypeld menentukan tipe yang dapat
ditampilkan pada website yaitu pilihannya Peta dan Satelite.
5. Membuat dan Menampilkan Objek Peta
Konfigurasi map yang sebelumnya suda
dibuat, selanjutnya kita buat objek map dan menampilkannya pada elemen DOM yang
sudah dibuat sebelumnya.
peta = new
google.maps.Map(document.getElementById("petaku"), petaoption);
Coding diatas membuat objek google
map dan menempatkannya pada elemen DOM yang mempunyai id “petaku” serta
menggunakan pertaoption yang telah kita tentukan sebelumnya.
6. Membaca Event Klik
Event klik disini memiliki fungsi
agar kita dapat menentukan lokasi yang kita tenukan diberikan nama dan
deskripsi apa. Event klik kita buat dalam sebuah fungsi.
google.maps.event.addListener(peta,'click',function(event){
kasihtanda(event.latLng);
});
7. Memberi tanda di google MAP
Coding yang sudah dibuat membaca
event klik daitas dapat kita jalankan fungsi kasihtanda() untuk membuat di
google map.
function
kasihtanda(lokasi){
tanda = new
google.maps.Marker({
position: lokasi,
map: peta
});
}
Coding diatas untuk membuat objek
ditandai (marker), lokasi itu dimana,
lokasi berbentuk koordinat yang didapat ketika map diklik yaitu event lat.Lng,
dan ditaruh pada map yang mana.
Berikut tampilan website seperti yang
sudah dijelaskan diatas :
 |
| Gambar 1. Tampilan awal web saat dijalankan, dengan lokasi awal yaitu kalimantan selatan |
 |
| Gambar 2. Tampilan menentukan lokasi dan memberikan nama dan deskripsi untuk lokasi tersebut. |
 |
| Gambar 3. Tampilan saat memilih pada daftar lokasi yang tersimpan yaitu memilih Tanah Grogot yang terdapat di kalimantan timur dan jika mengklik pada icon merah maka deskripsi akan muncul |
0 komentar :
Posting Komentar