WEBGIS Menggunakan Google Map, MySQL dan PHP

inShare

by Bayu Yanuargi, SSi

NOTE : POSTINGAN INI SAYA ULANG KARENA ADA BEBERAPA FEEDBACK MENGENAI PETA
YANG TIDAK BISA TAMPIL (Silahkan di koreksi untuk Key API Script yang ada pada Index.html
script : "https://maps.googleapis.com/maps/api/js?key=GOOGLE API KEY
ANDA&callback=initMap" )

Bagi hampir semua orang, resume adalah sesuatu yang sangat penting, baik itu bagi
pencari kerja, project ataupun professional. Sebagai seorang yang berjiwa Peta, maka
harusnya resume atau portfolio kita bisa diimplementasikan kedalam peta, terutama
peta digital berbasis WEB, seperti dalam portfolio saya
dalam http://bayuyanuargi.000webhostapp.com. Dalam kesempatan kali ini saya akan
membahas secara mendasar bagaimana menampilkan pengalaman project kedalam
bentuk spasial menggunakan Google Map API's.

Konsep utama dalam tutorial kali ini adalah menampilkan data atau daftar project yang
pernah kita kerjakan dalam bentuk spasial berbasis webgis dengan menampilkan
informasi detil dalam bentuk infowindow seperti gambar di bawah ini.
Baik kita mulai dari pembuatan database untuk project kita ini menggunakan MySQL
database. Sebenarnya kita bisa saja membuat KML dengan menggunakan ArcGIS tapi
database tersebut bersifat statis, artinya jika akan melakukan update kita harus
mengulang langkah dari awal.Dengan menggunakan MySQL maka kita bisa melakukan
update, seperti penambahan data project, delete ataupun update dengan webbased
setiap saat dan dimana saja.

Untuk membuat database MySQL, kita bisa melakukan secara offline di komputer kita
menggunakan XAMPP, atau kita bisa menggunakan fasilitas webhosting baik yang
berbayar maupun yang gratis seperti 000webhostapp.com seperti yang penulis
gunakan.

Pada kesempatan ini kita akan menggunakan XAMPP untuk membuat database lokal di
komputer kita, untuk itu kita perlu mendownload XAMPP silahkan download disini Jika
sudah download dan install silahkan running XAMPP control panel dan start
APACHE dan MYSQL seperti gambar di bawah ini
Setelah berhasil di running dan distart, silahkan buka browser anda dan
ketik http://localhost/phpmyadmin/ sehingga akan muncul seperti gambar di bawah ini

Baik, setelah itu kita bergeser sedikit ke Data kita, untuk lebih mudahnya kita list dulu
project yang pernah kita kerjakan menggunakan excel, untuk latihan ini, silahkan
gunakan excel saya sebagai contoh Download di SINI . Dalam excel tersebut bisa
dilihat banyak informasi mengenai project kita, mulai dari nama project hingga
Koordinat.

Jika anda lihat pada kolom photo, disitu saya menggunakan dropbox sebagai fasilitas
penyimpanan foto. Sebenarnya kita bisa menyimpan foto dihosting 000webhostapp,
tapi itu akan mengurangi jatah space kita yang sedikit karena gratisan. Anda bebas
menggunakan webhosting anda atau mau menggunakan dropbox seperti saya.

Jika anda menggunakan dropbox, maka hyperlink yang akan digunakan harus sedikit di
modifikasi, saat kita share tautan / link menggunakan dropbox, maka dropbox akan
memberi kita link seperti
ini https://www.dropbox.com/s/r54tyig422wcz84/Asterbintan.JPG?dl=0 . Link tersebut
adalah link untuk mendownload bukan link untuk menampilkan, sedangkan yang kita
butuhkan adalah link untuk menampilkan foto bukan mendownload foto.

Untuk itu kita perlu merubah komposisi link tersebut menjadi

: https://dl.dropboxusercontent.com/s/r54tyig422wcz84/Asterbintan.JPG . Pada link
tersebut kita
mengganti https://www/dropbox.com dengan https://dl.dropboxusercontent.com dan
menghapus ?dl=0
Kita akan membuat database baru menggunakan phpmyadmi, klik new pada menu, lalu
masukkan nama database, dalam hal ini kita akan namakan "Project"

Lalu setelah database Project sudah dibuat, kemudian kita akan mengimport file excel
yang sudah kita buat tadi kedalam database Project kita yang baru, silahkan ikuti
langkah di bawah ini :

1. Sebelum kita import file project list yang kita miliki, kita perlu menconvert
file excel kita kedalam bentuk CSV, silahkan convert dulu
2. Setelah berhasil terconvert,pilih database Project (klik)
3. Klik pada IMPORT
4. Klik "Pilih File" untuk memilih file yang akan di import (CSV)
5. Scroll ke bawah Check "The first line contains the table column name......."
6. Check "Update data when duplicate...................."
7. Klik GO / KIRIM

Hasil dari import tersebut adalah sekarang kita telah mempunya database project kita
dalam MySQL. Anda dapat melakukan untuk semua jenis database. Hasilnya seperti
gambar di bawah ini, kita bisa melakukan add data, update dan delete data
menggunakan MySQL dan realtime langsung update kedalam webgis kita
Baik setelah kita selesai melakukan pembuatan database menggunakan MySQL, kita
akan melakukan pemrograman PHP menggunakan PHP editor, atau notepad++ lalu
kita upload ke webhost kita. Oya sebelumnya kita harus memperoleh credential key
untuk GOOGLE API's Silahkan ikuti langkah-langkahnya lalu "enabled" kan key untuk

1. Klik pada menu lalu pilih API Manager

2. Klik pada Library
3. Klik pada Google Map JavaScript API
4. Klik Enable pada bagian atas
5. Lalu klik Credential untuk mendapat credential API Key
Pastikan JAVASCRIPT MAP API di aktifkan, silahkan masuk ke menu "Library" dan
ikuti langkah berikut :

Setelah semua siap, selanjutnya kita akan melakukan coding untuk membuat webgis
portfolio kita. Silahkan gunakan PHP atau HTML Editor untuk melakukan coding
tersebut, yang paling gampang silahkan gunakan notepad++.

Untuk membuat webgis berdasarkan database yang telah kita buat minimal kita
memerlukan tiga file :

1. php_dbinfo.php yang digunakan sebagai pemberi akses ke dalam

database mysql kita, simpan di folder ..:/xampp/htdocs/map (buat new folder
"map" di dalam htdocs folder)
2. dbexport.php yang akan digunakan sebagai converter database simpan
di folder ..:/xampp/htdocs/map
3. index.html sebagai file webgis kita untuk menampilkan petanya simpan
di folder ..:/xampp/htdocs/map
Prinsip kerjanya adalah :
php_dbinfo.php ini berisi tentang credential yang telah kita buat untuk database kita
tadi, yang meliputi Username, Password, database name. Silahkan gunakan script PHP
dibawah ini simpan dengan nama dbinfo.php pada notepad++
<?php
$username="root";
$password="root";
$database="project";
?>

dbexport.php adalah file yang digunakan untuk melakukan convert data mysql menjadi
XML yang kemudian akan dibaca oleh index.html sebagai titik-titik data dan ditampilkan
dalam webgis kita.Secara umum dbexport ini tidak menghasilkan file tapi dia sebagai
tool pembacaan oleh file HTML kita. Silahkan copy paste script di bawah ini.

<?php
require("php_dbinfo.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server

$connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
die('Not connected : ' . mysqli_error());
}

// Set the active MySQL database

$db_selected = mysqli_select_db($connection , $database);
if (!$db_selected) {
die ('Can\'t use db : ' . mysqli_connect_error());
}

// Select all the rows in the markers table

$query = "SELECT * FROM table_p WHERE 1";
$result = mysqli_query($connection , $query);
if (!$result) {
die('Invalid query: ' . mysqli_connect_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node

echo '<table_p>';

// Iterate through the rows, printing XML nodes for each

while ($row = @mysqli_fetch_assoc($result)){
// Add to XML document node
echo '<project ';
echo 'Project="' . parseToXML($row['Project']) . '" ';
echo 'Project2="' . parseToXML($row['Project2']) . '" ';
echo 'Scope="' . $row['Scope'] . '" ';
echo 'Area="' . $row['Area'] . '" ';
echo 'Position="' . $row['Position'] . '" ';
echo 'Company="' . $row['Company'] . '" ';
echo 'Years="' . $row['Years'] . '" ';
echo 'lat="' . $row['lat'] . '" ';
 echo 'lng="' . $row['lng'] . '" ';
echo 'Photo="' . $row['Photo'] . '" ';
echo '/>';
}

// End XML file

echo '</table_p>';

?>

Mari kita bahas mengenai script di atas sedikit saja, kita mulai dari baris kedua kita bisa
lihat script : require("php_dbinfo.php") artinya untuk menjalankan applikasi ini dia
akan melihat mengakses file "php_dbinfo.php" yang dalam hal ini akan digunakan
sebagai pintu masuk kedalam database MySQL kita. Jika anda menggunakan nama
lain selain "php_dbinfo.php" maka silahkan ganti namanya sesuai dengan file name
yang anda gunakan.

Sekarang pada baris 26 dan seterusnya kita harus menentukan nama table yang akan
kita gunakan dalam operasi ini, dalam contoh saya menggunakan nama "table_p",
nama table ini dapat anda temukan pada mysql anda seperti pada gambar di bawah ini.

Silahkan ubah nama table sesuai dengan table yang anda miliki pada baris ke 26 dan
seterusnya.
Setelah converter dibuat, sekarang waktunya kita membuat webgis dengan
nama index.html. Sebenarnya namanya tidak harus index.html apalagi jika webgis ini
bukanlah main page dari website kita. Index.html adalah file yang akan dibuka pertama
kali jika kita mengetikkan alamat website, contohnya jika kita membuka
http://bayuyanuargi.000webhostapp.com maka kita sebenarnya sedang membuka file
index.html yang ada. Jadi itu default.

Jadi jika halaman utama dari website kita bukanlah webgis yang sedang kita buat,
maka kita bebas menggunakan nama yang lain, misalnya map.html, peta.html dsb, dan
kita buatkan link di halaman utama website kita untuk membuka file tersebut.

Baik tidak usah basa-basi, kita langsung saja membuat webgis kita yang dalam hal ini
kita namakan 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>Professional Portfolio Bayu Yanuargi</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
 <body>
<div id="map"></div>

<script>
var customLabel = {
Province: {
label: 'P'
},
Regency: {
label: 'R'
},
National: {
label: 'N'
},
District: {
label: 'D'
}
};

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-1.3327011, 114.5706969),
zoom: 5
});
var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP or XML file

downloadUrl('dbexport.php', function(data) {
var xml = data.responseXML;
var markers =
xml.documentElement.getElementsByTagName('project');
Array.prototype.forEach.call(markers, function(markerElem) {
var Project = markerElem.getAttribute('Project');
var Project2 = markerElem.getAttribute('Project2');
var Scope = markerElem.getAttribute('Scope');
var Area = markerElem.getAttribute('Area');
var Position = markerElem.getAttribute('Position');
var Company = markerElem.getAttribute('Company');
var Years = markerElem.getAttribute('Years');
var marker_image = markerElem.getAttribute('Photo');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));

var infowincontent =
document.createElement('div');

var x = document.createElement('IMG');
x.src = marker_image
x.setAttribute('width', '300');
x.setAttribute('width', '200');
document.body.appendChild(x);
infowincontent.appendChild(x);
 infowincontent.appendChild(document.createElement('br'));

var strong = document.createElement('strong');

strong.textContent = Project
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));

var strong = document.createElement('strong');

strong.textContent = Project2
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));

var text = document.createElement('text');

text.textContent = Area
infowincontent.appendChild(text);
infowincontent.appendChild(document.createElement('br'));

var text = document.createElement('text');

text.textContent = Position
infowincontent.appendChild(text);
infowincontent.appendChild(document.createElement('br'));

var text = document.createElement('text');

text.textContent = Company
infowincontent.appendChild(text);
infowincontent.appendChild(document.createElement('br'));

var icon = customLabel[Scope] || {};

var marker = new google.maps.Marker({

map: map,
position: point,
label: icon.label

});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}

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>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=GOOGLE API
KEY&callback=initMap">
</script>
</body>
</html>

Silahkan copy paste script di atas, jika sudah mari kita bahas beberapa hal penting
dalam script tersebut.

Yang pertama pada baris 25 - 38 anda akan melihat script yang dibuka dengan "var
customLabel = {" dimana script ini akan membuat label pada peta kita berdasarkan kategori yang
ada dalam kolom scope. Anda bisa mengganti label sesuai keinginan anda dengan mengganti nama
labelnya sesuai dengan attribute yang ada dalam kolom yang anda inginkan.

Kebetulan attribute dalam kolom scope terdiri dari "Province, Regency, National, dan
District" . Untuk menentukan nama kolom silahkan dilihat pada baris 101 dengan script
"var icon = customLabel[Scope] || {};" [Scope] adalah judul / nama kolom, jika anda
ingin mengganti label yang ditampilkan, silahkan ganti nama kolom yang diinginkan.

Kita lanjutkan pada baris 42 - 43 yang berisi script sebagai berikut ini "center: new
google.maps.LatLng(-1.3327011, 114.5706969), zoom: 5 ". Script tersebut adalah untuk
menentukan koordinat center dari peta yang akan dibuka termasuk juga leve zooming nya, semakin kecil
angka zoom nya semakin tinggi sudut viewnya.

Pada baris ke 48 "downloadUrl('dbexport.php', function(data) { " adalah script untuk

membuka file dbexport.php yang sudah kita buat sebelumnya.

Pastikan penamaan variablenya harus diperhatikan konektifitas antara index.html dan

dbexport.php
Kemudian pada baris ke 52 - 59 adalah informasi nama table yang akan kita
gunakan untuk menampilkan marker dan info window. Info window adalah informasi
yang ditampilkan saat kita melakukan klik pada marker yang ada seperti gambar di
bawah ini.
Untuk baris ke 60 - 62 adalah lokasi dari marker atau titik-titik data kita berdasarkan
kolom latitude dan longitude yang ada dalam database kita.

Selanjutnya pada baris ke 64 - 98 adalah informasi apa saja yang ingin ditampilkan saat
info window tampil.

Yang terpenting adalah pada baris ke

138, "src="https://maps.googleapis.com/maps/api/js?key=GOOGLE API
KEY=initMap">" silahkan masukkan google api key yang sudah kita buat udah kita buat.
Hapus kata GOOGLE API KEY dan masukkan key anda.

Silahkan simpan semua file kedalam folder ..:\xampp\htdocs\map

Dan selesai, silahkan coba, jika ada kesulitan silahkan comment di bawah ini. atau
email saya di bayu.yanuargi@outlook.com.

Contoh hasilnya akan seperti ini.

Terima Kasih, jika berkenan mohon di share ke rekan2x lainnya