Membuat Kueri dan Memvisualisasikan Data Lokasi di BigQuery dengan Google Maps Platform (JavaScript)

1. Ringkasan

Maps dapat menjadi alat yang sangat andal saat memvisualisasikan pola dalam set data yang terkait dengan lokasi dengan cara tertentu. Hubungan ini bisa berupa nama tempat, nilai lintang dan bujur tertentu, atau nama area yang memiliki batas khusus seperti jalur sensus atau kode pos.

Saat set data ini menjadi sangat besar, kueri tersebut dapat sulit divisualisasikan dan divisualisasikan menggunakan alat konvensional. Dengan menggunakan Google BigQuery untuk mengajukan kueri data dan Google Maps API untuk membuat kueri dan memvisualisasikan output, Anda dapat dengan cepat mempelajari pola geografis dalam data dengan penyiapan atau coding yang sangat sedikit, dan tanpa harus mengelola sistem untuk menyimpan set data yang sangat besar.

Yang akan Anda build

Dalam codelab ini, Anda akan menulis dan menjalankan beberapa kueri yang menunjukkan cara memberikan insight berbasis lokasi ke set data publik yang sangat besar menggunakan BigQuery. Anda juga akan membuat halaman web yang memuat peta menggunakan Google Maps Platform JavaScript API, lalu menjalankan dan memvisualisasikan kueri spasial terhadap set data publik yang sangat besar menggunakan Library Klien Google API untuk JavaScript dan BigQuery API.

Yang akan Anda pelajari

• Cara membuat kueri set data lokasi berskala petabyte dengan cepat menggunakan BigQuery, menggunakan kueri SQL, Fungsi Buatan Pengguna dan BigQuery API
• Cara menggunakan Google Maps Platform untuk menambahkan Google Map ke halaman web dan memungkinkan pengguna untuk menggambar bentuk di dalamnya
• Cara memvisualisasikan kueri terhadap set data besar di Google Maps seperti pada gambar di bawah, yang menunjukkan kepadatan lokasi penurunan taksi pada tahun 2016 dari perjalanan yang dimulai dari blok di sekitar Empire State Building.

Yang Anda butuhkan

• Pengetahuan dasar tentang HTML, CSS, JavaScript, SQL, dan Chrome DevTools
• Browser web modern, seperti Chrome, Firefox, Safari, atau Edge versi terbaru.
• Editor teks atau IDE pilihan Anda

Teknologi

BigQuery

BigQuery adalah layanan analisis data Google untuk set data yang sangat besar. Library ini memiliki RESTful API dan mendukung kueri yang ditulis dalam SQL. Jika Anda memiliki data dengan nilai lintang dan bujur, nilai tersebut dapat digunakan untuk mengajukan kueri data berdasarkan lokasi. Keuntungannya adalah Anda dapat menjelajahi set data yang sangat besar secara visual untuk melihat pola tanpa harus mengelola infrastruktur server atau database. Anda dapat memperoleh jawaban atas pertanyaan Anda dalam beberapa detik, tidak peduli seberapa besar tabel Anda, menggunakan skalabilitas dan infrastruktur terkelola BigQuery yang sangat besar.

Google Maps Platform

Google Maps Platform memberikan akses terprogram ke data peta, tempat, dan rute Google. Lebih dari 2 juta situs dan aplikasi saat ini menggunakannya untuk menyediakan peta tersemat dan kueri berbasis lokasi kepada penggunanya.

Lapisan Gambar Google Maps Platform JavaScript API memungkinkan Anda menggambar bentuk pada peta. Ini dapat dikonversi menjadi input untuk menjalankan kueri terhadap tabel BigQuery yang memiliki nilai lintang dan bujur yang disimpan di kolom.

Untuk memulai, Anda memerlukan project Google Cloud Platform dengan BigQuery dan Maps API yang diaktifkan.

2. Mempersiapkan

Akun Google

Jika belum memiliki Akun Google (Gmail atau Google Apps), Anda harus membuatnya.

Buat Project

Tips: Project yang Anda gunakan perlu mengaktifkan penagihan. Jika Anda berencana menggunakan project yang sudah ada, pastikan Anda dapat mengaktifkan penagihan untuk project tersebut.

Login ke Google Cloud Platform console ( console.cloud.google.com) dan buat project baru. Di bagian atas layar, ada menu drop-down Project:

Setelah mengklik menu drop-down project ini, Anda akan mendapatkan item menu yang memungkinkan Anda membuat project baru:

Pada kotak yang bertuliskan "Masukkan nama baru untuk proyek Anda", masukkan nama untuk proyek baru Anda, misalnya "Codelab Codelab BigQuery":

Project ID akan dibuat untuk Anda. Project ID adalah nama unik di semua project Google Cloud. Ingat Project ID Anda, karena Anda akan menggunakannya nanti. Nama di atas telah digunakan dan tidak akan berfungsi untuk Anda. Masukkan Project ID Anda sendiri di mana pun Anda melihat YOU_PROJECT_ID dalam codelab ini.

Aktifkan Penagihan

Untuk mendaftar ke BigQuery, gunakan project yang dipilih atau dibuat pada langkah sebelumnya. Penagihan harus diaktifkan pada project ini. Setelah penagihan diaktifkan, Anda dapat mengaktifkan BigQuery API.

Catatan: Anda tidak akan dikenai biaya untuk kueri yang dijalankan di codelab ini, tetapi jika Anda melampaui paket gratis BigQuery (1 TB kueri data per bulan), atau kuota harian gratis maksimum untuk Maps API (25.000 beban peta per hari), ada kemungkinan Anda akan dikenakan biaya.

Cara mengaktifkan penagihan bergantung pada apakah Anda membuat project baru atau mengaktifkan kembali penagihan untuk project yang sudah ada.

Google menawarkan uji coba gratis 12 bulan untuk penggunaan Google Cloud Platform senilai hingga $300 yang mungkin dapat Anda gunakan untuk Codelab ini, temukan detail selengkapnya di https://cloud.google.com/free/.

Project baru

Saat membuat project baru, Anda akan diminta untuk memilih akun penagihan mana yang ingin ditautkan ke project. Jika Anda hanya memiliki satu akun penagihan, akun tersebut otomatis ditautkan ke project Anda.

Jika belum memiliki akun penagihan, Anda harus membuatnya dan mengaktifkan penagihan untuk project sebelum dapat menggunakan banyak fitur Google Cloud Platform. Untuk membuat akun penagihan baru dan mengaktifkan penagihan untuk project Anda, ikuti petunjuk di Membuat akun penagihan baru.

Project yang ada

Jika memiliki project yang penagihannya dinonaktifkan sementara, Anda dapat mengaktifkan kembali penagihan:

1. Buka Cloud Platform Console.
2. Dari daftar project, pilih project untuk mengaktifkan kembali penagihan.
3. Buka menu di bagian kiri konsol dan pilih Penagihan . Anda akan diminta untuk memilih akun penagihan.
4. Klik Set account.

Buat akun Penagihan baru

Untuk membuat akun penagihan baru:

1. Buka Cloud Platform Console dan login atau, jika Anda belum memiliki akun, daftarlah.
2. Buka menu di bagian kiri konsol dan pilih Penagihan
3. Klik tombol Akun penagihan baru. (Perhatikan bahwa ini bukan akun penagihan pertama Anda, pertama-tama Anda harus membuka daftar akun penagihan dengan mengklik nama akun penagihan lama di dekat bagian atas halaman, lalu mengklik Kelola akun penagihan.)
4. Masukkan nama akun penagihan dan masukkan informasi penagihan Anda. Opsi yang Anda lihat bergantung pada negara alamat penagihan Anda. Perhatikan bahwa untuk akun Amerika Serikat, Anda tidak dapat mengubah status pajak setelah akun dibuat.
5. Klik Submit and enable billing.

Secara default, orang yang membuat akun penagihan adalah administrator penagihan untuk akun tersebut.

Untuk informasi tentang cara memverifikasi rekening bank dan menambahkan metode pembayaran cadangan, lihat Menambahkan, menghapus, atau memperbarui metode pembayaran.

Mengaktifkan BigQuery API

Untuk mengaktifkan BigQuery API di project Anda, buka halaman Marketplace BigQuery API di konsol, dan klik tombol ‘Aktifkan' berwarna biru.

Catatan: Jika belum memverifikasi alamat email, Anda mungkin perlu melakukannya sebelum dapat mulai menggunakan akun penagihan yang baru. Untuk informasi tentang memverifikasi alamat email, lihat topik Memverifikasi alamat email Anda berikut.

3. Membuat kueri Data lokasi di BigQuery

Ada tiga cara untuk membuat kueri data lokasi yang disimpan sebagai nilai lintang dan bujur di BigQuery.

• Kueri persegi panjang: tentukan area minat sebagai kueri yang memilih semua baris dalam rentang lintang dan bujur minimum dan maksimum.
• Kueri radius: tentukan area yang diminati dengan menghitung lingkaran di sekitar titik tertentu menggunakan rumus Hasrsine dan fungsi Matematika untuk membuat model bentuk bumi.
• Kueri poligon: menentukan bentuk khusus dan menggunakan Fungsi Buatan Pengguna untuk menyatakan logika titik-dalam poligon yang diperlukan untuk menguji apakah setiap baris dan lintang bujur berada di dalam bentuk.

Untuk memulai, gunakan Editor Kueri di bagian BigQuery pada Google Cloud Platform Console untuk menjalankan kueri berikut terhadap data taksi NYC.

SQL Standar vs SQL Lama

BigQuery mendukung dua versi SQL: SQL Lama dan SQL Standar. Yang terakhir adalah standar ANSI 2011. Untuk keperluan tutorial ini, kita akan menggunakan SQL Standar karena memiliki kepatuhan standar yang lebih baik.

Jika ingin menjalankan SQL Lama di editor BigQuery, Anda dapat melakukannya dengan melakukan hal berikut:

1. Klik tombol ‘Lainnya'
2. Pilih ‘Setelan kueri' dari menu drop-down
3. Di bawah 'Dialek SQL', pilih tombol radio 'Lama'
4. Klik tombol ‘Simpan'

Kueri Persegi Panjang

Kueri persegi panjang cukup mudah untuk dibuat di BigQuery. Anda hanya perlu menambahkan klausul WHERE yang membatasi hasil yang ditampilkan untuk hasil dengan lokasi antara nilai minimum dan maksimum untuk lintang dan bujur.

Coba contoh di bawah ini di konsol BigQuery. Kueri ini untuk statistik perjalanan rata-rata untuk perjalanan yang dimulai di area persegi panjang yang berisi tengah kota dan bagian bawah Manhattan. Ada dua lokasi berbeda yang dapat Anda coba, batalkan komentar pada klausul WHERE kedua untuk menjalankan kueri tentang perjalanan yang dimulai di bandara JFK.

SELECT 
ROUND(AVG(tip_amount),2) as avg_tip, 
ROUND(AVG(fare_amount),2) as avg_fare, 
ROUND(AVG(trip_distance),2) as avg_distance, 
ROUND(AVG(tip_proportion),2) as avg_tip_pc, 
ROUND(AVG(fare_per_mile),2) as avg_fare_mile FROM

(SELECT 

pickup_latitude, pickup_longitude, tip_amount, fare_amount, trip_distance, (tip_amount / fare_amount)*100.0 as tip_proportion, fare_amount / trip_distance as fare_per_mile

FROM `bigquery-public-data.new_york_taxi_trips.tlc_yellow_trips_2015`

WHERE trip_distance > 0.01 AND fare_amount <100 AND payment_type = "1" AND fare_amount > 0
)

--Manhattan
WHERE pickup_latitude < 40.7679 AND pickup_latitude > 40.7000 AND pickup_longitude < -73.97 and pickup_longitude > -74.01

--JFK
--WHERE pickup_latitude < 40.654626 AND pickup_latitude > 40.639547 AND pickup_longitude < -73.771497 and pickup_longitude > -73.793755

Hasil untuk dua kueri menunjukkan bahwa terdapat perbedaan besar dalam jarak perjalanan rata-rata, tarif, dan tips untuk pengambilan di dua lokasi.

Manhattan

rata-rata_rata	rata-rata_tarif	rata-rata_jarak	avg_tip_pc	rata2_rata_mil
2,52	12,03	9,97	22,39	5,97

JFK

rata-rata_rata	rata-rata_tarif	rata-rata_jarak	avg_tip_pc	rata2_rata_mil
9,22	48,49	41,19	22,48	4,36

Kueri Radius

Kueri radius juga mudah dibuat di SQL jika Anda tahu banyak soal matematika. Dengan menggunakan fungsi Matematika SQL Lama dari BigQuery, Anda dapat membuat kueri SQL menggunakan Formula Hasrsine yang memperkirakan luas lingkaran atau batas sferikal di permukaan bumi.

Berikut adalah contoh pernyataan BigQuery SQL untuk kueri lingkaran yang berpusat di 40.73943, -73.99585 dengan radius 0,1 km.

Nilai ini menggunakan nilai konstanta 111,045 kilometer untuk memperkirakan jarak yang ditunjukkan oleh satu derajat.

Ini didasarkan pada contoh yang ditemukan di http://www.plumislandmedia.net/mysql/haversine-mysql-nearest-loc/:

SELECT pickup_latitude, pickup_longitude, 
    (111.045 * DEGREES( 
      ACOS( 
        COS( RADIANS(40.73943) ) * 
        COS( RADIANS( pickup_latitude ) ) * 
        COS( 
          RADIANS( -73.99585 ) - 
          RADIANS( pickup_longitude ) 
        ) + 
        SIN( RADIANS(40.73943) ) * 
        SIN( RADIANS( pickup_latitude ) ) 
      ) 
     ) 
    ) AS distance FROM `project.dataset.tableName` 
    HAVING distance < 0.1 

SQL untuk Formula Hasrsine terlihat rumit, tetapi yang perlu Anda lakukan adalah mencolokkan koordinat pusat lingkaran, radius dan nama project, set data, dan tabel untuk BigQuery.

Catatan: Formula ini mengasumsikan bahwa bumi adalah bola sempurna ketika permukaannya benar-benar bulat, jadi akan ada ketidakakuratan kecil pada rumus ini karena perbedaan lokal dalam bentuk bumi. Untuk jarak yang terlibat dalam contoh yang ditampilkan di sini, jarak tersebut akan dapat diabaikan dan tidak akan memengaruhi hasil.

BigQuery mendukung dua versi SQL: SQL Lama dan SQL Standar. Yang terakhir adalah standar ANSI 2011.

Berikut adalah contoh kueri yang menghitung beberapa statistik perjalanan rata-rata untuk pengambilan dalam jarak 100 m dari Empire State Building. Salin dan tempel ini ke konsol web BigQuery untuk melihat hasilnya. Ubah lintang dan bujur untuk membandingkan dengan area lain seperti lokasi di Bronx.

#standardSQL
CREATE TEMPORARY FUNCTION Degrees(radians FLOAT64) RETURNS FLOAT64 AS
(
  (radians*180)/(22/7)
);

CREATE TEMPORARY FUNCTION Radians(degrees FLOAT64) AS (
  (degrees*(22/7))/180
);

CREATE TEMPORARY FUNCTION DistanceKm(lat FLOAT64, lon FLOAT64, lat1 FLOAT64, lon1 FLOAT64) AS (
     Degrees( 
      ACOS( 
        COS( Radians(lat1) ) * 
        COS( Radians(lat) ) *  
        COS( Radians(lon1 ) -  
        Radians( lon ) ) +  
        SIN( Radians(lat1) ) *  
        SIN( Radians( lat ) ) 
        ) 
    ) * 111.045
);

SELECT 

ROUND(AVG(tip_amount),2) as avg_tip,
ROUND(AVG(fare_amount),2) as avg_fare,
ROUND(AVG(trip_distance),2) as avg_distance,
ROUND(AVG(tip_proportion), 2) as avg_tip_pc,
ROUND(AVG(fare_per_mile),2) as avg_fare_mile

FROM

-- EMPIRE STATE BLDG 40.748459, -73.985731
-- BRONX 40.895597, -73.856085

(SELECT pickup_latitude, pickup_longitude, tip_amount, fare_amount, trip_distance, tip_amount/fare_amount*100 as tip_proportion, fare_amount / trip_distance as fare_per_mile, DistanceKm(pickup_latitude, pickup_longitude, 40.748459, -73.985731)


FROM `bigquery-public-data.new_york_taxi_trips.tlc_yellow_trips_2015`

WHERE 
  DistanceKm(pickup_latitude, pickup_longitude, 40.748459, -73.985731) < 0.1
  AND fare_amount > 0 and trip_distance > 0
  )
WHERE fare_amount < 100

Berikut adalah hasil kueri. Anda dapat melihat bahwa ada perbedaan besar pada tip rata-rata, tarif, jarak perjalanan, ukuran tip tipikal terhadap tarif, dan tarif rata-rata per mil yang ditempuh.

Gedung Empire State:

rata-rata_rata	rata-rata_tarif	rata-rata_jarak	avg_tip_pc	rata2_rata_mil
1,17	11,08	45,28	10,53	6,42

Bronx

rata-rata_rata	rata-rata_tarif	rata-rata_jarak	avg_tip_pc	rata2_rata_mil
0,52	17,63	4,75	4,74	10.9

Kueri Poligon

SQL tidak mendukung pembuatan kueri menggunakan bentuk arbitrer selain persegi panjang dan lingkaran. BigQuery tidak memiliki jenis data geometri asli atau indeks spasial apa pun, sehingga untuk menjalankan kueri menggunakan bentuk poligon, Anda membutuhkan pendekatan yang berbeda untuk kueri SQL yang sederhana. Salah satu pendekatannya adalah menentukan fungsi geometri di JavaScript dan menjalankannya sebagai Fungsi yang Ditentukan Pengguna (UDF) di BigQuery.

Banyak operasi geometri dapat ditulis di JavaScript sehingga memudahkan untuk mengambil salah satunya dan menjalankannya di tabel BigQuery yang berisi nilai lintang dan bujur. Anda harus meneruskan poligon khusus melalui UDF dan melakukan pengujian terhadap setiap baris, yang hanya mengembalikan baris dengan lintang dan bujur berada di dalam poligon. Cari tahu UDF lebih lanjut dalam referensi BigQuery.

Algoritme Point In Polygon

Ada banyak cara untuk menghitung apakah suatu titik berada di dalam poligon di JavaScript. Berikut salah satu port dari C implementasi yang terkenal yang menggunakan algoritme pelacakan sinar untuk menentukan apakah sebuah titik berada di dalam atau di luar poligon dengan menghitung frekuensi garis panjang tak terbatas melintasi batas bentuk. Hanya dibutuhkan beberapa baris kode:

function pointInPoly(nvert, vertx, verty, testx, testy){
  var i, j, c = 0;
  for (i = 0, j = nvert-1; i < nvert; j = i++) {
    if ( ((verty[i]>testy) != (verty[j]>testy)) &&
                (testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) )
      c = !c;
  }
  return c;
}

Transfer ke JavaScript

Versi JavaScript dari algoritme ini terlihat seperti ini:

/* This function includes a port of C code to calculate point in polygon
* see http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html for license
*/

function pointInPoly(polygon, point){
    // Convert a JSON poly into two arrays and a vertex count.
    let vertx = [],
        verty = [],
        nvert = 0,
        testx = point[0],
        testy = point[1];
    for (let coord of polygon){
      vertx[nvert] = coord[0];
      verty[nvert] = coord[1];
      nvert ++;
    }

        
    // The rest of this function is the ported implementation.
    for (let i = 0, let j = nvert - 1; i < nvert; j = i++) {
      if ( ((verty[i] > testy) != (verty[j] > testy)) &&
         (testx < (vertx[j] - vertx[i]) * (testy - verty[i]) / (verty[j] - verty[i]) + vertx[i]) )
        c = !c;
    }
    return c;
}

Saat menggunakan SQL Standar di BigQuery, pendekatan UDF hanya memerlukan satu pernyataan, tetapi UDF harus ditentukan sebagai fungsi sementara dalam pernyataan. Berikut contohnya. Tempelkan pernyataan SQL di bawah ini ke dalam jendela Query Editor.

CREATE TEMPORARY FUNCTION pointInPolygon(latitude FLOAT64, longitude FLOAT64)
RETURNS BOOL LANGUAGE js AS """
  let polygon=[[-73.98925602436066,40.743249676056955],[-73.98836016654968,40.74280666503313],[-73.98915946483612,40.741676770346295],[-73.98967981338501,40.74191656974406]];

  let vertx = [],
    verty = [],
    nvert = 0,
    testx = longitude,
    testy = latitude,
    c = false,
    j = nvert - 1;

  for (let coord of polygon){
    vertx[nvert] = coord[0];
    verty[nvert] = coord[1];
    nvert ++;
  }

  // The rest of this function is the ported implementation.
  for (let i = 0; i < nvert; j = i++) {
    if ( ((verty[i] > testy) != (verty[j] > testy)) &&
 (testx < (vertx[j] - vertx[i]) * (testy - verty[i]) / (verty[j] - verty[i]) + vertx[i]) ) {
      c = !c;
    }
  }

  return c;
""";

SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude, pickup_datetime
FROM `bigquery-public-data.new_york_taxi_trips.tlc_yellow_trips_2016`
WHERE pointInPolygon(pickup_latitude, pickup_longitude) = TRUE
AND (pickup_datetime BETWEEN CAST("2016-01-01 00:00:01" AS DATETIME) AND CAST("2016-02-28 23:59:59" AS DATETIME))
LIMIT 1000

Selamat!

Anda sekarang telah menjalankan tiga jenis kueri spasial menggunakan BigQuery. Seperti yang telah Anda lihat, lokasi membuat perbedaan besar pada data hasil untuk kueri terhadap set data ini, tetapi kecuali Anda menebak di mana menjalankan kueri, sulit untuk menemukan pola spasial ad-hoc hanya dengan menggunakan kueri SQL.

Andai saja kita dapat memvisualisasikan data di peta, dan menjelajahi data dengan mendefinisikan sembarang daerah minat! Dengan menggunakan Google Maps API, Anda bisa melakukannya. Pertama, Anda harus mengaktifkan Maps API, menyiapkan halaman web sederhana yang berjalan di mesin lokal Anda, dan mulai menggunakan BigQuery API untuk mengirim kueri dari halaman web Anda.

4. Menangani Google Maps API

Setelah menjalankan beberapa kueri spasial sederhana, langkah berikutnya adalah memvisualisasikan output untuk melihat polanya. Untuk melakukannya, Anda akan mengaktifkan Maps API, membuat halaman web yang mengirimkan kueri dari peta ke BigQuery, lalu menggambar hasilnya di peta.

Mengaktifkan Maps JavaScript API

Untuk Codelab ini, Anda perlu mengaktifkan Maps JavaScript API Google Maps Platform dalam project Anda. Untuk itu, lakukan:

1. Di Google Cloud Platform console, buka Marketplace
2. Di Marketplace, telusuri ‘Maps JavaScript API'
3. Klik ubin untuk Maps JavaScript API dalam hasil penelusuran
4. Klik tombol 'Aktifkan'

Membuat Kunci API

Untuk membuat permintaan ke Google Maps Platform, Anda perlu membuat kunci API dan mengirimkannya bersama semua permintaan. Untuk membuat kunci API, lakukan hal berikut:

1. Di Google Cloud Platform console, klik menu tiga garis untuk membuka navigasi kiri
2. Pilih ‘API & Service' > ‘Credentials'
3. Klik tombol ‘Create Credential' lalu, pilih ‘API Key'
4. Salin kunci API baru

Mendownload kode dan menyiapkan server web

Klik tombol berikut untuk mendownload semua kode untuk codelab ini:

Download kode

Mengekstrak file zip yang didownload. Ini akan mengekstrak folder root (bigquery), yang berisi satu folder untuk setiap langkah codelab ini, bersama dengan semua resource yang Anda butuhkan.

Folder stepN berisi status akhir yang diinginkan dari setiap langkah codelab ini. Folder tersebut disediakan sebagai referensi Kita akan mengerjakan semua tugas coding di direktori yang disebut work.

Menyiapkan server web lokal

Meskipun Anda bebas menggunakan server web sendiri, codelab ini dirancang untuk berfungsi dengan baik dengan Server Web Chrome. Jika Anda belum menginstal aplikasi tersebut, Anda dapat menginstalnya dari Chrome Web Store.

Menginstal Server Web untuk Chrome

Setelah diinstal, buka aplikasi. Di Chrome, Anda dapat melakukannya sebagai berikut:

Bantuan lainnya: Menambahkan dan membuka aplikasi Chrome

1. Buka Chrome
2. Di kolom URL pada bagian atas, ketik chrome://apps
3. Tekan Enter
4. Pada jendela yang terbuka, klik ikon Server Web. Anda juga dapat mengklik kanan aplikasi untuk membukanya di tab reguler atau yang disematkan, layar penuh, atau jendela baru Anda akan melihat dialog ini berikutnya, yang memungkinkan Anda mengonfigurasi server web lokal:
5. Klik 'PILIH FOLDER' dan pilih lokasi tempat Anda mendownload file contoh codelab
6. Di bagian ‘Opsi' centang, di samping ‘Tampilkan indeks.html&#39 secara otomatis;:
7. Geser tombol berlabel 'Server Web: STARTED' ke kiri, lalu kembali ke kanan untuk berhenti, lalu mulai ulang server web

5. Memuat peta dan alat gambar

Membuat halaman peta dasar

Mulai dengan halaman HTML sederhana yang memuat Google Map menggunakan Maps JavaScript API dan beberapa baris JavaScript. Kode dari Sampel Peta Sederhana Google Maps Platform adalah tempat yang bagus untuk memulai. Alat ini direproduksi di sini agar dapat Anda salin dan tempel ke editor teks atau IDE pilihan Anda, atau Anda dapat menemukannya dengan membuka index.html dari repo yang Anda download.

1. Salin index.html ke folder work di salinan lokal repo Anda
2. Salin folder img/ ke folder work/ dalam salinan repo lokal
3. Buka profil kerja/index.html di editor teks atau IDE
4. Ganti YOUR_API_KEY dengan kunci API yang Anda buat sebelumnya

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

5. Di browser, buka localhost:<port>/work, dengan port adalah nomor port yang ditentukan di konfigurasi server web lokal Anda. Port default-nya adalah 8887. Anda akan melihat peta pertama ditampilkan.

Jika Anda menerima pesan error di browser, pastikan kunci API sudah benar dan server web lokal Anda aktif.

Mengubah lokasi default dan tingkat zoom

Kode yang menetapkan lokasi dan tingkat zoom berada di baris 27 & 28 dari index.html, dan saat ini berpusat di Sydney, Australia:

<script>
      let map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
</script>

Tutorial ini berfungsi dengan data perjalanan taksi BigQuery untuk New York, sehingga selanjutnya Anda akan mengubah kode inisialisasi peta untuk memusatkan lokasi di lokasi di New York City pada tingkat zoom yang sesuai - 13 atau 14 seharusnya berfungsi dengan baik.

Tips: untuk mengetahui lintang dan bujur tempat, gunakan maps.google.com untuk menemukan tempat, lalu klik kanan dan pilih ‘Apa di Sini?' dari menu konteks yang muncul.

Lakukan hal ini, perbarui blok kode di atas ke nilai berikut untuk memusatkan peta di Empire State Building dan menyesuaikan tingkat zoom ke 14:

<script>
      let map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 40.7484405, lng: -73.9878531},
          zoom: 14
        });
      }
</script>

Selanjutnya, muat ulang peta di browser Anda untuk melihat hasilnya.

Memuat library gambar dan visualisasi

Untuk menambahkan kemampuan menggambar ke peta Anda, Anda akan mengubah skrip yang memuat Maps JavaScript API dengan menambahkan parameter opsional yang memberi tahu Google Maps Platform untuk mengaktifkan library gambar.

Codelab ini juga menggunakan HeatmapLayer, sehingga Anda juga akan mengupdate skrip untuk meminta library visualisasi. Untuk melakukannya, tambahkan parameter libraries, dan tentukan library visualization serta drawing sebagai nilai yang dipisahkan koma, mis., libraries=visualization,drawing

Tampilannya akan terlihat seperti ini:

<script src='http://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&callback=initMap&key=YOUR_API_KEY' async defer></script>

Menambahkan DrawingManager

Untuk menggunakan bentuk yang digambar pengguna sebagai input ke kueri, tambahkan DrawingManager ke peta Anda, dengan alat Circle, Rectangle, dan Polygon diaktifkan.

Sebaiknya masukkan semua kode penyiapan DrawingManager ke dalam fungsi baru, sehingga dalam salinan index.html, lakukan hal berikut:

1. Tambahkan fungsi yang disebut setUpDrawingTools() dengan kode berikut untuk membuat DrawingManager dan menyetel properti map untuk mereferensikan objek peta di halaman.

Opsi yang diteruskan ke google.maps.drawing.DrawingManager(options) menetapkan jenis gambar bentuk default dan opsi tampilan untuk bentuk yang digambar. Untuk memilih area peta yang akan dikirimkan sebagai kueri, bentuk harus memiliki opasitas nol. Untuk informasi selengkapnya tentang opsi yang tersedia, lihat Opsi DrawingManager.

function setUpDrawingTools() {
  // Initialize drawing manager
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.CIRCLE,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT,
      drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    circleOptions: {
      fillOpacity: 0
    },
    polygonOptions: {
      fillOpacity: 0
    },
    rectangleOptions: {
      fillOpacity: 0
    }
  });
  drawingManager.setMap(map);
}

2. Panggil setUpDrawingTools() di fungsi initMap() Anda setelah objek peta dibuat

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
    zoom: 12
  });

  setUpDrawingTools();
}

3. Muat ulang index.html dan pastikan Anda memiliki alat gambar yang terlihat. Periksa juga apakah Anda dapat menggunakannya untuk menggambar lingkaran, persegi panjang, dan bentuk poligon.

Anda dapat mengklik dan menarik untuk menggambar lingkaran dan persegi panjang, tetapi poligon harus digambar dengan mengklik untuk setiap vertex, dan mengklik dua kali untuk menyelesaikan bentuk.

Menangani Peristiwa Menggambar

Anda memerlukan kode untuk menangani peristiwa yang diaktifkan saat pengguna selesai menggambar bentuk, sama seperti Anda memerlukan koordinat bentuk yang digambar untuk membuat kueri SQL.

Kita akan menambahkan kode untuk langkah ini di langkah berikutnya, tetapi untuk saat ini kita akan menghentikan tiga pengendali peristiwa kosong untuk menangani peristiwa rectanglecomplete, circlecomplete, dan polygoncomplete. Pengendali tidak perlu menjalankan kode apa pun pada tahap ini.

Tambahkan fungsi berikut ke bagian bawah fungsi setUpDrawingTools():

drawingManager.addListener('rectanglecomplete', rectangle => {
    // We will add code here in a later step.
});
drawingManager.addListener('circlecomplete', circle => {
  // We will add code here in a later step.
});

drawingManager.addListener('polygoncomplete', polygon => {
  // We will add code here in a later step.
});

Anda dapat menemukan contoh kerja kode ini dalam salinan lokal repo Anda, di folder step2: step2/map.html.

6. Menggunakan BigQuery Client API

Google BigQuery Client API akan membantu Anda menghindari banyak penulisan kode boilerplate yang diperlukan untuk membuat permintaan, menguraikan respons, dan menangani autentikasi. Codelab ini menggunakan BigQuery API melalui Library Klien Google API untuk JavaScript karena kami akan mengembangkan aplikasi berbasis browser.

Selanjutnya, Anda akan menambahkan kode untuk memuat API ini di halaman web dan menggunakannya untuk berinteraksi dengan BigQuery.

Catatan: Di aplikasi sendiri, Anda dapat menggunakan program email apa pun yang diinginkan untuk mengirimkan kueri. BigQuery API mendukung permintaan HTTP dan menggunakan data JSON untuk permintaan dan respons.

Menambahkan Google Client API untuk JavaScript

Anda akan menggunakan API Klien Google untuk JavaScript guna menjalankan kueri terhadap BigQuery. Di salinan index.html (di folder work), muat API menggunakan tag <script> seperti ini. Tempatkan tag tepat di bawah tag <script> yang memuat Maps API:

<script src='https://apis.google.com/js/client.js'></script>

Setelah memuat Google Client API, beri otorisasi pengguna untuk mengakses data di BigQuery. Untuk melakukannya, Anda dapat menggunakan OAuth 2.0. Pertama, Anda perlu menyiapkan beberapa kredensial di Project Google Cloud Console.

Kredensial OAuth 2.0 Dibuat

1. Di Google Cloud Console, dari Menu navigasi, pilih APIs & Services > Credentials.

Sebelum dapat menyiapkan kredensial, Anda perlu menambahkan beberapa konfigurasi untuk layar Otorisasi yang akan dilihat oleh pengguna akhir aplikasi Anda saat mereka memberi otorisasi aplikasi untuk mengakses data BigQuery atas nama mereka.

Untuk melakukannya, klik tab Layar persetujuan OAuth. 2. Anda harus menambahkan Big Query API ke cakupan untuk token ini. Klik tombol Add Scope di bagian Scopes for Google API. 3. Dari daftar, centang kotak di samping entri Big Query API dengan cakupan ../auth/bigquery. 4. Klik Tambahkan. 5. Masukkan nama di kolom ‘Application name'. 6. Klik Simpan untuk menyimpan setelan Anda. 7. Berikutnya, Anda akan membuat Client ID OAuth. Untuk melakukannya, klik Buat Kredensial:

8. Di menu drop-down, klik Client ID OAuth.
9. Pada Jenis Aplikasi, pilih Aplikasi web.
10. Di kolom Nama Aplikasi, ketik nama untuk project Anda. Misalnya "BigQuery dan Maps".
11. Pada bagian Restrictions, di kolom Authorized JavaScript Origins, masukkan URL localhost, termasuk nomor port. Misalnya: http://localhost:8887.

Tips: Anda harus memasukkan URL asal sebagai ‘localhost' bukan '127.0.0.1'.

12. Klik tombol Buat.

Pop-up akan menampilkan client ID dan rahasia klien. Anda memerlukan client ID untuk melakukan autentikasi terhadap BigQuery. Salin dan tempelkan ke work/index.html sebagai variabel JavaScript global baru yang disebut clientId.

let clientId = 'YOUR_CLIENT_ID';

7. Otorisasi dan Inisialisasi

Halaman Anda harus memberi otorisasi kepada pengguna untuk mengakses BigQuery sebelum menginisialisasi peta. Dalam contoh ini, kami menggunakan OAuth 2.0 seperti yang dijelaskan di bagian otorisasi dalam dokumentasi Klien Klien JavaScript. Anda harus menggunakan client ID OAuth dan Project ID untuk mengirim kueri.

Saat API Klien Google dimuat di halaman web, Anda perlu melakukan langkah berikut:

• Memberi otorisasi kepada pengguna.
• Jika diizinkan, muat BigQuery API.
• Muat dan inisialisasi peta.

Lihat step3/map.html untuk mengetahui contoh tampilan halaman HTML yang sudah selesai.

Memberikan otorisasi kepada pengguna

Pengguna akhir aplikasi harus mengotorisasi aplikasi untuk mengakses data di BigQuery atas nama mereka. Google Client API untuk JavaScript menangani logika OAuth untuk melakukan tindakan ini.

Dalam aplikasi sebenarnya, Anda memiliki banyak pilihan tentang cara mengintegrasikan langkah otorisasi.

Misalnya, Anda dapat memanggil authorize() dari elemen UI seperti tombol, atau melakukannya saat halaman telah dimuat. Di sini, kita memilih untuk mengizinkan pengguna setelah Google Client API untuk JavaScript dimuat, dengan menggunakan fungsi callback dalam metode gapi.load().

Tulis beberapa kode tepat setelah tag <script> yang memuat Google Client API untuk JavaScript guna memuat library klien dan modul autentikasi sehingga kita dapat langsung mengautentikasi pengguna.

<script src='https://apis.google.com/js/client.js'></script>
<script type='text/javascript'>
  gapi.load('client:auth', authorize);
</script>

Catatan: proses otorisasi menggunakan jendela pop-up, jadi pastikan bahwa Anda tidak memblokir ini saat menjalankan kode untuk pertama kalinya.

Saat otorisasi, muat BigQuery API

Setelah pengguna diotorisasi, muat BigQuery API.

Pertama, panggil gapi.auth.authorize() dengan variabel clientId yang Anda tambahkan di langkah sebelumnya. Tangani respons dalam fungsi callback yang disebut handleAuthResult.

Parameter immediate mengontrol apakah pop-up ditampilkan kepada pengguna. Setel ke true untuk menyembunyikan pop-up otorisasi jika pengguna sudah diberi otorisasi.

Tambahkan fungsi ke halaman Anda yang bernama handleAuthResult(). Fungsi ini perlu mengambil parameter authresult, yang memungkinkan Anda mengontrol alur logika bergantung pada apakah pengguna berhasil diotorisasi atau tidak.

Tambahkan juga fungsi yang disebut loadApi untuk memuat BigQuery API jika pengguna berhasil diotorisasi.

Tambahkan logika di fungsi handleAuthResult() untuk memanggil loadApi() jika ada objek authResult yang diteruskan ke fungsi, dan jika properti error objek memiliki nilai false.

Tambahkan kode ke fungsi loadApi() untuk memuat BigQuery API menggunakan metode gapi.client.load().

let clientId = 'your-client-id-here';
let scopes = 'https://www.googleapis.com/auth/bigquery';

// Check if the user is authorized.
function authorize(event) {
  gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
  return false;
}

// If authorized, load BigQuery API
function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    loadApi();
    return;
  }
  console.error('Not authorized.')  
}

// Load BigQuery client API
function loadApi(){
  gapi.client.load('bigquery', 'v2');
}

Memuat peta

Langkah terakhir adalah melakukan inisialisasi peta. Anda perlu sedikit mengubah urutan logika untuk melakukannya. Saat ini, JavaScript akan diinisialisasi saat JavaScript Maps API telah dimuat.

Anda dapat melakukannya dengan memanggil fungsi initMap() dari metode then() setelah metode load() di objek gapi.client.

// Load BigQuery client API
function loadApi(){
  gapi.client.load('bigquery', 'v2').then(
   () => initMap()
  );
}

Tips: Hapus parameter &callback=initMap dari tag JavaScript Maps API. initMap kini dipanggil dari fungsi loadApi() setelah BigQuery API dimuat.

8 Konsep BigQuery API

Panggilan BigQuery API biasanya dijalankan dalam hitungan detik, tetapi mungkin tidak langsung menampilkan respons. Anda memerlukan logika untuk memilih BigQuery guna mengetahui status tugas yang berjalan lama, dan hanya mengambil hasilnya saat tugas selesai.

Kode lengkap untuk langkah ini ada di step4/map.html.

Mengirim permintaan

Tambahkan fungsi JavaScript ke work/index.html untuk mengirim kueri menggunakan API, dan beberapa variabel untuk menyimpan nilai set data dan project BigQuery yang berisi tabel untuk dikueri, dan project ID yang akan ditagih atas biaya apa pun.

Catatan: Sebelum menjalankan kode, ganti 'datasetId', 'publicProjectId', dan 'billingProjectId' dengan nilai dari project BigQuery yang relevan. Hal ini akan dibahas pada langkah berikutnya.

let datasetId = 'your_dataset_id';
let billingProjectId = 'your_project_id';
let publicProjectId = 'bigquery-public-data';

function sendQuery(queryString){
  let request = gapi.client.bigquery.jobs.query({
      'query': queryString,
      'timeoutMs': 30000,
      'datasetId': datasetId,
      'projectId': billingProjectId,
      'useLegacySql':false
  });
  request.execute(response => {
      //code to handle the query response goes here.
  });
}

Catatan: Set data adalah kumpulan tabel. Lihat dokumentasi BigQuery untuk detail selengkapnya.

Memeriksa status pekerjaan

Fungsi checkJobStatus di bawah ini menunjukkan cara memeriksa status tugas secara berkala, menggunakan metode API get dan jobId yang ditampilkan oleh permintaan kueri asli. Berikut adalah contoh yang berjalan setiap 500 milidetik sampai tugas selesai.

let jobCheckTimer;

function checkJobStatus(jobId){
  let request = gapi.client.bigquery.jobs.get({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response =>{
    if (response.status.errorResult){
      // Handle any errors.
      console.log(response.status.error);
      return;
    }

    if (response.status.state == 'DONE'){
      // Get the results.
      clearTimeout(jobCheckTimer);
      getQueryResults(jobId);
      return;
    }
    // Not finished, check again in a moment.
    jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);    
  });
}

Ubah metode sendQuery untuk memanggil metode checkJobStatus() sebagai callback di panggilan request.execute(). Teruskan ID pekerjaan ke checkJobStatus. Ini akan diekspos oleh objek respons sebagai jobReference.jobId.

function sendQuery(queryString){
  let request = gapi.client.bigquery.jobs.query({
      'query': queryString,
      'timeoutMs': 30000,
      'datasetId': datasetId,
      'projectId': billingProjectId,
      'useLegacySql':false
  });
  request.execute(response => checkJobStatus(response.jobReference.jobId));
}

Mendapatkan hasil kueri

Untuk mendapatkan hasil kueri saat kueri telah selesai berjalan, gunakan panggilan API jobs.getQueryResults. Tambahkan fungsi ke halaman Anda yang disebut getQueryResults(), yang menerima parameter jobId:

function getQueryResults(jobId){
  let request = gapi.client.bigquery.jobs.getQueryResults({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response => {
    // Do something with the results.
  })
}

9. Membuat kueri data lokasi dengan BigQuery API

Ada tiga cara menggunakan SQL untuk menjalankan kueri spasial terhadap data di BigQuery:

• pilih menurut persegi panjang (atau dikenal sebagai kotak pembatas),
• pilih berdasarkan radius, dan
• fitur Fungsi yang Ditetapkan Pengguna yang andal.

Ada contoh kueri pembatas dan kotak pembatas di bagian Fungsi Matematika pada referensi SQL lama BigQuery, di bagian 'Contoh Lanjutan'.

Untuk kueri kotak pembatas dan radius, Anda dapat memanggil metode BigQuery query. Buat SQL untuk setiap kueri dan teruskan ke fungsi sendQuery yang Anda buat di langkah sebelumnya.

Contoh kerja kode untuk langkah ini adalah di step4/map.html.

Kueri persegi panjang

Cara termudah untuk menampilkan data BigQuery pada peta adalah dengan meminta semua baris tempat lintang dan bujur berada dalam persegi panjang, menggunakan perbandingan kurang dari dan lebih besar dari. Tampilan ini bisa berupa tampilan peta saat ini atau bentuk yang digambar di peta.

Untuk menggunakan bentuk yang digambar oleh pengguna, ubah kode di index.html untuk menangani peristiwa gambar yang diaktifkan saat persegi panjang selesai. Dalam contoh ini, kode menggunakan getBounds() pada objek persegi panjang untuk mendapatkan objek yang mewakili luas persegi panjang dalam koordinat peta, dan meneruskannya ke fungsi yang disebut rectangleQuery:

drawingManager.addListener('rectanglecomplete', rectangle => rectangleQuery(rectangle.getBounds()));

Fungsi rectangleQuery hanya perlu menggunakan koordinat kanan atas (timur utara) dan kiri bawah (barat selatan) untuk membuat koordinat yang kurang dari/lebih besar dari perbandingan terhadap setiap baris dalam tabel BigQuery. Berikut adalah contoh kueri yang memiliki tabel berisi kolom bernama 'pickup_latitude' dan 'pickup_longitude' yang menyimpan nilai lokasi.

Menentukan tabel BigQuery

Untuk membuat kueri tabel menggunakan BigQuery API, Anda harus memberikan nama tabel dalam bentuk yang sepenuhnya memenuhi syarat dalam kueri SQL Anda. Format dalam SQL Standar adalah project.dataset.tablename. Pada SQL Lama, ini adalah project.dataset.tablename.

Ada banyak tabel perjalanan Taksi NYC yang tersedia. Untuk melihatnya, buka konsol web BigQuery dan luaskan item menu "set data publik". Temukan set data yang disebut new_york dan luaskan untuk melihat tabel. Pilih tabel perjalanan Taksi Kuning: bigquery-public-data.new_york_taxi_trips.tlc_yellow_trips_2016).

Menentukan Project ID

Dalam panggilan API, Anda perlu menentukan nama project Google Cloud Platform untuk tujuan penagihan. Dalam codelab ini, ini bukan project yang sama dengan yang berisi tabel. Jika Anda menggunakan tabel yang telah dibuat di project sendiri dengan mengupload data, maka Project ID ini akan sama dengan yang ada dalam pernyataan SQL Anda.

Tambahkan variabel JavaScript ke kode untuk menyimpan referensi ke project Set Data Publik yang berisi tabel yang Anda kueri, ditambah nama tabel dan nama set data. Anda juga memerlukan variabel terpisah untuk merujuk ke ID Project penagihan Anda sendiri.

Tambahkan variabel JavaScript global yang disebut billingProjectId, publicProjectId, datasetId dan tableName ke salinan index.html.

Lakukan inisialisasi variabel 'publicProjectId', 'datasetId', dan 'tableName' dengan detail dari project Set Data Publik BigQuery. Inisialisasi billingProjectId dengan ID Project Anda sendiri (ID yang Anda buat di "Menyiapkan" sebelumnya di codelab ini).

let billingProjectId = 'YOUR_PROJECT_ID';
let publicProjectId = 'bigquery-public-data';
let datasetId = 'new_york_taxi_trips';
let tableName = 'tlc_yellow_trips_2016';

Catatan: setiap kueri akan menggunakan sebagian dari kuota bulanan gratis 1 TB Anda. Setiap kueri BigQuery akan menyebabkan pemindaian tabel lengkap, jadi periksa ukuran tabel sebelum membuat kueri dan hanya tentukan kolom yang Anda butuhkan. Gunakan pernyataan LIMIT untuk mengurangi jumlah data yang ditampilkan.

Sekarang tambahkan dua fungsi ke kode Anda untuk menghasilkan SQL dan kirim kueri ke BigQuery menggunakan fungsi sendQuery yang Anda buat di langkah sebelumnya.

Fungsi pertama harus disebut rectangleSQL() dan harus menerima dua argumen, sepasang objek google.Maps.LatLng yang mewakili sudut persegi panjang dalam koordinat peta.

Fungsi kedua harus disebut rectangleQuery(). Ini akan meneruskan teks kueri ke fungsi sendQuery.

let billingProjectId = 'YOUR_PROJECT_ID';
let publicProjectId = 'bigquery-public-data';
let datasetId = 'new_york';
let tableName = 'tlc_yellow_trips_2016';

function rectangleQuery(latLngBounds){
  let queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
  sendQuery(queryString);
}

function rectangleSQL(ne, sw){
  let queryString = 'SELECT pickup_latitude, pickup_longitude '
  queryString +=  'FROM `' + publicProjectId +'.' + datasetId + '.' + tableName + '`'
  queryString += ' WHERE pickup_latitude > ' + sw.lat();
  queryString += ' AND pickup_latitude < ' + ne.lat();
  queryString += ' AND pickup_longitude > ' + sw.lng();
  queryString += ' AND pickup_longitude < ' + ne.lng();
  return queryString;
}

Pada tahap ini, Anda memiliki kode yang cukup untuk mengirim kueri ke BigQuery untuk semua baris yang berisi persegi panjang yang digambar oleh pengguna. Sebelum menambahkan metode kueri lainnya untuk lingkaran dan bentuk tangan bebas, mari kita lihat cara menangani data yang kembali dari kueri.

Catatan: bentuk persegi panjang di Google Map, atau peta di proyeksi Web Mercator, tidak mewakili area persegi panjang di permukaan tanah. Hal ini karena garis bujur berkumpul menuju kutub yang bertemu (Google Maps tidak menunjukkan area di atas sekitar 85 derajat utara atau selatan khatulistiwa). Semakin besar area tanah yang tercakup, semakin besar distorsi bentuk dan area sebenarnya pada permukaan tanah, tetapi efeknya dapat diabaikan hingga jarak pendek hingga beberapa kilometer.

10. Memvisualisasikan respons

Tabel BigQuery bisa berukuran sangat besar—Petabyte data—dan dapat bertambah ratusan ribu baris per detik. Jadi, penting untuk mencoba dan membatasi jumlah data yang ditampilkan sehingga dapat digambar di peta. Menggambar lokasi setiap baris dalam kumpulan hasil yang sangat besar (puluhan ribu baris atau lebih) akan menghasilkan peta yang tidak dapat dibaca. Ada banyak teknik untuk menggabungkan lokasi dalam kueri SQL dan pada peta, serta Anda dapat membatasi hasil yang akan ditampilkan oleh kueri.

Kode lengkap untuk langkah ini tersedia di step5/map.html.

Agar jumlah data yang ditransfer ke halaman web Anda turun ke ukuran yang wajar untuk codelab ini, ubah fungsi rectangleSQL() untuk menambahkan pernyataan yang membatasi respons hingga 10.000 baris. Pada contoh di bawah ini ditentukan dalam variabel global yang disebut recordLimit, sehingga semua fungsi kueri dapat menggunakan nilai yang sama.

let recordLimit = 10000;
function rectangleSQL(ne, sw){
  var queryString = 'SELECT pickup_latitude, pickup_longitude '
  queryString +=  'FROM `' + publicProjectId +'.' + datasetId + '.' + tableName + '`'
  queryString += ' WHERE pickup_latitude > ' + sw.lat();
  queryString += ' AND pickup_latitude < ' + ne.lat();
  queryString += ' AND pickup_longitude > ' + sw.lng();
  queryString += ' AND pickup_longitude < ' + ne.lng();
  queryString += ' LIMIT ' + recordLimit;
  return queryString;
}

Untuk memvisualisasikan kepadatan lokasi, Anda dapat menggunakan peta panas. Maps JavaScript API memiliki class HeatmapLayer untuk tujuan ini. HeatmapLayer menggunakan array koordinat lintang dan bujur, sehingga cukup mudah untuk mengonversi baris yang ditampilkan dari kueri menjadi peta panas.

Dalam fungsi getQueryResults, teruskan array response.result.rows ke fungsi JavaScript baru yang disebut doHeatMap() yang akan membuat peta panas.

Setiap baris akan memiliki properti yang disebut f yang merupakan array kolom. Setiap kolom akan memiliki properti v yang berisi nilai.

Kode Anda harus mengulang kolom di setiap baris dan mengekstrak nilainya.

Dalam kueri SQL, Anda hanya meminta nilai Lintang dan Bujur dari penjemputan taksi sehingga hanya akan ada dua kolom dalam respons.

Jangan lupa memanggil setMap() pada lapisan peta panas jika Anda telah menetapkan array posisi padanya. Tindakan ini akan membuatnya terlihat di peta.

Berikut contohnya:

function getQueryResults(jobId){
  let request = gapi.client.bigquery.jobs.getQueryResults({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response => doHeatMap(response.result.rows))
}

let heatmap;

function doHeatMap(rows){
  let heatmapData = [];
  if (heatmap != null){
    heatmap.setMap(null);
  }
  for (let i = 0; i < rows.length; i++) {
      let f = rows[i].f;
      let coords = { lat: parseFloat(f[0].v), lng: parseFloat(f[1].v) };
      let latLng = new google.maps.LatLng(coords);
      heatmapData.push(latLng);
  }
  heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData
  });
  heatmap.setMap(map);
}

Pada tahap ini, Anda akan dapat:

• Buka halaman dan beri otorisasi terhadap BigQuery
• Gambar persegi panjang di suatu tempat di NYC
• Lihat hasil kueri yang divisualisasikan sebagai peta panas.

Berikut ini contoh hasil dari kueri persegi panjang terhadap data NYC Yellow Taxi 2016, yang digambar sebagai peta panas. Ini menunjukkan distribusi penjemputan di sekitar Empire State Building pada hari Sabtu di bulan Juli:

11. Membuat kueri berdasarkan radius di sekitar titik

Kueri radius sangat mirip. Dengan menggunakan fungsi Matematika SQL Lama dari BigQuery, Anda dapat membuat kueri SQL menggunakan Formula Hasrsine yang memperkirakan area melingkar di permukaan bumi.

Dengan menggunakan teknik yang sama untuk persegi panjang, Anda dapat menangani peristiwa OverlayComplete untuk mendapatkan pusat dan radius lingkaran yang digambar pengguna, serta membuat SQL untuk kueri dengan cara yang sama.

Contoh kode yang berfungsi untuk langkah ini disertakan dalam repositori kode sebagai step6/map.html.

drawingManager.addListener('circlecomplete', circle => circleQuery(circle));

Di salinan index.html, tambahkan dua fungsi kosong baru: circleQuery() dan haversineSQL().

Kemudian, tambahkan pengendali peristiwa circlecomplete yang meneruskan bagian tengah dan radius ke fungsi baru yang disebut circleQuery().

Fungsi circleQuery() akan memanggil haversineSQL() untuk membuat SQL untuk kueri, lalu mengirim kueri dengan memanggil fungsi sendQuery() sesuai kode contoh berikut.

function circleQuery(circle){
  let queryString = haversineSQL(circle.getCenter(), circle.radius);
  sendQuery(queryString);
}

// Calculate a circular area on the surface of a sphere based on a center and radius.
function haversineSQL(center, radius){
  let queryString;
  let centerLat = center.lat();
  let centerLng = center.lng();
  let kmPerDegree = 111.045;

  queryString = 'CREATE TEMPORARY FUNCTION Degrees(radians FLOAT64) RETURNS FLOAT64 LANGUAGE js AS ';
  queryString += '""" ';
  queryString += 'return (radians*180)/(22/7);';
  queryString += '"""; ';

  queryString += 'CREATE TEMPORARY FUNCTION Radians(degrees FLOAT64) RETURNS FLOAT64 LANGUAGE js AS';
  queryString += '""" ';
  queryString += 'return (degrees*(22/7))/180;';
  queryString += '"""; ';

  queryString += 'SELECT pickup_latitude, pickup_longitude '
  queryString += 'FROM `' + publicProjectId +'.' + datasetId + '.' + tableName + '` ';
  queryString += 'WHERE '
  queryString += '(' + kmPerDegree + ' * DEGREES( ACOS( COS( RADIANS('
  queryString += centerLat;
  queryString += ') ) * COS( RADIANS( pickup_latitude ) ) * COS( RADIANS( ' + centerLng + ' ) - RADIANS('
  queryString += ' pickup_longitude ';
  queryString += ') ) + SIN( RADIANS('
  queryString += centerLat;
  queryString += ') ) * SIN( RADIANS( pickup_latitude ) ) ) ) ) ';

  queryString += ' < ' + radius/1000;
  queryString += ' LIMIT ' + recordLimit;
  return queryString;
}

Cobalah!

Tambahkan kode di atas dan coba alat 'Lingkaran' untuk memilih area peta. Hasilnya akan terlihat seperti ini:

12. Membuat kueri bentuk arbitrer

Recap: SQL tidak mendukung pembuatan kueri menggunakan bentuk arbitrer selain persegi panjang dan lingkaran. BigQuery tidak memiliki jenis data geometri asli, jadi untuk menjalankan kueri menggunakan bentuk poligon, Anda membutuhkan pendekatan yang berbeda untuk kueri SQL yang sederhana.

Salah satu fitur BigQuery yang sangat andal yang dapat digunakan untuk hal ini adalah Fungsi yang Ditetapkan Pengguna (UDF). UDF menjalankan kode JavaScript di dalam kueri SQL.

Kode yang berfungsi untuk langkah ini ada di step7/map.html.

UDF di BigQuery API

Pendekatan BigQuery API untuk UDF sedikit berbeda dengan konsol web: Anda harus memanggil jobs.insert method.

Untuk kueri SQL Standar melalui API, hanya satu pernyataan SQL yang diperlukan untuk menggunakan Fungsi Buatan Pengguna. Nilai useLegacySql harus ditetapkan ke false. Contoh JavaScript di bawah ini menunjukkan fungsi yang membuat dan mengirim objek permintaan untuk menyisipkan tugas baru, dalam hal ini kueri dengan Fungsi Buatan Pengguna.

Contoh kerja dari pendekatan ini ada di step7/map.html.

function polygonQuery(polygon) {
  let request = gapi.client.bigquery.jobs.insert({
    'projectId' : billingProjectId,
      'resource' : {
        'configuration':
          {
            'query':
            {
              'query': polygonSql(polygon),
              'useLegacySql': false
            }
          }
      }
  });
  request.execute(response => checkJobStatus(response.jobReference.jobId));
}

Kueri SQL dibuat sebagai berikut:

function polygonSql(poly){
  let queryString = 'CREATE TEMPORARY FUNCTION pointInPolygon(latitude FLOAT64, longitude FLOAT64) ';
  queryString += 'RETURNS BOOL LANGUAGE js AS """ ';
  queryString += 'var polygon=' + JSON.stringify(poly) + ';';
  queryString += 'var vertx = [];';
  queryString += 'var verty = [];';
  queryString += 'var nvert = 0;';
  queryString += 'var testx = longitude;';
  queryString += 'var testy = latitude;';
  queryString += 'for(coord in polygon){';
  queryString += '  vertx[nvert] = polygon[coord][0];';
  queryString += '  verty[nvert] = polygon[coord][1];';
  queryString += '  nvert ++;';
  queryString += '}';
  queryString += 'var i, j, c = 0;';
  queryString += 'for (i = 0, j = nvert-1; i < nvert; j = i++) {';
  queryString += '  if ( ((verty[i]>testy) != (verty[j]>testy)) &&(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) ){';
  queryString += '    c = !c;';
  queryString += '  }';
  queryString += '}';
  queryString += 'return c;';
  queryString += '"""; ';
  queryString += 'SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude, pickup_datetime ';
  queryString += 'FROM `' + publicProjectId + '.' + datasetId + '.' + tableName + '` ';
  queryString += 'WHERE pointInPolygon(pickup_latitude, pickup_longitude) = TRUE ';
  queryString += 'LIMIT ' + recordLimit;
  return queryString;
}

Ada dua hal yang terjadi di sini. Pertama, kode membuat pernyataan CREATE TEMPORARY FUNCTION yang mengenkapsulasi kode JavaScript yang akan diproses jika titik tertentu berada dalam poligon. Koordinat poligon disisipkan menggunakan panggilan metode JSON.stringify(poly) untuk mengonversi array JavaScript pasangan koordinat x,y menjadi string. Objek poligon diteruskan sebagai argumen ke fungsi yang membangun SQL.

Kedua, kode akan membuat pernyataan SELECT SQL utama. UDF dipanggil dalam ekspresi WHERE dalam contoh ini.

Mengintegrasikan dengan Maps API

Untuk menggunakan ini dengan library gambar Maps API, kita harus menyimpan poligon yang digambar oleh pengguna dan meneruskannya ke bagian UDF dari kueri SQL.

Pertama, kita perlu menangani peristiwa gambar polygoncomplete, untuk mendapatkan koordinat bentuk sebagai array pasangan bujur dan lintang:

drawingManager.addListener('polygoncomplete', polygon => {
  let path = polygon.getPaths().getAt(0);
  let queryPolygon = path.map(element => {
    return [element.lng(), element.lat()];
  });
  polygonQuery(queryPolygon);
});

Fungsi polygonQuery kemudian dapat membuat fungsi UDF JavaScript sebagai string, serta pernyataan SQL yang akan memanggil fungsi UDF.

Lihat step7/map.html untuk mengetahui contoh fungsinya.

Contoh output

Berikut ini contoh hasil dari kueri pengambilan dari data Taxi TLC NYC 2016 di BigQuery menggunakan poligon tangan bebas, dengan data yang dipilih digambar sebagai peta panas.

13. Lebih Lanjut

Berikut beberapa saran tentang cara memperluas codelab ini untuk melihat aspek data lainnya. Anda dapat menemukan contoh ide tersebut di step8/map.html di repositori kode.

Kegagalan pemetaan

Sejauh ini kami hanya memetakan lokasi penjemputan. Dengan meminta kolom dropoff_latitude dan dropoff_longitude serta mengubah kode peta panas untuk memetakannya, Anda dapat melihat tujuan perjalanan taksi yang dimulai di lokasi tertentu.

Misalnya, mari kita lihat di mana taksi cenderung menurunkan orang ketika mereka meminta penjemputan di sekitar Empire State Building.

Ubah kode untuk pernyataan SQL di polygonSql() untuk meminta kolom ini selain lokasi pengambilan.

function polygonSql(poly){
  let queryString = 'CREATE TEMPORARY FUNCTION pointInPolygon(latitude FLOAT64, longitude FLOAT64) ';
  queryString += 'RETURNS BOOL LANGUAGE js AS """ ';
  queryString += 'var polygon=' + JSON.stringify(poly) + ';';
  queryString += 'var vertx = [];';
  queryString += 'var verty = [];';
  queryString += 'var nvert = 0;';
  queryString += 'var testx = longitude;';
  queryString += 'var testy = latitude;';
  queryString += 'for(coord in polygon){';
  queryString += '  vertx[nvert] = polygon[coord][0];';
  queryString += '  verty[nvert] = polygon[coord][1];';
  queryString += '  nvert ++;';
  queryString += '}';
  queryString += 'var i, j, c = 0;';
  queryString += 'for (i = 0, j = nvert-1; i < nvert; j = i++) {';
  queryString += '  if ( ((verty[i]>testy) != (verty[j]>testy)) &&(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) ){';
  queryString += '    c = !c;';
  queryString += '  }';
  queryString += '}';
  queryString += 'return c;';
  queryString += '"""; ';

  queryString += 'SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude, pickup_datetime ';
  queryString += 'FROM `' + publicProjectId + '.' + datasetId + '.' + tableName + '` ';
  queryString += 'WHERE pointInPolygon(pickup_latitude, pickup_longitude) = TRUE ';
  queryString += 'LIMIT ' + recordLimit;
  return queryString;
}

Fungsi doHeatMap kemudian dapat menggunakan nilai yang dikembalikan. Objek hasil memiliki skema yang dapat diperiksa untuk menemukan lokasi kolom-kolom ini dalam array. Dalam hal ini, mereka akan berada di posisi indeks 2 dan 3. Indeks ini dapat dibaca dari variabel agar kode lebih mudah dikelola. NB maxIntensity pada peta panas disetel untuk menampilkan kepadatan 20 pengguna yang keluar per piksel sebagai nilai maksimum.

Tambahkan beberapa variabel yang memungkinkan Anda mengubah kolom yang digunakan untuk data peta panas.

// Show query results as a Heatmap.
function doHeatMap(rows){
  let latCol = 2;
  let lngCol = 3;
  let heatmapData = [];
  if (heatmap!=null){
    heatmap.setMap(null);
  }
  for (let i = 0; i < rows.length; i++) {
      let f = rows[i].f;
      let coords = { lat: parseFloat(f[latCol].v), lng: parseFloat(f[lngCol].v) };
      let latLng = new google.maps.LatLng(coords);
      heatmapData.push(latLng);
  }
  heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      maxIntensity: 20
  });
  heatmap.setMap(map);
}

Berikut adalah peta panas yang menampilkan distribusi pengantaran dari semua pengambilan langsung di sekitar Gedung Empire State pada tahun 2016. Anda dapat melihat konsentrasi besar (blob merah) dari tujuan tengah kota terutama di sekitar Times Square, serta di sepanjang 5th Avenue antara 23rd St dan 14th St. Lokasi dengan kepadatan tinggi lainnya yang tidak ditampilkan pada tingkat zoom ini mencakup bandara La Guardia dan JFK, World Trade Center, dan Battery Park.

Menata gaya peta dasar

Saat membuat Google Map menggunakan Maps JavaScript API, Anda dapat menetapkan gaya peta menggunakan objek JSON. Untuk visualisasi data, sebaiknya kita tidak menampilkan warnanya di peta. Anda dapat membuat dan mencoba gaya peta menggunakan Wizard Penataan Gaya Google Maps API di mapstyle.withgoogle.com.

Anda bisa menetapkan gaya peta saat Anda melakukan inisialisasi objek peta, atau kapan pun setelahnya. Berikut adalah cara menambahkan gaya kustom di fungsi initMap():

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
  zoom: 12,
  styles: [
    {
        "elementType": "geometry",
          "stylers": [
            {
              "color": "#f5f5f5"
            }
          ]
        },
        {
          "elementType": "labels.icon",
            "stylers": [
              {
                "visibility": "on"
              }
            ]
        },
        {
          "featureType": "water",
            "elementType": "labels.text.fill",
              "stylers": [
                {
                  "color": "#9e9e9e"
                }
              ]
        }
      ]
    });
  setUpDrawingTools();
}

Gaya contoh di bawah ini menunjukkan peta skala abu-abu dengan label lokasi menarik.

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
]

Memberikan masukan kepada pengguna

Meskipun BigQuery biasanya akan memberikan respons dalam hitungan detik, terkadang berguna untuk menunjukkan kepada pengguna bahwa sesuatu terjadi saat kueri dijalankan.

Tambahkan beberapa UI ke halaman web Anda yang menampilkan respons fungsi checkJobStatus() dan grafik animasi untuk menunjukkan bahwa kueri sedang berlangsung.

Informasi yang dapat Anda tampilkan mencakup durasi kueri, jumlah data yang ditampilkan, dan jumlah data yang diproses.

Tambahkan beberapa HTML setelah peta <div> untuk membuat panel ke halaman yang akan menampilkan jumlah baris yang ditampilkan oleh kueri, waktu kueri, dan jumlah data yang diproses.

<div id="menu">
    <div id="stats">
        <h3>Statistics:</h3>
        <table>
            <tr>
                <td>Total Locations:</td><td id="rowCount"> - </td>
            </tr>
            <tr>
                <td>Query Execution:</td><td id="duration"> - </td>
            </tr>
            <tr>
                <td>Data Processed:</td><td id="bytes"> - </td>
            </tr>
        </table>
    </div>
</div>

Tampilan dan posisi panel ini dikontrol oleh CSS. Tambahkan CSS untuk memosisikan panel di sudut kiri atas halaman di bawah tombol jenis peta dan toolbar gambar seperti dalam cuplikan di bawah.

#menu {
  position: absolute; 
  background: rgba(255, 255, 255, 0.8); 
  z-index: 1000; 
  top: 50px; 
  left: 10px; 
  padding: 15px;
}
#menu h1 {
  margin: 0 0 10px 0;
  font-size: 1.75em;
}
#menu div {
  margin: 5px 0px;
}

Gambar animasi dapat ditambahkan ke halaman, tetapi tersembunyi hingga diperlukan, dan beberapa kode JavaScript dan CSS digunakan untuk menampilkannya saat tugas BigQuery berjalan.

Tambahkan HTML untuk menampilkan grafik animasi. Ada file gambar bernama loader.gif dalam folder img di repositori kode.

<img id="spinner" src="img/loader.gif">

Tambahkan beberapa CSS untuk memosisikan gambar dan menyembunyikannya secara default hingga diperlukan.

#spinner {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  margin-left: -32px; 
  margin-top: -32px; 
  opacity: 0; 
  z-index: -1000;
}

Terakhir, tambahkan beberapa JavaScript untuk memperbarui panel status dan menampilkan atau menyembunyikan grafis saat kueri berjalan. Anda dapat menggunakan objek response untuk memperbarui panel bergantung pada informasi yang tersedia.

Saat memeriksa lowongan pekerjaan saat ini, ada properti response.statistics yang dapat Anda gunakan. Setelah tugas selesai, Anda dapat mengakses properti response.totalRows dan response.totalBytesProcessed. Sebaiknya pengguna mengonversi milidetik ke detik dan byte ke gigabyte untuk tampilan seperti yang ditunjukkan dalam contoh kode di bawah.

function updateStatus(response){
  if(response.statistics){
    let durationMs = response.statistics.endTime - response.statistics.startTime;
    let durationS = durationMs/1000;
    let suffix = (durationS ==1) ? '':'s';
    let durationTd = document.getElementById("duration");
    durationTd.innerHTML = durationS + ' second' + suffix;
  }
  if(response.totalRows){
    let rowsTd = document.getElementById("rowCount");
    rowsTd.innerHTML = response.totalRows;
  }
  if(response.totalBytesProcessed){
    let bytesTd = document.getElementById("bytes");
    bytesTd.innerHTML = (response.totalBytesProcessed/1073741824) + ' GB';
  }
}

Panggil metode ini saat ada respons terhadap panggilan checkJobStatus() dan saat hasil kueri diambil. Misalnya:

// Poll a job to see if it has finished executing.
function checkJobStatus(jobId){
  let request = gapi.client.bigquery.jobs.get({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response => {
    //Show progress to the user
    updateStatus(response);

    if (response.status.errorResult){
      // Handle any errors.
      console.log(response.status.error);
      return;
    }
    if (response.status.state == 'DONE'){
      // Get the results.
      clearTimeout(jobCheckTimer);
      getQueryResults(jobId);
      return;
    }
    // Not finished, check again in a moment.
    jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]); 
  });
}

// When a BigQuery job has completed, fetch the results.
function getQueryResults(jobId){
  let request = gapi.client.bigquery.jobs.getQueryResults({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response => {
    doHeatMap(response.result.rows);
    updateStatus(response);
  })
}

Untuk mengalihkan grafik animasi, tambahkan fungsi untuk mengontrol visibilitasnya. Fungsi ini akan mengalihkan opasitas Elemen DOM HTML yang diteruskan ke sana.

function fadeToggle(obj){
    if(obj.style.opacity==1){
        obj.style.opacity = 0;
        setTimeout(() => {obj.style.zIndex = -1000;}, 1000);
    } else {
        obj.style.zIndex = 1000;
        obj.style.opacity = 1;
    }
}

Terakhir, panggil metode ini sebelum memproses kueri, dan setelah hasil kueri kembali dari BigQuery.

Kode ini memanggil fungsi fadeToggle saat pengguna selesai menggambar persegi panjang.

drawingManager.addListener('rectanglecomplete', rectangle => {
  //show an animation to indicate that something is happening.
  fadeToggle(document.getElementById('spinner'));
  rectangleQuery(rectangle.getBounds());
});

Saat respons kueri telah diterima, panggil fadeToggle() lagi untuk menyembunyikan grafik animasi.

// When a BigQuery job has completed, fetch the results.
function getQueryResults(jobId){
  let request = gapi.client.bigquery.jobs.getQueryResults({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response => {
    doHeatMap(response.result.rows);
    //hide the animation.
    fadeToggle(document.getElementById('spinner'));
    updateStatus(response);
  })
}

Halaman akan terlihat seperti ini.

Lihat contoh lengkap di step8/map.html.

14. Hal-hal yang Perlu Dipertimbangkan

Terlalu Banyak Penanda

Jika Anda menggunakan tabel yang sangat besar, kueri mungkin menampilkan terlalu banyak baris untuk ditampilkan secara efisien pada peta. Batasi hasil dengan menambahkan klausul WHERE atau pernyataan LIMIT.

Menggambar banyak penanda dapat membuat peta tidak dapat dibaca. Pertimbangkan untuk menggunakan HeatmapLayer guna menampilkan kepadatan, atau penanda cluster untuk menunjukkan letak banyak titik data menggunakan satu simbol per cluster. Detail selengkapnya dapat dilihat di Tutorial Pengelompokan Penanda.

Mengoptimalkan Kueri

BigQuery akan memindai seluruh tabel dengan setiap kueri. Untuk mengoptimalkan penggunaan kuota BigQuery, cukup pilih kolom yang diperlukan dalam kueri Anda.

Kueri akan lebih cepat jika Anda menyimpan lintang dan bujur sebagai float, bukan string.

Ekspor Hasil Menarik

Contoh di sini mengharuskan pengguna akhir diautentikasi terhadap tabel BigQuery, yang tidak akan sesuai dengan setiap kasus penggunaan. Jika Anda telah menemukan beberapa pola menarik, akan lebih mudah untuk membagikannya kepada audiens yang lebih luas dengan mengekspor hasil dari BigQuery dan membuat set data statis menggunakan Lapisan Data Google Maps.

Masalah Hukum yang Membosankan

Perhatikan Persyaratan Layanan Google Maps Platform. Untuk mendapatkan detail selengkapnya tentang harga Google Maps Platform, lihat dokumentasi online.

Gunakan Data Lebih Banyak.

Ada sejumlah set data publik di BigQuery yang memiliki kolom lintang dan bujur, misalnya set data NYC Taxi dari tahun 2009-2016, data perjalanan Uber dan Lyft NYC, dan set data GDELT.

15. Selamat!

Kami harap ini membantu Anda menyiapkan dan menjalankan dengan cepat beberapa kueri geografis terhadap tabel BigQuery sehingga Anda dapat menemukan pola dan memvisualisasikannya di Google Map. Selamat memetakan!

Apa selanjutnya?

Jika Anda ingin mempelajari Google Maps Platform atau BigQuery lebih lanjut, lihat saran berikut.

Lihat Apa yang dimaksud dengan BigQuery untuk mempelajari lebih lanjut layanan data warehouse tanpa server berskala Google dengan Google.

Lihat panduan cara kerja untuk membuat aplikasi sederhana menggunakan BigQuery API.

Lihat panduan developer untuk library gambar untuk mengetahui detail selengkapnya tentang cara mengaktifkan interaksi pengguna untuk menggambar bentuk di Google Maps.

Lihat cara lain untuk memvisualisasikan data di Google Map.

Lihat Panduan Memulai untuk AP Klien JavaScriptI untuk memahami konsep dasar penggunaan Client API untuk mengakses Google API lainnya.