このドキュメントでは、Google 境界線の動的なデータドリブン スタイル設定を Maps JavaScript API を使用して実装する理由と方法について説明しています。この API はさまざまな業界や分野のさまざまなユースケースで役立ちます。
ニューヨーク市のタクシー数を郵便番号区域別（シミュレーション、時間経過）に表示:
データドリブン スタイル設定は、Google の行政区域の境界線ポリゴンを利用して、スタイル設定を適用したポリゴンを地図上に表示できる Google Maps Platform の機能です。独自のデータと組み合わせて、カスタマイズされたリッチなカスタム地図を作成し、視覚的な分析やデータの理解を深めるために使用できます。このドキュメントでは、動的データフィードを統合して、地図上でデータドリブン スタイル設定を使用してデータを準リアルタイムで可視化する理由と方法を説明するユースケースをいくつか紹介します。
データドリブン スタイル設定を使用すると、データの地理的分布を示す地図を作成したり、ポリゴンのスタイルを動的にカスタマイズしたり、クリック イベントを通じてデータを操作したりできます。これらの機能を使用すると、さまざまなユースケースや業界向けに、有益で魅力的な地図を作成できます。
データドリブン スタイル設定で動的なデータ更新を表示する地図に適用できるユースケースの例を次に示します。
- ライドシェア: リアルタイムの更新情報を使用して、需要の高いエリアを特定できます。この場合、一部のプロバイダではサージ価格が適用されることがあります。
- 交通: リアルタイムの更新情報を使用して、渋滞しているエリアを特定し、最適な代替ルートを決定できます。
- 選挙: 選挙の夜に、リアルタイムの世論調査データを使用して、結果をリアルタイムで可視化できます。
- 作業員の安全: リアルタイムの更新を使用して、イベントの発生をリアルタイムで追跡し、リスクの高いエリアを特定して、現場の対応者に状況認識を提供できます。
- 天気: リアルタイムの更新情報を使用して、暴風雨の動きを追跡し、現在の危険を特定して、警告やアラートを提供できます。
- 環境: リアルタイムの更新を使用して、火山灰やその他の汚染物質の移動を追跡し、環境劣化の領域を特定して、人間の活動の影響をモニタリングできます。
これらすべての状況において、お客様はリアルタイムのデータフィードと Google の境界を組み合わせることで、地図上でデータを迅速かつ簡単に可視化し、ほぼ瞬時に分析情報を得て、より適切な意思決定を行うことができます。
ソリューションへのアーキテクチャ アプローチ
次に、データドリブン スタイル設定を使用して動的データを可視化する地図を作成する手順を説明します。前述のように、このユースケースは、郵便番号別に可視化されたニューヨーク市のタクシーの数です。これは、ユーザーがタクシーを呼ぶのがどれくらい簡単かを理解するのに役立ちます。
このアプローチのアプリケーション アーキテクチャ図を以下に示します。
動的なデータドリブン スタイル設定ソリューション
次に、データセットに動的なデータドリブン スタイル設定の階級区分図を実装するために必要な手順を説明します。
このソリューションでは、ニューヨーク市周辺のリアルタイムのタクシー密度に関する仮想データセットを郵便番号別に可視化できます。これは現実世界のデータではありませんが、現実世界での応用が可能であり、データドリブン スタイル設定を使用して動的データを地図上に可視化する方法の威力と機能を実感できます。
ステップ 1: 可視化するデータを選択し、境界のプレイス ID に結合する
最初のステップは、表示するデータを特定し、Google の境界と一致することを確認することです。この照合は、各 postalCode に対して findPlaceFromQuery コールバック メソッドを呼び出すことで、クライアントサイドで実行できます。米国の郵便番号には一意の名前がありますが、他の行政レベルには一意の名前がありません。結果が曖昧になる可能性がある場合は、クエリに正しいプレイス ID を選択する必要があります。
const request = {
query: postalCode,
fields: ['place_id'],
};
function findPlaceId() {
placesService.findPlaceFromQuery(request, function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(results[0]);
}
});
}
データに緯度と経度の値が含まれている場合は、Geocoding API とコンポーネント フィルタリングを使用して、それらの緯度/経度の値を、スタイル設定する対象の地図のレイヤのプレイス ID 値に解決することもできます。この例では、POSTAL_CODE 地図のレイヤのスタイルを設定します。
ステップ 2: リアルタイム データに接続する
データソースに接続する方法はさまざまです。最適な実装は、特定のニーズと技術インフラストラクチャによって異なります。この例では、データが「zip_code」と「taxi_count」の 2 つの列を持つ BigQuery テーブルに格納されており、Firebase Cloud Functions を介してクエリを実行するとします。
async function queryNycTaxis() {
// Queries the NYC Taxis dataset.
// Create a client
const bigqueryClient = new BigQuery();
// The SQL query to run
const sqlQuery = 'SELECT zip_code, taxi_count
FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
const options = {
query: sqlQuery,
// Location must match that of the dataset(s)
// referenced in the query.
location: 'US',
};
// Run the query
const [rows] = await bigqueryClient.query(options);
rows.forEach(row => {
const postalCode = row['zip_code'];
const taxiCount = row['taxi_count'];
});
}
次に、データの更新速度を保つ必要があります。これを行う方法の 1 つは、ウェブワーカーを使用して上記のクエリを呼び出し、setInterval 関数を使用してデータを更新するタイマーを設定することです。間隔は、15 秒ごとに地図を更新するなど、適切な値に設定できます。間隔時間が経過するたびに、ウェブワーカーは postalCode ごとに更新された taxiCount 値をリクエストします。
これでデータのクエリと更新ができるようになったので、地図のポリゴンの外観にこれらの変更が反映されるようにしましょう。
ステップ 3: データドリブン スタイル設定で地図のスタイルを設定する
Maps JavaScript インスタンスの郵便番号境界にビジュアル スタイルを作成して適用するために必要な動的データ値を JSON オブジェクトとして取得できたので、次は階級区分図としてスタイルを設定します。
この例では、各郵便番号のタクシーの数に基づいて地図のスタイルを設定し、ユーザーが自分の地域のタクシーの密度と利用可能性を把握できるようにします。スタイルは、タクシー数の値によって異なります。タクシーが最も少ないエリアには紫色のスタイルが適用され、カラー グラデーションは赤、オレンジと変化し、最も密度の高いエリアはニューヨークのタクシーの黄色になります。このカラーパターンでは、これらの色の値を fillColor と strokeColor に適用します。fillOpacity を 0.5 に設定すると、ユーザーは下にある地図を見ることができます。strokeOpacity を 1.0 に設定すると、同じ色のポリゴンの境界を区別できます。
const featureLayer = map.getFeatureLayer(
google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
const placeFeature = featureStyleFunctionOptions.feature;
// taxiCount per (postal_code) PlaceID
const taxiCount = zips[placeFeature.placeId];
let fillColor;
let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
fillColor = "#571845";
strokeColor = "#571845";
} else if (taxiCount < 13) {
fillColor = "#900c3e";
strokeColor = "#900c3e";
} else if (taxiCount < 21) {
fillColor = "#c60039";
strokeColor = "#c60039";
} else if (taxiCount < 34) {
fillColor = "#fe5733";
strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) {
fillColor = "#fec30f";
strokeColor = "#fec30f";
}
return {
fillColor,
strokeColor,
fillOpacity: 0.5,
strokeOpacity: 1.0,
};
まとめ
Google 境界線のデータドリブン スタイル設定を使用すると、データを使用して地図のスタイルを設定し、さまざまな業界や分野でさまざまな実装を行うことができます。リアルタイム データに接続することで、何が、どこで、いつ起きているかを伝えることができます。この機能は、リアルタイム データの価値を引き出し、ユーザーが現実世界でリアルタイムにデータをより深く理解できるようにする可能性を秘めています。
次のアクション
- データドリブン スタイル設定を使用して Google マップの境界線をスタイル設定する方法のウェブセミナーをご覧ください。
- データドリブン スタイル設定のクリック イベントを使用して、可視化をさらに一歩進めます。
- 地図に高度なマーカーを追加することを検討してください。
寄稿者
主な著者:
Jim Leflar | Google Maps Platform ソリューション エンジニア