Dasar Pemrograman web GIS dengan Google Map API v3
Hai sahabat programmer, kali ini programmer goblog bakalan mengulas dan memberikan tutorial tentang web GIS atau SIG memanfaatkan google map sebagai peta.
Apa sih SIG atau GIS?
Sistem Informasi Geografis atau dalam bahasa inggris Geographic Information System merupakan sebuah aplikasi yang mampu mengolah, menyimpan dan menyajikan data yang memiliki informasi spasial atau berbasis keruangan. misal data yang berupa lokasi bangunan, luas lahan, rute, dll.
Lantas apa sih gunanya GIS?
Gis dapat dimanfaatkan dalam berbagai bidang, seperti kata om murai (1999) GIS dapat digunakan sebagai penunjang pengambilan keputusan perencanaan dan pengelolaan penggunaan lahan, sumber daya alam, lingkungan, transportasi, fasilitas kota dan pelayanan umum lainya.
lalu ada gak sih komponen yang harus dipenuhi dalam suatu GIS?
ada beberapa komponen GIS yaitu:
1. Perangkat keras.
Perangkat keras GIS merupakan perangkat fisik yang digunakan dalam memanipulasi data baik memasukkan(input), mengolah maupun menyajikan data.
2. Perangkat Lunak
Perangkat lunak pada GIS digunakan untuk menyimpan, mengolah, menganalisa, dan menyajikan data baik yang berupa data ruang maupun non ruang.
3. Manusia
Manusia adalah inti dari GIS, tanpa manusia yang merancang dan menggunakan GIS maka GIS tidak pernah ada.
4. Data
Inti dari GIS adalah data, tanpa adannya data GIS tidak akan bernilai.
Pada dasarnya ada dua jenis data GIS yaitu
a. Data spasial
Merupakan data yang menyajikan data suatu wilayah di permukaan bumi yang direpresentasikan dalam bentuk grafik, peta, gambar dengan format digital dan disimpan dalam bentuk koordinat.
b. Data Non-spasial
Yaitu data yang berupa tabel dimana tabel-tabel tersebut memuat informasi-informasi yang dimiliki oleh objek dalam data spasial. data tersebut merupakan data tabular yang saling terintegrasi dengan data spasial yang ada.
5. Metode
suatau GIS memiliki metode-metode yang berbeda untuk setiap permasalahan. GIS yang baik tergantung pada aspek desain dan aspek real nya.
Tadi di singgung soal google map, apa sih hubunganya dengan GIS?
Seperti pengertian dasar dari GIS yang merupakan aplikasi untuk menyajikan data berbasis keruangan tentu membutuhkan sebuah gambar denah atau peta, nah google map sendiri merupakan sebuah aplikasi dari google inc yang menyajikan data berupa peta digital.
kita dapat memanfaatkan peta ini untuk keperluan dari GIS, dengan memanfaatkan fasilitas yang sudah ada seperti ini kita tidak perlu memusingkan tentang menggambar peta sendiri untuk GIS kita, hanya perlu menyajikan data diatas peta tersebut. Beruntunglah google map mempunyai kemampuan ini. kita hanya perlu menentukan titik-titik koordinat berupa longitude dan latitude dan menempelkanya di google map, dan google map akan menyajikan data kita dalam bentuk titik-titik dalam peta tersebut.
Lantas bagaimana caranya menyajikan data ini menggunakan google map?
ada beberapa hal yang diperlukan untuk keperluan GIS dengan menggunakan google map. Diantaranya google map itu sendiri, data, dan karena google map merupakan aplikasi berbasis web, maka kita memerlukan web server untuk keperluan ini.
Baiklah, untuk mencoba membuat silahkan lihat kode berikut.
Dalam kode tersebut telah disisipkan keterangan yang langsung menerangkan baris per baris dari kode tersebut.
berikut merupakan hasilnya.
.png)
Baiklah, sekian tutorial bersama programmer goblog. Jika artikel ini bermanfaat bagi anda, silahkan bagikan.
Dan bagi yang memerlukan source code nya silahkan download disini.
Apa sih SIG atau GIS?
Sistem Informasi Geografis atau dalam bahasa inggris Geographic Information System merupakan sebuah aplikasi yang mampu mengolah, menyimpan dan menyajikan data yang memiliki informasi spasial atau berbasis keruangan. misal data yang berupa lokasi bangunan, luas lahan, rute, dll.
Lantas apa sih gunanya GIS?
Gis dapat dimanfaatkan dalam berbagai bidang, seperti kata om murai (1999) GIS dapat digunakan sebagai penunjang pengambilan keputusan perencanaan dan pengelolaan penggunaan lahan, sumber daya alam, lingkungan, transportasi, fasilitas kota dan pelayanan umum lainya.
lalu ada gak sih komponen yang harus dipenuhi dalam suatu GIS?
ada beberapa komponen GIS yaitu:
1. Perangkat keras.
Perangkat keras GIS merupakan perangkat fisik yang digunakan dalam memanipulasi data baik memasukkan(input), mengolah maupun menyajikan data.
2. Perangkat Lunak
Perangkat lunak pada GIS digunakan untuk menyimpan, mengolah, menganalisa, dan menyajikan data baik yang berupa data ruang maupun non ruang.
3. Manusia
Manusia adalah inti dari GIS, tanpa manusia yang merancang dan menggunakan GIS maka GIS tidak pernah ada.
4. Data
Inti dari GIS adalah data, tanpa adannya data GIS tidak akan bernilai.
Pada dasarnya ada dua jenis data GIS yaitu
a. Data spasial
Merupakan data yang menyajikan data suatu wilayah di permukaan bumi yang direpresentasikan dalam bentuk grafik, peta, gambar dengan format digital dan disimpan dalam bentuk koordinat.
b. Data Non-spasial
Yaitu data yang berupa tabel dimana tabel-tabel tersebut memuat informasi-informasi yang dimiliki oleh objek dalam data spasial. data tersebut merupakan data tabular yang saling terintegrasi dengan data spasial yang ada.
5. Metode
suatau GIS memiliki metode-metode yang berbeda untuk setiap permasalahan. GIS yang baik tergantung pada aspek desain dan aspek real nya.
Tadi di singgung soal google map, apa sih hubunganya dengan GIS?
Seperti pengertian dasar dari GIS yang merupakan aplikasi untuk menyajikan data berbasis keruangan tentu membutuhkan sebuah gambar denah atau peta, nah google map sendiri merupakan sebuah aplikasi dari google inc yang menyajikan data berupa peta digital.
kita dapat memanfaatkan peta ini untuk keperluan dari GIS, dengan memanfaatkan fasilitas yang sudah ada seperti ini kita tidak perlu memusingkan tentang menggambar peta sendiri untuk GIS kita, hanya perlu menyajikan data diatas peta tersebut. Beruntunglah google map mempunyai kemampuan ini. kita hanya perlu menentukan titik-titik koordinat berupa longitude dan latitude dan menempelkanya di google map, dan google map akan menyajikan data kita dalam bentuk titik-titik dalam peta tersebut.
Lantas bagaimana caranya menyajikan data ini menggunakan google map?
ada beberapa hal yang diperlukan untuk keperluan GIS dengan menggunakan google map. Diantaranya google map itu sendiri, data, dan karena google map merupakan aplikasi berbasis web, maka kita memerlukan web server untuk keperluan ini.
Baiklah, untuk mencoba membuat silahkan lihat kode berikut.
Dalam kode tersebut telah disisipkan keterangan yang langsung menerangkan baris per baris dari kode tersebut.
1: <html>
2: <head>
3: <title></title>
4: </head>
5: <body>
6: <div id="map_canvas" style="width:100%; height:100%;">
7:
8:
9: </div>
10: </body>
11: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
12: <script type="text/javascript">
13: (function() { // fungsi untuk dijalankan ketika halaman web dubuka
14: var infowindow = null;
15:
16: initialize(); // mengeksekusi fungsi initialize()
17:
18: })();
19:
20:
21: function initialize() {
22: // Baris berikut digunakan untuk mengisi marker atau tanda titik di peta
23: var sites = [
24:
25: ['Polinela', -5.358725,105.233413 ,1, '<h4>Politeknik Negeri Lampung</h4><p>Keterangan didalam marker</p>'], // pertama merupakan judul market, kedua adalah titik koordinan latitude, ketiga longitude, dan keempat merupakan z index (titik mana yang ditampilkan lebih dulu) untuk menentukan titik mana diatas titik mana, ketiga merupakan isi keterangan marker nya.
26: ['Unila', -5.364505,105.243442 ,2, '<h4>Universitas Lampung</h4><p>Keterangan didalam marker</p>'],
27:
28: ];
29: var centerMap = new google.maps.LatLng(-5.387625, 105.249326); // mengatur pusat peta
30:
31: var myOptions = {
32: zoom: 13, // level zoom peta
33: center: centerMap, // setting pusat peta ke centerMap
34: mapTypeId: google.maps.MapTypeId.ROADMAP //menentukan tipe peta
35: }
36:
37: var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //menempatkan peta pada div dengan ID map_canvas di html
38:
39: setMarkers(map, sites); // memanggil fungsi setMarker untuk menandai titik di peta.
40:
41: infowindow = new google.maps.InfoWindow({
42: content: "loading..."
43: });
44:
45: var bikeLayer = new google.maps.BicyclingLayer();
46: bikeLayer.setMap(map); //memnunculkan peta
47:
48: }
49:
50:
51:
52:
53:
54: function setMarkers(map, markers) {
55: //berikut merupakan perulangan untuk membaca masing masing titik yang telah kita definisikan di sites[];
56: for (var i = 0; i < markers.length; i++) {
57: var sites = markers[i];
58: var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
59: var marker = new google.maps.Marker({
60: position: siteLatLng,
61: map: map,
62: title: sites[0],
63: zIndex: sites[3],
64: html: sites[4]
65:
66: });
67:
68: var contentString = "Some content";
69: // berikut merupakan fungsi untuk mengatur agar keterangan marker muncuk ketika mouse diarahkan ke marker (mouse over)
70: google.maps.event.addListener(marker, "mouseover", function () {
71:
72: infowindow.setContent(this.html);
73: infowindow.open(map, this);
74: });
75: }
76: }
77:
78: </script>
79: </html>
berikut merupakan hasilnya.
Baiklah, sekian tutorial bersama programmer goblog. Jika artikel ini bermanfaat bagi anda, silahkan bagikan.
Dan bagi yang memerlukan source code nya silahkan download disini.
.png)
Komentar ini telah dihapus oleh pengarang.
BalasHapusSangat membantu terimakasih
BalasHapusMantap , Belajar
BalasHapushm...sepertinya ada yang salah dengan hasilpunya ku, sepertinya kurang teliti diriku hahah
BalasHapusKunjungi juga Website saya https://sites.google.com/mahasiswa.atmaluhur.ac.id/uncyber/
dan Website Universitas saya www.atmaluhur.ac.id
Sebelumnya terima kasih untuk tutorialnya. Saya sudah mencoba source code-nya tapi tidak ada yang tampil hanya title-nya saja. Apa yang salah ya? Mohon bantuannya...
BalasHapussilahkan mengunjungi website saya di: https://leor.mahasiswa.atmaluhur.ac.id/
dan website kampus saya di: http://www.atmaluhur.ac.id/