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

Advertisements
  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: