この Codelab について
1. 始める前に
この Codelab では、Maps JavaScript API と、WebGL アクセラレーテッドのオープンソース データ可視化フレームワークである deck.gl を使って、大量の地理空間データを可視化する方法について説明します。
要件
演習内容
- Google Maps Platform を deck.gl に統合する
- BigQuery から地図にデータセットをインポートする
- 地図上のデータポイントを定義する
必要なもの
- Google アカウント
- 任意のテキスト エディタまたは IDE
- JavaScript、HTML、CSS に関する基礎的な知識
2. 環境を設定する
Google Maps Platform の利用を始める
Google Maps Platform を使用したことがない場合は、以下の手順を行います。
- 請求先アカウントを作成します。
- プロジェクトを作成します。
- Google Maps Platform の API と SDK を有効にします。
- API キーを生成します。
Node.js をダウンロードする
まだお持ちでない場合は、https://nodejs.org/ に移動し、Node.js ランタイムをパソコンにダウンロードしてインストールします。
Node.js には、この Codelab 用の依存関係をインストールするために必要なパッケージ マネージャー、npm が含まれています。
スターター プロジェクトをセットアップする
時間を節約するため、この Codelab のスターター プロジェクトには、地図のインスタンス化に必要なボイラープレート コードがすべて含まれています。
使用を開始するには、以下の手順に沿って操作します。
- このリポジトリのクローンを作成するか、ダウンロードします。
- コマンドラインから
/starterに移動します。このディレクトリには Codelab を完了するために必要な基本的なファイル構造が含まれています。 - 以下のコマンドを実行して、npm から依存関係をインストールします。
npm install
- 以下のコマンドを実行して、Webkit Dev Server を使ってブラウザでスターター プロジェクトを実行します。
npm start
The starter app opens in your browser and displays a map.
- IDE でプロジェクトを開き、
/starter/srcディレクトリに移動します。 app.jsファイルを開きます。
コーディングはすべて、ファイル内のコードのこのセクションで行います。
const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
// Your code goes here
}
Maps JavaScript API と地図を読み込むファイルの残りの部分のコードは一切変更しません。
/* 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);
}
YOUR API KEYは、環境の設定時に生成した実際の API キーに置き換えます。
const googleMapsAPIKey = 'YOUR API KEY';
3. BigQuery からデータをエクスポートする
BigQuery では、データ分析や試験運用に使用できる一般公開データセットが数多く提供されています。
BigQuery を使用すると、14,500 台の自転車と 900 か所の場所を利用できる自転車シェアリング プログラムであるニューヨーク市の Citi Bike の位置情報など、一般に公開されているデータセットをエクスポートできます。手順は以下のとおりです。
- Cloud Console に移動します。
- ナビゲーション メニュー
> [BigQuery] の順にクリックします。 - Query Editor で以下のクエリを入力し、[実行] をクリックします。
SELECT
longitude,
latitude,
name,
capacity
FROM
`bigquery-public-data.new_york_citibike.citibike_stations`
- クエリが完了したら、[結果を保存] をクリックしてから、[JSON（ローカル ファイル）] を選択して結果セットをエクスポートします。ファイルに「
stations.json」という名前を付け、/srcディレクトリに保存します。
データの取得が完了したら、deck.gl を使って最初の可視化を行うことができます。
4. 可視化を定義する
deck.gl はオープンソースのデータ可視化フレームワークで、WebGL を使った、非常に大規模なデータセットの 2D および 3D レンダリングを高解像度で行います。数十万個のデータポイントを処理することができ、最適化すると、数百万個ものデータポイントを処理することも可能です。
可視化を行うには、2 つのクラス（GoogleMapsOverlay と、deck.gl に用意されている多数の可視化レイヤのいずれか）が必要です。
まず、ScatterplotLayer インスタンスを作成します。これにより、データポイントが地図上に円としてレンダリングされます。
- 以下を
app.jsの先頭に追加することで、deck.gl のScatterplotLayerクラスをインポートします。
import { ScatterplotLayer } from '@deck.gl/layers';
- deck.gl の散布図レイヤで利用可能な 2 種類のプロパティから選択することで、レイヤのプロパティを設定します。
セッター プロパティは、データポイントの位置や半径など、可視化のレンダリングに必要な情報を提供します。スタイラ プロパティは、可視化のスタイルをカスタマイズするために使用します。
以下のコード スニペットで使用するプロパティの詳細は次のとおりです。
idは、可視化のリペイントやその他の更新など、さまざまな理由でレンダラがレイヤを識別するために使用されます。すべての deck.gl レイヤには一意の ID を割り当てる必要があります。dataは、可視化のデータソースを指定します。BigQuery からエクスポートしたデータセットを使用するには、これを‘./stations.json' に設定します。getPositionは、データソースから各オブジェクトの位置を取得します。このプロパティの値は関数で、deck.gl ではこの関数を使用して、データセットのすべての行を反復処理します。この関数は、各行のデータポイントの緯度と経度にアクセスする方法をレンダラに伝えます。このデータセットでは、各行のデータは、緯度と経度のプロパティに位置を設定された JSON オブジェクトであるため、getPositionに指定する関数はd => [parseFloat(d.longitude), parseFloat(d.latitude)]になります。getRadiusは、各オブジェクトの半径をメートル単位で定義します。この場合、半径はd => parseInt(d.capacity)に設定され、各ステーションの容量に基づいてデータポイントのサイズが設定されます。strokedは、レンダリングされたデータポイントの外縁にストロークがあるかどうかを設定します。getFillColorは、各データポイントの塗りつぶし色を RGB カラーコードとして設定します。getLineColorは、各データポイントのストロークの色を RGB カラーコードとして設定します。radiusMinPixelsは、各データポイントの最小ピクセル幅を設定します。ユーザーがズームインまたはズームアウトすると、deck.gl によってデータポイントの倍率が自動的に変更され、地図上で可視化された画像が明確に表示され続けます。このプロパティを使用すると、こうしたサイズ変更が発生する範囲を制御できます。radiusMaxPixelsは、各データポイントの最大ピクセル幅を設定します。
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
};
- deck.gl の
ScatterplotLayerクラスのインスタンスを作成します。
const scatterplotLayer = new ScatterplotLayer(layerOptions);
このセクションを完了すると、コードは以下のようになります。
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. 可視化を地図に適用する
これで GoogleMapsOverlay クラスを使用する地図に ScatterplotLayer インスタンスを適用し、Maps JavaScript API の OverlayView を使用して地図上に WebGL コンテキストを挿入できるようになります。
その準備が完了すると、任意の deck.gl の可視化レイヤを GoogleMapsOverlay に渡して、レイヤをレンダリングして地図と同期できるようになります。
ScatterplotLayer を地図に適用する手順は、以下のとおりです。
- deck.gl の
GoogleMapsOverlayクラスをインポートします。
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
GoogleMapsOverlayクラスのインスタンスを作成し、オブジェクトのlayersプロパティで先ほど作成したscatterplotLayerインスタンスを渡します。
const googleMapsOverlay = new GoogleMapsOverlay({
layers: [scatterplotLayer]
});
- 地図にオーバーレイを適用します。
googleMapsOverlay.setMap(map);
このセクションを完了すると、コードは以下のようになります。
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);
}
ブラウザに戻ると、ニューヨーク市にあるすべての Citi Bike ステーションのデータがわかりやすく可視化されます。
6. 完了
以上で、ニューヨーク市の Citi Bike に関する大量のデータを、Google Maps Platform と deck.gl で可視化できました。
詳細
Maps JavaScript API を使用すると、ウェブ用に提供されている Google Maps Platform のすべての機能にアクセスできます。Google Maps Platform をウェブで利用する方法について詳しくは、以下のリンクをご覧ください。
deck.gl には、ユーザーにデータを表示するために使用できるデータ可視化レイヤが多数用意されています。Maps JavaScript API で deck.gl を使用する方法について詳しくは、以下のリンク先をご覧ください。