このドキュメントでは、Google 境界線の動的なデータドリブン スタイル設定を Maps JavaScript API を使用して実装する理由と方法について説明しています。この API はさまざまな業界や分野のさまざまなユースケースで役立ちます。
データドリブンのスタイル設定を使用して、ニューヨーク市のタクシー数を郵便番号区域別（シミュレーション、タイムラプス）に可視化:
データドリブン スタイル設定は、Google Maps Platform の機能です。この機能を使用すると、Google の行政区域のポリゴンを利用して、地図上に表示するポリゴンのスタイルを設定し、独自のデータを組み合わせて、データの可視化分析や理解の向上に役立つリッチなカスタム地図を作成できます。このドキュメントでは、動的データフィードを統合して、データドリブン スタイル設定でデータを準リアルタイムで地図上に可視化する理由と方法について説明します。
データドリブン スタイル設定を使用すると、データの地理的分布を示す地図を作成し、ポリゴンのスタイルを動的にカスタマイズして、クリック イベントでデータを操作できます。これらの機能を使用して、さまざまなユースケースや業界で役立つ、情報量が多く魅力的な地図を作成できます。
データドリブン スタイル設定で動的データの更新を表示するマップに適用できるユースケースの例を次に示します。
- ライドシェア: リアルタイムの更新を使用して、需要の高いエリアを特定できます。一部のプロバイダでは、このエリアで料金が急騰する可能性があります。
- 交通機関: リアルタイムの更新を使用して、混雑しているエリアを特定できます。これにより、最適な代替ルートを決定できます。
- 選挙: 選挙の夜には、リアルタイムのデータポーリング データを使用して、結果をリアルタイムで可視化できます。
- 労働者の安全: リアルタイムの更新を使用して、イベントの展開をリアルタイムで追跡し、リスクの高いエリアを特定して、現場の対応者に状況を把握させることができます。
- 天気: リアルタイムの更新を使用して、嵐の動きを追跡し、現在の危険を特定して、警告とアラートを提供できます。
- 環境: リアルタイムの更新を使用して、火山灰やその他の汚染物質の動きを追跡し、環境悪化のエリアを特定して、人間の活動の影響をモニタリングできます。
これらの状況では、リアルタイムのデータフィードと 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: リアルタイム データに接続する
データソースに接続する方法はいくつかあります。最適な実装は、特定のニーズと技術インフラストラクチャによって異なります。ここでは、データが BigQuery テーブルに保存され、2 つの列（zip_code と taxi_count）が含まれているとします。また、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 ソリューション エンジニア