このページは Cloud Translation API によって翻訳されました。

データドリブンのスタイル設定でデータをリアルタイムで表示

このドキュメントでは、Maps JavaScript API を使用して Google 境界線の動的なデータドリブンのスタイル設定を実装する理由と方法について説明します。このスタイル設定は、業種や分野を問わず、さまざまなユースケースで役立ちます。

郵便番号別のニューヨーク市のタクシー数（タイムラプス） — **ニューヨーク市のタクシー数（郵便番号別）**
ニューヨーク市のタクシー数（郵便番号の境界別、シミュレーション、経過時間）:

地図の凡例 — **ニューヨーク市のタクシー数（郵便番号別）**
ニューヨーク市のタクシー数（郵便番号の境界別、シミュレーション、経過時間）:

データドリブンスタイル設定は、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: リアルタイムデータに接続する

データソースに接続する方法はさまざまあり、最適な実装方法はニーズと技術インフラストラクチャによって異なります。ここでは、「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 とめざまし Color に適用します。fillOpacity を 0.5 に設定すると基となる地図を表示でき、ストローク Opacity を 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 ソリューションエンジニア