Scribd Logo
Unggah

Selamat datang di Scribd!

  • Tugas 4 - Menampilkan Pada Peta

    Diunggah oleh

    Oka Made
    42 tayangan6 halaman

    Judul Asli

    Tugas 4 - Menampilkan Pada Peta .docx

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    42 tayangan6 halaman

    Tugas 4 - Menampilkan Pada Peta

    Diunggah oleh

    Oka Made

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    SISTEM INFORMASI GEOGRAFIS WEB DAN MOBILE

    TUGAS IV
    MENAMPILKAN DATA PADA DATABASE KE DALAM PETA




    Oleh :


    I Made Oka Mahendra Putra (1104505068)







    JURUSAN TEKNOLOGI INFORMASI
    FAKULTASTEKNIK UNIVERSITAS UDAYANA
    BUKIT JIMBARAN
    Maret 2014

    SOAL
    Menampilkan data dari database berdasar koordinat yang diperoleh sebelumnya
    dengan menggunakan Google Maps API.

    PENYELESAIAN
    Dalam menampilkan data ke dalam peta menggunakan Google Maps API,
    hendaknya terkoneksi dengan internet karena peta dan data koordinat diperoleh dari
    sana.
    Struktur data pada database sebelumnya adalah sebagai berikut.

    Gambar 3.1 Isi Data Tabel tb_gis

    Hal yang dilakukan pada tugas kali ini adalah menampilkan data yang ada pada
    database seperti ditunjukkan pada gambar 3.1. Data tersebut akan terlihat pada peta
    sesuai dengan koordinat yang telah tersimpan dalam database, data tersebut ditandai
    dengan marker pada peta. Jika marker tersebut di klik maka akan muncul info window,
    atau keterangan yang terdapat pada marker tersebut.
    Untuk pertukaran data tetap menggunakan JSON. Koneksi terhadap database
    teah dipaparkan sebelumnya pada tugas 2. Script halaman utama akan ditunjukkan pada
    kode program 3.1.
    <html>
    <head>
    <title>Menampilkan Peta</title>
    <script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></s
    cript>
    <script src="jquery.js"></script>
    <script src="jmaps.js"></script>
    </head>
    <body>
    <table border="10" id="mytable">

    <tr><td>Id</td><td>Latitude</td><td>Longitude</td><td>Nama
    Pemilik</td><td>Alamat</td><td>Telepon</td></tr>
    </table>
    <br />
    <script type="text/javascript">
    $.get('data.php',function(output){
    for(i=0;i<output.length;i++){
    if(i%2 == 0){
    $('<tr
    bgcolor=#cacafc><td>'+output[i].id+'</td><td>'+output[i].latitude+'</t
    d><td>'+output[i].longitude+'</td><td>'+output[i].nama_pemilik+'</td><
    td>'+output[i].alamat+'</td><td>'+output[i].tlp+'</td></tr>').appendTo
    ('#mytable');
    }else{

    $('<tr><td>'+output[i].id+'</td><td>'+output[i].latitude+'</td><
    td>'+output[i].longitude+'</td><td>'+output[i].nama_pemilik+'</td><td>
    '+output[i].alamat+'</td><td>'+output[i].tlp+'</td></tr>').appendTo('#
    mytable');
    }
    }
    },'json');
    </script>
    <div id="map-canvas" style="height: 600px; width:
    700px"></div>
    </body>
    </html>
    Kode Program 3.1 Halaman Utama Web

    Dalam memeperoleh data dari database menggunakan web service. Kode
    program 3.2 adalah script-nya.
    <?php
    include("db.php");
    if(isset($_REQUEST['r'])=="alamat"){
    //echo $_REQUEST['lat']." ".$_REQUEST['lng'];
    //membulatkan angka pada koordinat latitude
    $latitude = $_REQUEST['lat'];
    $lat = $latitude*1000000;
    $round_lat = round($lat);
    $final_lat = $round_lat/1000000;

    //membulatkan angka pada koordinat longitude
    $longitude = $_REQUEST['lng'];
    $long = $longitude*1000000;
    $round_long = round($long);
    $final_long = $round_long/1000000;

    $response = mysql_query("SELECT alamat, nama_pemilik,
    tlp FROM tb_gis WHERE latitude = ".$final_lat." AND longitude =
    ".$final_long);
    $arr = array();
    if($response){
    while ($a = mysql_fetch_assoc($response)) {
    $arr[]=$a;
    }
    //print_r($arr);
    echo "Nama : ".$arr[0]['nama_pemilik']."
    Alamat : ".$arr[0]['alamat']."
    No.tlp : ".$arr[0]['tlp'];
    }else{
    die("Query bermasalah. ".mysql_error());
    }
    }else{
    $sql ="SELECT * FROM tb_gis";
    $query_select = mysql_query($sql);
    if(!$query_select){
    die("Kesalahan query. ". mysql_error());
    }
    while($data = mysql_fetch_assoc($query_select)){
    $objek[]=$data;
    }
    print(json_encode($objek));
    }

    ?>
    Kode Program 3.2 Web Service

    Halaman utama tersebut yang akan menjadi tempat peta itu muncul beserta
    marker-marker yang dibuat sesuai dengan data pada database. Script javascript terpisah
    dengan halaman utama, hanya dihubungkan menggunakan link file. Script javascript ini
    berisi tentang me-load data menggunakan JSON, menampilkan data terhadap peta
    sesuai koordinat, opsi peta, pembuatan marker beserta info window saat di klik.
    $(document).ready(function() {
    var mapOptions = {
    zoom : 7,
    center : new google.maps.LatLng(-6.023195, 117.060103),
    };
    var maps = new google.maps.Map(document.getElementById('map-
    canvas'), mapOptions);
    var arrMarkers = [];
    $.get('data.php', function(output) {
    for (i = 0; i < output.length; i++) {
    var marker = new google.maps.Marker({
    position : new
    google.maps.LatLng(output[i].latitude, output[i].longitude),
    map : maps
    });

    google.maps.event.addListener(marker, 'click',
    function(event){
    for(j = 0; j < arrMarkers.length; j++){
    if(arrMarkers[j].getPosition() ==
    event.latLng){

    $.get('data.php?r=alamat&lat='+event.latLng.lat()+'&lng='+event.
    latLng.lng(),function(output){
    alert(output);
    });
    break;
    }

    }
    });
    arrMarkers.push(marker);
    }
    },'json');
    });

    Kode Program 3.3 Script Menampilkan Data Pada Peta (jmaps.js)

    Pada script yang ditunjukkan pada kode program 3.3 awal tahap yang dilakukan
    adalah mengeset opsi peta yang akan dimunculkan, jika sudah maka tahap selanjutnya
    adalah menampilkan berdasar id yang bertindak sebagai canvas. Tahap selanjutnya
    adalah melakukan looping sebanyak data yang di-load terhadap database menggunakan
    JSON. Dalam menampilan nama pemilik, alamat dan no telepon pada halaman HTML
    menggunakan alert. Data diperoleh dari web service.

    Hasil uji coba terhadap script javascript pada kode porgram 3.3 akan
    diperlihatkan pada gambar 3.3.

    Gambar 3.2 Hasil Uji Coba Terhadap Peta

    Pada gambar 3.2 diperlihatkan bahwa data tersebut akan di perlihatkan ke dalam
    peta berdasar koordinat yang terdapat pada database sesuai dengan penjelasan
    sebelumnya. Terdapat multi marker pada peta sesuai dengan row pada database yang
    di-load berdasar query select yang diberikan. Ketika diklik pada marker maka akan
    muncul keterangan seperti nama pemilik rumah, alamat dan nomor telepon pada alert.

    Anda mungkin juga menyukai