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

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

ニューヨーク市のタクシー数（郵便番号別）
ニューヨーク市の郵便番号境界別のタクシー数のアニメーション（シミュレーション、タイムラプス）:

データドリブン スタイル設定は Google Maps Platform の機能で、Google の管理境界ポリゴンを利用し、スタイル設定を適用して地図上に表示し、独自のデータを組み合わせてカスタマイズした充実した地図を作成して、視覚分析やデータのより深い理解に役立てることができます。このドキュメントでは、動的データフィードを統合することで、データドリブンのスタイル設定を使用して準リアルタイムで地図にデータを可視化する理由とその方法について説明します。

データドリブン スタイル設定を使うと、データの地理的分布を示す地図を作成したり、ポリゴン スタイルを動的にカスタマイズしたり、クリック イベントを通じてデータを操作したりできます。これらの機能を使用すると、さまざまなユースケースや業界において、有益で魅力的な地図を作成できます。

データドリブン スタイル設定の動的なデータ更新を表示する地図に適用可能なユースケースの例を以下に示します。

• ライドシェアリング: リアルタイム更新を使用して、需要の多い地域を特定できます。その場合、プロバイダによっては料金が急増することがあります。
• 交通情報: リアルタイムの運行情報を使用して、輻輳が発生している地域を特定できます。これは、最適な代替ルートの決定に役立ちます。
• 選挙: 選挙日の夜には、リアルタイムのデータ ポーリング データを使用して、結果が発生したときに可視化できます。
• 作業員の安全: リアルタイム更新を使用して、展開されるイベントをリアルタイムで追跡し、リスクの高い地域を特定し、現場の対応者に状況認識を提供できます。
• 天気情報: リアルタイムの更新情報を使用して、嵐の動きを追跡し、現在発生している危険を特定し、警告やアラートを提供できます。
• 環境: リアルタイムの更新を利用して、火山灰などの汚染物質の移動の追跡、環境劣化の発生している地域の特定、人間の活動の影響のモニタリングを行うことができます。

どのような状況でも、リアルタイムのデータフィードと Google の境界線を組み合わせて、地図上でデータを迅速かつ簡単に可視化することで、付加価値を引き出すことができます。また、ほぼリアルタイムの分析情報を手に入れて、より的確な意思決定を行うことができます。

今すぐ試す: Google Cloud コンソールにアクセスし、Maps JavaScript API を有効にします。

ソリューションに対するアーキテクチャのアプローチ

次に、データドリブンのスタイル設定を使用して動的データを可視化する地図の作成手順を説明します。前述のように、このユースケースはニューヨーク市のタクシー数を郵便番号別に可視化します。これにより、ユーザーはタクシーを手配するのがどれほど簡単かを理解できます。

アーキテクチャ
このアプローチのアプリケーション アーキテクチャ図を以下に示します。

動的データドリブン スタイル設定ソリューション

それでは、データセットに動的なデータドリブン スタイル設定の階級区分図を実装する手順を見ていきましょう。

このソリューションを使用すると、ニューヨーク市周辺のリアルタイムのタクシー密度の架空のデータセットを郵便番号別に可視化できます。実際のデータではありませんが、実際の用途を扱っているため、データドリブンのスタイル設定を使用して地図上に動的データを可視化できます。

ステップ 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 と drawColor に適用します。FillOpacity を 0.5 に設定すると、ユーザーは基礎となる地図を見ることができ、drawOpacity を 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 ソリューション エンジニア