Home > World Of ICT > WebGIS using Google Map Api , XML, Mysql, JavaScript, PHP, HTML

WebGIS using Google Map Api , XML, Mysql, JavaScript, PHP, HTML


Saya akan kembali berbagi pengalaman kepada para pembaca blog yang Budiman,  mengenai pengalaman coding/ngoprek WebGIS berbasis Google MAP, case yang saya miliki kira kira seperti ini;

  • Saya memiliki sekumpulan data tentang pusat layanan kesehatan di Kota Bandar Lampung.
  • Data terdiri dari NamaLayanan, Telp, Alamat, Koordinat Latitude/Longitude, Foto Profil, Video Profil.
  • Saya ingin data yang saya miliki disimpan dalam database MySQL.
  • Saya ingin agar data MySQL tadi dapat digunakan juga secara terbuka oleh aplikasi lain via WebService dengan teknologi XML.
  • Saya ingin agar semua informasi terpetakan dengan baik pada sebuah portal website informatif.
  • Saya ingin agar ada icon gambar pembeda antara layanan rumah sakit dan klinik.
  • Saya ingin agar posisi letak object layanan kesehatan dapat diketahui secara detail pada Peta Digital Online.
  • Peta yang disajikan juga dapat memunculkan Foto/Gambar profil, serta Video Profil yang dapat ditayangkan langsung pada aplikasi.
  • Saya gak pengen pakai model programming yang ribet

Dari sekian banyak requirement yang sudah ada kita coba cari solusinya dengan memanfaatkan teknologi  Google Map Api , XML, Mysql, JavaScript, HTML.  Langsung saja saya bahas step by step bagaimana penyelesaiannya.

Pastikan bahwa Web Server anda sudah terinstall dengan baik, lengkap dengan Database MySQL yg akan digunakan sebagai tempat menyimpan data.

  • Buat Database baru sesuai dengan requirement yang ada (misal database webgis)
  • Buat Table baru pada database webgis
  • DROP TABLE IF EXISTS `fasilitas`;
    CREATE TABLE `fasilitas` (
     `id` int(11) NOT NULL AUTO_INCREMENT,
     `name` varchar(60) NOT NULL,
     `address` varchar(80) NOT NULL,
     `lat` float(10,6) NOT NULL,
     `lng` float(10,6) NOT NULL,
     `type` varchar(30) NOT NULL,
     `image` varchar(40) DEFAULT NULL,
     `telp` varchar(20) DEFAULT NULL,
     `fasilitas` varchar(100) DEFAULT NULL,
     `video` varchar(300) DEFAULT NULL,
     `web` varchar(200) DEFAULT NULL,
     PRIMARY KEY (`id`)
     ) ENGINE=MyISAM AUTO_INCREMENT=53 DEFAULT CHARSET=latin1;
  • Insert data ke dalam tabel yang sudah dibuat, contoh dibawah adalah 3 data yang akan di entri;
  • INSERT INTO `fasilitas` VALUES ('1', 'Balai Pengobatan Lanal Lampung, Kota Bandar Lampung, Lampung', 'Bandar Lampung', '-5.480050', '105.324883', 'klinik', 'http://webgis.unila.ac.id/img/klinik.jpg', '0721-xxx-yy', 'Ruang Klinik', 'http://www.youtube.com/embed/YT01kPaOBSA?autoplay=1', null);
    INSERT INTO `fasilitas` VALUES ('2', 'Bidan Irmayani, Kota Bandar Lampung, Lampung, IDN', 'Bandar Lampung', '-5.382550', '105.233597', 'klinik', 'http://webgis.unila.ac.id/img/klinik.jpg', '0721-xxx-yy', 'Ruang Klinik', 'http://www.youtube.com/embed/YT01kPaOBSA?autoplay=1', null);
    INSERT INTO `fasilitas` VALUES ('51', 'Uptd Balai Laboraorium Kesehatan, Kota Bandar Lampung, Lampu', 'Bandar Lampung', '-5.400960', '105.257889', 'rumahsakit', 'http://webgis.unila.ac.id/img/rs1.jpg', '0721-xxx-yy', 'Ruang Operasi Terpadu', 'http://www.youtube.com/embed/PSbvtjciAxY?autoplay=1', null);
  • Buat Driver PHP agar membaca database yang sudah dibuat tadi, dengan source code phpsqlajax_dbinfo.php  sbb;
  • <?php
    $username="root";
    $password="sukasukagueaja";
    $database="webgis";
    ?>
  • Buat program PHP phpsqlajax_genxml2.php , membaca data dari MySQL lalu mengkonversinya dalam format XML
  • <?php
    require("phpsqlajax_dbinfo.php");
    function parseToXML($htmlStr)
    {
    $xmlStr=str_replace('<','<',$htmlStr); $xmlStr=str_replace('-->','>',$xmlStr);
    $xmlStr=str_replace('"','"',$xmlStr);
    $xmlStr=str_replace("'",''',$xmlStr);
    $xmlStr=str_replace("&",'&',$xmlStr);
    return $xmlStr;
    }
    // Buka Koneksi ke Database MySQL
    $connection=mysql_connect ('localhost', $username, $password);
    if (!$connection) {
      die('Not connected : ' . mysql_error());
    }
    // Set Active MySQL
    $db_selected = mysql_select_db($database, $connection);
    if (!$db_selected) {
      die ('Can\'t use db : ' . mysql_error());
    }
    // Query memilih Table Fasilitas
    $query = "SELECT * FROM fasilitas WHERE 1";
    $result = mysql_query($query);
    if (!$result) {
      die('Invalid query: ' . mysql_error());
    }
    header("Content-type: text/xml");
    // Memulai membuat XML File Marker
    echo '';
    // Iterasi dari semua row yang ada pada MySQL, dan mencetaknya line per line
    while ($row = @mysql_fetch_assoc($result)){
      // Cetak XML
      echo '<marker ';="" echo="" 'name="' . parseToXML($row['name']) . '" 'address="' . parseToXML($row['address']) . '" 'lat="' . $row['lat'] . '" 'lng="' . $row['lng'] . '" 'type="' . $row['type'] . '" 'image="' . $row['image'] . '" 'telp="' . $row['telp'] . '" 'fasilitas="' . $row['fasilitas'] . '" 'video="' . $row['video'] . '" '?="">';
    }
    // End XML 
    echo '';
    ?>
    
    
  • Terakhir buat file index.html ;
  • <!DOCTYPE html >
     <head>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
     <title>PHP/MySQL & Google Maps Example</title>
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
     <script type="text/javascript">
     //<![CDATA[
     var customIcons = {
     rumahsakit: {
          icon: 'http://webgis.unila.ac.id/img/mm_20_blue.png'
     },
     klinik: {
     icon: 'http://webgis.unila.ac.id/img/mm_20_green.png'
     }
     };
    
     function load() {
     var map = new google.maps.Map(document.getElementById("map"), {
     center: new google.maps.LatLng(-5.4057316,105.2805186),
     zoom: 13,
     mapTypeId: 'roadmap'
     });
     var infoWindow = new google.maps.InfoWindow;
     // Change this depending on the name of your PHP file
     downloadUrl("phpsqlajax_genxml2.php", function(data) {
     var xml = data.responseXML;
     var markers = xml.documentElement.getElementsByTagName("marker");
     for (var i = 0; i < markers.length; i++) {
     var name = markers[i].getAttribute("name");
     var address = markers[i].getAttribute("address");
     var type = markers[i].getAttribute("type");
     var telp = markers[i].getAttribute("telp");
     var fasilitas = markers[i].getAttribute("fasilitas");
     var image = '<img src="'+markers[i].getAttribute("image")+'" alt="FOTO"/>';
     var video = ''
     var point = new google.maps.LatLng(
     parseFloat(markers[i].getAttribute("lat")),
     parseFloat(markers[i].getAttribute("lng")));
     var html = "<b>" + name + "</b> <br/>" ;
     var html1 = "<b>Telp:</b> " + telp +"</b> <br/>" ;
     var html2 = "<b>Fasilitas:</b> " + fasilitas +"</b> <br/>" +"<b> Video Profil:</b><br>";
     var html3 = "<b>Alamat:</b> " + address +"</b> <br/>" ;
     var html4 = "<br></br> <b> Foto Object: </b>" + "<br/>";
     var icon = customIcons[type] || {};
     var marker = new google.maps.Marker({
     map: map,
     position: point,
     icon: icon.icon
     });
     bindInfoWindow(marker, map, infoWindow, html,html1,html2,html3,html4,image,fasilitas,video);
     }
     });
     }
     function bindInfoWindow(marker, map, infoWindow, html,html1,html2,html3,html4,image,fasilitas,video) {
     google.maps.event.addListener(marker, 'click', function() {
     infoWindow.setContent(html+html1+html3+html2+video+html4+image);
     infoWindow.open(map, marker,image,fasilitas);
     });
     }
     function downloadUrl(url, callback) {
     var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;
     request.onreadystatechange = function() {
     if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
     }
     };
     request.open('GET', url, true);
     request.send(null);
     }
     function doNothing() {}
     //]]>
     </script>
     </head>
     <body onload="load()">
     <div id="map" style="width: 850px; height: 550px"></div>
     </body>
    </html>

Finish, tinggal buka file index.html, kira kira tampilannnya akan seperti ini, Video dari url embed youtube akan muncul, berikut gambar profil fasilitas.

webgis

  1. aditya pasha
    June 11, 2014 at 10:25 am

    om minta sorce codenya dong…..

  2. DHANIE
    October 18, 2014 at 2:52 am

    mas itu yg di file phpsqlajax_genxml2.php nya yg di cetak xml ada echo ‘<marker ';="" echo=""……… itu tag marker maksudnya apa..? kok di saya error yah..?? mohon pencerahannya, thnx…🙂

  3. November 18, 2014 at 7:09 am

    kalau saya permasalahannya : petanya keluar, terus point letak tempatnya itu nga keluar markernya, kira-kira kenapa ya?
    padahal databasenya sudah bisa di akses

    • Uloh
      January 19, 2016 at 9:08 am

      Sama saya jg gitu

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: