Memvisualisasikan data dengan Google Maps Platform dan deck.gl

1. Sebelum memulai

Codelab ini akan mengajarkan cara membuat visualisasi data geospasial bervolume tinggi menggunakan Maps JavaScript API dan deck.gl, sebuah framework visualisasi data open source yang diakselerasi oleh WebGL.

d01802e265548be1.png

Prasyarat

Yang akan Anda lakukan

  • Mengintegrasikan Google Maps Platform dengan deck.gl.
  • Mengimpor set data ke peta dari BigQuery.
  • Menetapkan titik data pada peta.

Yang akan Anda perlukan

  • Akun Google
  • Editor teks atau IDE pilihan Anda
  • Pengetahuan dasar tentang JavaScript, HTML, dan CSS

2. Menyiapkan lingkungan

Memulai Google Maps Platform

Jika Anda belum pernah menggunakan Google Maps Platform, ikuti langkah-langkah berikut ini:

  1. Buat akun penagihan.
  2. Buat project.
  3. Aktifkan API dan SDK Google Maps Platform.
  4. Buat kunci API.

Mendownload Node.js

Jika Anda belum memilikinya, buka https://nodejs.org/, lalu download dan instal runtime Node.js di komputer.

Node.js mencakup npm, sebuah pengelola paket yang Anda perlukan untuk menginstal dependensi untuk codelab ini.

Menyiapkan project permulaan

Untuk menghemat waktu Anda, project permulaan untuk codelab ini mencakup semua kode boilerplate yang diperlukan untuk membuat instance peta.

Untuk memulai, ikuti langkah-langkah berikut ini:

  1. Clone atau download repositori ini.
  2. Dari command line, buka direktori /starter, yang berisi struktur file dasar yang Anda butuhkan untuk menyelesaikan codelab ini.
  3. Instal dependensi dari npm dengan menjalankan perintah berikut:
npm install
  1. Jalankan project permulaan di browser Anda menggunakan Webpack Dev Server dengan menjalankan perintah berikut:
npm start

    The starter app opens in your browser and displays a map.
  1. Buka project di IDE Anda lalu buka direktori /starter/src.
  2. Buka file app.js.

Semua coding akan dilakukan di bagian kode ini di dalam file:

const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
  // Your code goes here
}

Anda tidak perlu melakukan apa pun dengan kode lainnya dalam file, yang memuat Maps JavaScript API dan peta:

/* API and map loader helpers */
function loadJSAPI() {
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
  const script = document.createElement('script');

  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;
  document.head.appendChild(script);
}

function initMap() {
  const mapOptions = {
    center: { lat: 40.75097, lng: -73.98765 },
    zoom: 14,
    styles: mapStyle
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}
  1. Ganti YOUR API KEY dengan kunci API Anda yang sebenarnya, yang Anda buat saat menyiapkan lingkungan:
const googleMapsAPIKey = 'YOUR API KEY';

3. Mengekspor data dari BigQuery

BigQuery menawarkan banyak set data publik yang dapat Anda gunakan untuk tujuan analisis data atau eksperimen.

Gunakan BigQuery untuk mengekspor set data yang tersedia untuk publik yang mencakup data lokasi untuk Citi Bike, sebuah program penyewaan sepeda online di New York City dengan 14.500 sepeda dan 900 lokasi. Caranya adalah dengan mengikuti langkah-langkah berikut ini:

  1. Buka Cloud Console.
  2. Klik Menu navigasi 41e8e87b85b0f93.png > BigQuery.
  3. Di editor Kueri, masukkan kueri berikut lalu klik Jalankan:
SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`
  1. Setelah kueri selesai, klik Simpan Hasil, lalu pilih JSON (file lokal) untuk mengekspor kumpulan hasil. Beri nama file stations.json lalu simpan di direktori /src.

2f4932829f7e1f78.png

Setelah memperoleh data, Anda dapat membuat visualisasi pertama dengan deck.gl.

4. Menentukan visualisasi

deck.gl adalah framework visualisasi data open source yang menggunakan WebGL untuk menghasilkan rendering 2D dan 3D beresolusi tinggi dari set data yang sangat besar. Framework ini dapat menangani ratusan ribu titik data, dan bahkan jutaan titik data jika dioptimalkan.

Untuk membuat visualisasi, Anda memerlukan dua class—GoogleMapsOverlay dan salah satu lapisan visualisasi deck.gl.

Untuk memulai, buat instance ScatterplotLayer—yang akan merender titik data sebagai lingkaran di peta:

  1. Impor class ScatterplotLayer deck.gl dengan menambahkan hal berikut ke bagian atas app.js:
import { ScatterplotLayer } from '@deck.gl/layers';
  1. Tetapkan properti lapisan Anda dengan memilih dari dua jenis properti yang tersedia untuk lapisan diagram sebar deck.gl.

Properti penyetel memberikan visualisasi dengan informasi yang dibutuhkan untuk merender, seperti posisi dan radius titik data. Properti penata gaya memungkinkan Anda menyesuaikan gaya visualisasi.

Berikut adalah perincian properti yang Anda gunakan dalam cuplikan kode berikut:

  • id memungkinkan perender mengidentifikasi lapisan karena berbagai alasan, seperti penggambaran ulang dan pembaruan lainnya untuk visualisasi. Semua lapisan deck.gl memerlukan ID unik yang Anda tetapkan.
  • data menentukan sumber data visualisasi. Tetapkan ke ‘./stations.json' untuk menggunakan set data yang Anda ekspor dari BigQuery.
  • getPosition mengambil posisi setiap objek dari sumber data. Perhatikan bahwa nilai properti adalah sebuah fungsi. deck.gl menggunakan fungsi tersebut untuk melakukan iterasi pada setiap baris dalam set data. Fungsi ini memberi tahu perender cara mengakses lintang dan bujur dari titik data di setiap baris. Dalam set data ini, data di setiap baris adalah objek JSON dengan posisi yang ditetapkan di properti lintang dan bujur, sehingga fungsi yang Anda berikan ke getPosition adalah d => [parseFloat(d.longitude), parseFloat(d.latitude)].
  • getRadius menentukan radius setiap objek dalam meter. Dalam hal ini, radius ditetapkan ke d => parseInt(d.capacity), yang menetapkan ukuran titik data berdasarkan kapasitas setiap stasiun.
  • stroked menetapkan apakah titik data yang dirender memiliki goresan di tepi luarnya.
  • getFillColor menetapkan warna pengisi setiap titik data sebagai kode warna RGB.
  • getLineColor menetapkan warna goresan setiap titik data sebagai kode warna RGB.
  • radiusMinPixels menetapkan lebar piksel minimum untuk setiap titik data. Saat pengguna memperbesar dan memperkecil, deck.gl otomatis mengubah ukuran skala titik data agar tetap terlihat jelas di peta. Properti ini memungkinkan Anda mengontrol cakupan yang dijangkau pengubahan ukuran ini.
  • radiusMaxPixels menetapkan lebar piksel maksimum untuk setiap titik data.
const layerOptions = {
  id: 'scatter-plot',
  data: './stations.json',
  getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
  getRadius: d => parseInt(d.capacity),
  stroked: true,
  getFillColor: [255, 133, 27],
  getLineColor: [255, 38, 27],
  radiusMinPixels: 5,
  radiusMaxPixels: 50
};
  1. Buat instance class ScatterplotLayer deck.gl:
const scatterplotLayer = new ScatterplotLayer(layerOptions);

Setelah menyelesaikan bagian ini, kode Anda akan terlihat seperti ini:

import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatterplot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };

  const scatterplotLayer = new ScatterplotLayer(layerOptions);
}

5. Menerapkan visualisasi ke peta

Sekarang Anda dapat menerapkan instance ScatterplotLayer ke peta dengan class GoogleMapsOverlay, yang menggunakan API OverlayView Maps JavaScript API untuk memasukkan konteks WebGL di atas peta.

Setelah itu, Anda dapat meneruskan lapisan visualisasi deck.gl ke GoogleMapsOverlay, yang merender lapisan tersebut dan menyinkronkannya dengan peta.

Untuk menerapkan ScatterplotLayer ke peta, ikuti langkah-langkah berikut ini:

  1. Impor class GoogleMapsOverlay deck.gl:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. Buat instance class GoogleMapsOverlay dan teruskan ke instance scatterplotLayer yang Anda buat sebelumnya di properti layers objek:
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. Terapkan overlay ke peta:
 googleMapsOverlay.setMap(map);

Setelah menyelesaikan bagian ini, kode Anda akan terlihat seperti ini:

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatter-plot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };
  const scatterplotLayer = new ScatterplotLayer(layerOptions);
  const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  googleMapsOverlay.setMap(map);
}

Kembali ke browser, tempat Anda akan melihat visualisasi data yang mengagumkan dari semua stasiun Citi Bike di New York City.

d01802e265548be1.png

6. Selamat

Selamat. Anda berhasil membuat visualisasi data bervolume tinggi dari data Citi Bike di New York City dengan Google Maps Platform dan deck.gl.

Mempelajari lebih lanjut

Maps JavaScript API memberi Anda akses ke semua penawaran Google Maps Platform untuk web. Pelajari lebih lanjut cara menggunakan Google Maps Platform di web dengan melihat link berikut:

deck.gl menawarkan berbagai lapisan visualisasi data yang dapat Anda gunakan untuk menampilkan data kepada pengguna. Pelajari lebih lanjut cara menggunakan deck.gl dengan Maps JavaScript API dengan melihat link berikut: