Tuesday, February 26, 2013

Membuat Geographic Information System (GIS) Sederhana dengan Google Map dan Ajax jQuery


Penulis : Desrizal

Terimakasih buat google yang menyediakan layanan google map sekaligus menyediakan API untuk membuat aplikasi-aplikasi menggunakan google map. Sekarang mari kita belajar membuat aplikasi GIS sederhana dengan menggunakan google map. Di artikel ini kita akan melihat bagaimana menampilkan google map di website kita, bagaimana menandai suatu lokasi, memberi nama, deskripsi kemudian menyimpannya ke dalam database. Dan bagaimana menampilkan kembali lokasi yang kita tandai tersebut ke google map sekaligus menampilkan deskripsinya.


Sekarang mari kita mulai membuat kode-kodenya


Pertama-tama mari kita buat tabel datagis di database yang nanti tempat kita menyimpan data lokasi. Berikut adalah struktur tabel datagis di database :

--
-- Table structure for table `datagis`
--

CREATE TABLE `datagis` (
  `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`)
);

Meloading Google Maps API
Untuk menampilkan google map di website kita adalah dengan memanfaatkan javascript API google map. Langsung aja kita lihat kode :
<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>

Kode di atas akan mengambil file javascript google maps api dan file css untuk google maps.

Elemen DOM Peta
Untuk nantinya menempatkan di mana kita letakkan google map diwebsite, kita perlu membuat elemen DOM, yaitu <div>, contoh :
<div id="petaku" style="width:600px; height:400px"></div>

Map Options
Ada beberapa option-option yang perlu di konfigurasi untuk menampilkan google map. Berikut contoh kodenya :
var belitung = new google.maps.LatLng(-2.801732, 107.6699666);
var petaoption = {
zoom: 9,
center: belitung,
mapTypeId: google.maps.MapTypeId.TERRAIN
};


Variabel belitung untuk menentukan titik awal lokasi mana yang ingin kita tampilkan pertama kali ketika menampilkan google map, dalam bentuk koordinat Latitudes dan Longitudes.

zoom, berguna untuk menentukan nilai zoom yang akan ditampilkan, semakin besar nilainya sebagai besar zoom petanya.

center, berguna untuk menentukan lokasi mana yang menjadi titik tengah peta ketika ditampilkan

mapTypeId, menentukan tipe peta yang akan ditampilkan di website kita, pilihan tipenya adalah : ROADMAP, SATELLITE, HYBRID, TERRAIN

Membuat dan Menampilkan Objek Peta
Setelah kita tentukan konfigurasi map yang akan kita tampilkan, maka kita buat objek map dan menampilkanya di elemen DOM yang telah kita buat sebelumnya.
peta = new google.maps.Map(document.getElementById("petaku"),petaoption);
Kode tersebut kita membuat objek google map, menempatkannya di elemen DOM yang mempunyai id "petaku" dan menggunakan petaoption yang telah kita tentukan sebelumnya.

Membaca Event Click
Setelah kita berhasil menampilkan google map di website, kita ingin apabila peta diklik, maka akan ada fungsi yang akan kita jalankan, misalnya fungsi kasihtanda()
google.maps.event.addListener(peta,'click',function(event){
kasihtanda(event.latLng);
});


Memberi Tanda di Google Maps
Pada kode membaca event click di atas kita menjalankan fungsi kasihtanda() untuk membuat tanda di google maps
function kasihtanda(lokasi){
tanda = new google.maps.Marker({
position: lokasi,
map: peta
});
}

Kode di atas akan membuat objek Marker, menentukan posisinya di mana, lokasi berupa koordinat Latitudes dan Longitudes yang di dapat ketika map di klik yaitu event.latLng, dan ditaruh di map yang mana, dalam hal ini adalah objek peta yang telah kita buat sebelumnya

Kode Lengkapnya
Setelah bingung melihat penjelasan di atas, langsung aja kita lihat kode lengkapnya untuk membuat aplikasi GIS kita. Di sini saya menggunakan jQuery untuk menyimpan dan menampilkan lokasi-lokasi yang telah disimpan. Silahkan baca tutorial pengenalan jQuery, Ajax jQuery 1 dan di sini

<html>
<head>
<title>Google Maps</title>
<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>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//google maps GIS by desrizal
//dibuat tanggal 9 Oktober 2010
var peta;
function peta_awal(){
    daftar_lokasi();
    var belitung = new google.maps.LatLng(-2.801732, 107.6699666);
    var petaoption = {
        zoom: 9,
        center: belitung,
        mapTypeId: google.maps.MapTypeId.TERRAIN
        };
    peta = new google.maps.Map(document.getElementById("petaku"),petaoption);
    google.maps.event.addListener(peta,'click',function(event){
        kasihtanda(event.latLng);
    });
}

function kasihtanda(lokasi){
    $("#form_lokasi").slideDown();
    $("#cx").val(lokasi.lat());
    $("#cy").val(lokasi.lng());
    tanda = new google.maps.Marker({
        position: lokasi,
        map: peta
    });
}

$(document).ready(function(){
    $("#simpan").click(function(){
        var koordinatx = $("#cx").val();
        var koordinaty = $("#cy").val();
        var nama = $("#namax").val();
        var des = $("#deskripsi").val();
        $("#loading").show();
        $.ajax({
            url: "simpanlokasi.php",
            data: "koordinatx="+koordinatx+"&koordinaty="+koordinaty+"&nama="+nama+"&des="+des,
            cache: false,
            success: function(msg){
                $("#teks").html(msg);
                $("#loading").hide();
                $("#form_lokasi").slideUp();
                $("#cx").val("");
                $("#cy").val("");
                $("#namax").val("");
                $("#deskripsi").val("");
            }
        });
    });
    
    $("#batal").click(function(){
        $("#form_lokasi").slideUp();
    });
});

function daftar_lokasi(){
    $('#teks').load('daftar_lokasi.php');
}

function setpeta(x,y,id){
    var lokasibaru = new google.maps.LatLng(x, y);
    var petaoption = {
        zoom: 9,
        center: lokasibaru,
        mapTypeId: google.maps.MapTypeId.TERRAIN
        };
    peta = new google.maps.Map(document.getElementById("petaku"),petaoption);
    tanda = new google.maps.Marker({
        position: lokasibaru,
        map: peta
    });
    var idnya = "#"+id;
    var isistring = $(idnya).html();
    var infowindow = new google.maps.InfoWindow({
        content: isistring
    });
    google.maps.event.addListener(tanda, 'click', function() {
      infowindow.open(peta,tanda);
    });
    google.maps.event.addListener(peta,'click',function(event){
        kasihtanda(event.latLng);
    });
}
</script>
</head>
<body onload="peta_awal()">
<center>
<div id="petaku" style="width:600px; height:400px"></div>
<div id="form_lokasi" style="display:none;background-color:yellow;width:600px;height:200px;text-align:left;padding:10px">
Koordinat : <br>X<input type=text name=latlng id=cx size=25>, Y<input type=text name=latlngy id=cy size=25><br>
Nama Lokasi : <br><input type=text name="nama" id="namax"><br>
Desrkripsi :<br>
<textarea cols=20 rows=5 name="deskripsi" id="deskripsi"></textarea><br>
<button id="simpan">Simpan</button>
<button id="batal">Batal</button>
<img src="ajax-loader.gif" style="display:none" id="loading">
</div>
<div style="text-align:left;width:600px">
<h4>Daftar lokasi yang tersimpan</h4>
<div id=teks></div>
</div>
</body>
</html> 


Kode PHP untuk menyimpan ke dalam database, simpanlokasi.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("test");

$koordinatx = $_GET['koordinatx'];
$koordinaty = $_GET['koordinaty'];
$nama = $_GET['nama'];
$des = $_GET['des'];

$masuk = mysql_query("insert into datagis values(null,$koordinatx,$koordinaty,'$nama','$des')");
if($masuk){
    $lokasi = mysql_query("select * from datagis");
    while($l=mysql_fetch_array($lokasi)){
        echo "<a href=\"javascript:setpeta(".$l['x'].",".$l['y'].",".$l['nomor'].")\">".$l['namalokasi']."</a><br>\n";
        echo "<span id=\"".$l['nomor']."\" style=\"display:none\">".$l['deskripsi']."</span>\n";
    }
}else{
    echo "gagal";
}
?>


Kode PHP untuk menampilkan daftar nama lokasi yang telah tersimpan ke dalam database, daftar_lokasi.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("test");

$lokasi = mysql_query("select * from datagis");
while($l=mysql_fetch_array($lokasi)){
    echo "<a href=\"javascript:setpeta(".$l['x'].",".$l['y'].",".$l['nomor'].")\">".$l['namalokasi']."</a><br>\n";
    echo "<span id=\"".$l['nomor']."\" style=\"display:none\">".$l['deskripsi']."</span>\n";
}
?>

Jangan lupa koneksi ke internet ketika mencoba program ini
Download Source Code

----
Sumber : http://blog.codingwear.com/baca.php?no=21#komentar

Artikel Terkait

0 comments: