Google Maps API: Menampilkan Layer Google Table Fusion

AUTHOR
Pada tulisan sebelumnya (Visualisasi Data Gempa dengan Google Table Fusion) telah dibahas bagaimana memvisualisasikan data gempa ke dalam peta. Kali ini kita akan belajar menampilkan data titik-titik gempa tersebut menggunakan Google Maps API.

Agar data dari google table fusion dapat ditampilkan pada google map, maka ada beberapa ketentuan yang harus dipenuhi yaitu:

  • Data table fusion harus dishare untuk umum.
  • Salah satu kolom harus merupakan kolom lokasi. Untuk itu harus dipastikan baik kolom bujur atau lintang harus bertipe lokasi.

Untuk menampilkan data table fusion pada google earth digunakan metode FusionTablesLayer pada class google.maps. Strukturnya adalah sebagai berikut.

fusion_layer = new google.maps.FusionTablesLayer({
query: {
select: 'kolom lokasi',
from: 'ID Tabel',
where: ‘Query’
    }
  });

Merubah Format/Tipe Kolom

Untuk merubah tipe kolom dapat dilakukan dengan menu Change yang muncuk ketika segitiga kecil di sebelah kanan sebuah kolom diklik. Pada gambar 1 dapat dilihat menu Change yang muncul pada kolom latitude.
Merubah tipe kolom tabel google fusion
Gambar 1. Merubah tipe kolom

Setelah menu Change dipilih, maka akan muncul properti dari kolom tersebut seperti pada gambar 2. Jika kolom yang merupakan kolom lokasi belum bertipe Location, maka gantilah menjadi tipe Location. Kemudian di bawahnya ada pilihan untuk memilih dua kolom lokasi (Two column location). Pilihan ini dipilih jika kolom lokasi berada pada dua kolom yang berbeda, pada kasus ini kolom latitude dan longitude.

Merubah Tipe Kolom Table Google Fusion
Gambar 2. Merubah tipe kolom

Table ID

Seperti yang telah dilihat dalam struktur kode fusion layer di atas, diperlukan ID tabel untuk memanggil google table fusion yang ingin ditampilkan. Table ID tersebut dapat dilihat pada menu File, kemudian pilih About this table seperti pada gambar 3.

Menu About this table untuk melihat keterangan tabel google fusion
Gambar 3. Menu About this table untuk melihat keterangan tabel google fusion
Kemudian akan muncul keterangan dari table fusion tersebut seperti pada gambar 4. Id table akan terlihat di bawah. Copy-lah Id tersebut untuk digunakan dalam script nantinya.

Gambar 4. Keterangan table google fusion

Menampilkan Layer Google Fusion Table

Untuk menampilkan layer untuk google fusion table maka dibuat sebuah variabel layer dalam kelas google.maps. Kemudian ditentukan propertinya berupa kolom lokasi yang dipilih (select), id tabel dan parameter query-nya.

Listing kode di bawah adalah contoh lengkap untuk menampilkan sebuah google table fusion layer. Perhatikan pada baris kode yang ditebalkan. Pada baris yang ditebalkan tersebut dapat dilihat bahwa layer google table fusion dibuat dengan nama fusion_layer. Kolom yang dipilih adalah latitude, dengan table Id 11HYqVk6p7NzR5EuQ6KXYM-gWY9M2QYF4oGOgmYpc, dengan paramter query yaitu menampilkan gempa dengan magnitude antara 3 sampai dengan 8.(mag >=3 AND mag <=8) Hasil tampilan dari listing kode ini seperti tampak pada gambar 5.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100%; width:100%; }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(3.995961,97.341948),
          zoom: 3
        };
  
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
   
  fusion_layer = new google.maps.FusionTablesLayer({
  query: {
  select: 'latitude',
  from: '11HYqVk6p7NzR5EuQ6KXYM-gWY9M2QYF4oGOgmYpc',
  where: 'mag >= 3 AND mag <= 8'
    },
 heatmap: {
  enabled:false
 }
  });
  fusion_layer.setMap(map);

      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

Tampilah layer google table fusion
Gambar 5. Tampilah layer google table fusion
Pada gambar 5, dapat dilihat titik-titik gempa bumi yang berada dalam table google fusion ditampilkan di atas peta, dengan referensi lokasi yaitu kolom lintang (latitude) dan bujur (longitude)

Membuat Peta Heatmap

Untuk membuat heatmap dapat dilakukan dengan menambahkan opsi heatmap, dengan properti enabled dibuat menjadi benar (true). Sebaliknya jika visualisasi heatmap ingin dihilangkan properti tersebut diubah menjadi salah (false). Perlu diperhatikan, heatmap tidak akan berjalan dengan sempurna pada layer yang di-query. Ini merupakan salah satu bugs yang terdapat dalam sistem ini. Untuk itu maka properti query where harus dihapus, agar visualisasi heatmap terlihat, seperti pada gambar 6.

Layer tampilan heatmap dari data google table fusion
Gambar 6. Layer tampilan heatmap dari data google table fusion

Semoga tulisan ini bermanfaat dan silahkan dishare jika dirasa bermanfaat juga bagi orang lain. Saya mengharapkan saran, kritik dan komentar agar tulisan dan blog ini menjadi lebih baik. Bersama kita berbagi. Terima kasih :)

Anda dapat mempelajari lebih lanjut tentang Google Maps API di situs Google Developer

Related Posts

Disqus Comments