GIS Technology: Membuat Form Pengumpulan Data dengan Google Street View

oleh: bayu yanuargi, SSi

Setelah sekian lama tidak melakukan posting, karena beberapa kesibukan dan sambil juga memperbaiki blog agar tidak mengeluarkan Pop Up Iklan. Dalam postingan kali ini saya akan membahas bagaimana menampilkan Google Street View, Google Map dan HTML form dalam satu tampilan. Postingan ini hanya sekedar berbagi ilmu, BUKAN menyarankan menggunakan google street view untuk aktifitas pekerjaan.

Baiklah, untuk membuat sistem ini kita bisa menggunakan server hosting online atau menggunakan local komputer (localhost). Perbedaannya hanya dimana kita akan menyimpan database dan file html atau php yang akan dibangun. Untuk tutorial kali ini, kita akan menggunakan Localhost sebagai server penyimpanan database, untuk itu kita memerlukan tiga software yaitu XAMPP, Notepad ++, dan pastinya Browser.

Contoh hasilnya nanti akan seperti ini :

http://bayuyanuargi.000webhostapp.com/poicollection.html

Yang pertama adalah kita akan membuat tampilan web yang akan kita buat, silahkan berkreasi masing-masing, tutorial ini menggunakan template yang sangat sederhana sperti di bawah ini.

Setidaknya ada tiga bagian, mulai dari formulir isian pada bagian kiri, dilanjutkan pada bagian tengah adalah tampilan Google Map, dan bagian kanan adalah street view. Pertimbangan saya membuat tampilan seperti ini adalah untuk memudahkan collector dalam melihat peta dan street view secara langsung sehingga meminimalisir informasi yang hilang. Untuk itu kita akan menggunakan koding HMTL Berikut ini:

Saya tidak perlu menjelaskan secara detil code HTML di atas, tapi saya akan menjelaskan bagian yang penting sebagai berikut, Dalam HTML tersebut ada dua bagian, Header dan Body, pada bagian header kita bisa menentukan <Style> dari form kita nanti, pada HTML saya menggunakan header untuk menentukan bentuk ukuran dari tubuh website, Map dan Pano, pano adalah bagian kita akan menampilkan street view.

Didalam <body> kita akan melihat <fieldset> yang merupakan bagian untuk membuat form isian lebih manis dengan adanya garis tepi seperti gambar di bawah ini.

Baik, selanjutnya adalah menampilkan Google Map dan Streetview. Untuk itu pastikan anda memiliki account developer google map, jika belum punya silahkan buat (Cari saja di google caranya hehehe). Setelah membuat, pastikan bahwa access ke Google API untuk JavaScript, Geocoding, Geo Location dan Google Street View seperti gambar di bawah ini.

Baik, saya nggak akan berlama-lama di bagian Google Map API setting yang mana bias dicari di google. Untuk langkah selanjutnya adalah menampilkan Google Map dan Google Streetview ke dalam tampilan kita. Cari script </body> dan copy kan script berikut ini sebelum </body> di bawah </fieldset>

Penjelasan script di atas adalah sebagai berikut, pada gambar di bawah ini kita bias melihat bagian dari script di atas.

Var fenway adalah titik pusat dari peta yang akan kita tampilkan, kebetulan saya memakai titik pusat di Jakarta Selatan, silahkan ganti sesuai kebutuhan anda untuk Lat Long nya. Var Panorama adalah tampilan street view yang akan tampil di web kita.

Jika anda lihat bahwa position dari var panorama adalah position : fenway, maksudnya adalah tampilan street view akan mengikuti kemana map fenway berada, jika anda menggerakan Pin Orang di map, atau merubah lokasi (maju mundur) pada street view, maka kedua tampilan akan sinkron.

Setelah kita mendapatkan tampilan di atas, maka kita akan menambahkan feature untuk mendapatkan koordinat secara otomatis, ke dalam kolom koordinat kita ketika kita menggeser marker merah di atas.

Untuk itu, maka kita akan kembali lagi ke Script HTML <body>, untuk mendapatkan koordinat lokasi marker secara live, maka saya akan menggunakan dua buah fiel di bawah ini yang sudah ada di dalam script HTML <body>. (Script ini sudah ada, saya hanya akan menjelaskan saja)

<legend>Lat/Long</legend>
<div style="font-family:verdana;color:red;font-size:12px">Move and click the marker to get coordinate</div>
<input type="text" id="coord" name="koordinat" size="50">
</fieldset>
…………………..
<TD>
……………………
<input type="text" id="coord2" name="email" size="59" style="color:black">
……………………

Lihat pada id=”coord” dan id=”coord2” adalah field yang akan kita isi nilai koordinat yang di dapat dari posisi marker. Setelah itu silahkan tambahkan Script berikut ini kedalam coding kita setelah myMarker.setMap(map); sebelum </script>

google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('coord2').innerHTML = '<p>Marker dropped: Current Lat:' + evt.latLng.lat().toFixed(3) + 'Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

google.maps.event.addListener(myMarker, 'click', function(evt){
document.getElementById('coord2').value = myMarker.getPosition();
var res = document.getElementById('coord2').value;
var input = res.slice(1,35 );
document.getElementById('coord').value = input;
geocodeLatLng(geocoder, map, infowindow);
});
}

google.maps.event.addDomListener(window, 'load', initialize);

Setelah melakukan modify terhadap script, maka kita akan mendapatkan nilai koordinat otomatis pada field coordinate seperti gambar di bawah ini. Untuk mendapatkan nilai koordinat adalah dengan menggeser marker pada posisi yang diinginkan, lalu setelah itu klik pada marker tersebut untuk mendapatkan koordinat baru.

Di sini saya akan membahas dari mana koordinat itu dihasilkan. Koordinat dalam kolom tersebut dihasilkan berdasarkan pada geolocation yang dilakukan oleh Google Map.

Pada Screenshot di atas, Script 1 adalah dimana kita memperoleh koordinat pertama kali, kemudia Script kedua adalah perbaikan atau koreksi dari yang dihasilkan oleh Script pertama agar sesuai dengan lokasi marker dan format penulisan yang kita inginkan.

Selanjutnya adalah menentukan alamat dari posisi marker berdasarkan koordinat saat ini. Penentukan alamat berdasarkan feature reverse geocoding.

Silahkan rubah kode setelah script google.maps.event.addListener(myMarker, 'click', function(evt){ dirubah menjadi total script di bawah ini.

google.maps.event.addListener(myMarker, 'click', function(evt){
document.getElementById('coord2').value = myMarker.getPosition();
var res = document.getElementById('coord2').value;
var input = res.slice(1,35 );
document.getElementById('coord').value = input;
geocodeLatLng(geocoder, map, infowindow);
});
}

function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('coord').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[1]) {
document.getElementById('addr').value = results[1].formatted_address;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}

google.maps.event.addDomListener(window, 'load', initialize);

Demikian tutorial kita tentang membuat applikasi sederhana menampilkan Formulir collection, Google Map dan Street View.

FULL CODE akan seperti ini :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map, #pano {
float: right;
height: 100%;
width: 45%;
}

</style>
</head>
<body>


<FIELDSET><LEGEND><strong>Street View Collection (by Bayu Yanuargi)</strong></LEGEND>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="2">
<TR><TD>
<fieldset>
<legend>POI name</legend>
<input type="text" name="name" size="50">
</fieldset>
<fieldset>
<legend>Lat/Long</legend>
<div style="font-family:verdana;color:red;font-size:12px">Move and click the marker to get coordinate</div>

<input type="text" id="coord" name="email" size="50">

</fieldset>
<fieldset>
<legend>Address</legend>
<textarea id="addr" rows="4" cols="50" >

</textarea>
<input id="submit2" type="button" value="Reverse Geocode">
</fieldset>
<fieldset>
<legend>Category</legend>
<input type="text" name="cat" size="50">
</fieldset>
<fieldset>
<legend>City</legend>
<input type="text" id="city" name="city" size="50">
</fieldset>

<fieldset>
<legend>Comment</legend>
<textarea rows="5" cols="50" >

</textarea>
</fieldset>
<br>
<input type="submit" value="submit" name="b1" style="float:right;margin-right:20px">
</FIELDSET>

<TD>
<fieldset>
<div id="map" style="width:450px;height:520px"></div>
<input type="text" id="coord2" name="map" size="59" style="color:white">
</fieldset>
<TD>
<fieldset>
<div id="pano" style="width:400px;height:550px"></div>
</fieldset>
<script>

function initialize() {
var fenway = {lat: -6.2625239, lng: 106.8473377};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 15
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 90,
pitch: 10
}
});

map.setStreetView(panorama);
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;

var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(-6.261931991710277, 106.84720360118865),
map: map,
draggable:true,
title:"Drag me!"
});

map.setCenter(myMarker.position);
myMarker.setMap(map);

google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('coord2').innerHTML = '<p>Marker dropped: Current Lat:' + evt.latLng.lat().toFixed(3) + 'Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

google.maps.event.addListener(myMarker, 'click', function(evt){
document.getElementById('coord2').value = myMarker.getPosition();
var res = document.getElementById('coord2').value;
var input = res.slice(1,35 );
document.getElementById('coord').value = input;
geocodeLatLng(geocoder, map, infowindow);
});
}

function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('coord').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[1]) {
document.getElementById('addr').value = results[1].formatted_address;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[GOOGLE KEY]&callback=initialize">
</script>

</body>

</html>

Di sini saya tidak membahas bagaimana hasil collection kedalam database karena nanti akan terlalu panjang (Hehehe), tapi silahkan berkreasi dengan menghubungkan formulir tersebut dengan MySQL sehingga hasil pengumpulan data dapat disimpan. Silahkan ikuti langkah pada website ini https://www.cloudways.com/blog/custom-php-mysql-contact-form/

Jangan lupa Share ya.....

GIS Technology

Membuat Form Pengumpulan Data dengan Google Street View

No comments:

Post a Comment