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

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

ニューヨーク市のタクシー数（郵便番号別）
ニューヨーク市のタクシー数を郵便番号区域別にアニメーション化（シミュレーション、時間経過）:
ニューヨーク市のタクシー数（郵便番号別）（時刻の経過） 地図の凡例

データドリブン スタイル設定は、Google Maps Platform の機能の 1 つです。Google の行政区域境界線ポリゴンを利用し、それらのポリゴンにスタイル設定を適用して地図上に表示できます。また、独自のデータと組み合わせて、リッチでカスタマイズされた地図を作成できます。この地図は、データの視覚的な分析や理解の向上に役立ちます。このドキュメントでは、動的データフィードを統合してデータドリブン スタイル設定で地図上にデータをほぼリアルタイムで可視化する理由と方法を説明するユースケースについて説明します。

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

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

  • 乗車シェアリング: リアルタイムの更新を使用して需要の高いエリアを特定できます。この場合、一部のプロバイダは急増料金を設定することがあります。
  • 交通: リアルタイム更新を使用して渋滞しているエリアを特定し、最適な代替ルートを決定できます。
  • 選挙: 選挙当日、リアルタイムのデータ ポーリング データを使用して、結果をリアルタイムで可視化できます。
  • 作業者の安全: リアルタイムの更新を使用して、イベントの発生状況をリアルタイムで追跡し、危険性の高いエリアを特定し、現場の対応者に状況認識を提供できます。
  • 天気情報: リアルタイムの更新情報を使用して、嵐の動きを追跡し、現在発生している危険を特定し、警告やアラートを提供できます。
  • 環境: リアルタイムの更新により、火山灰などの汚染物質の移動を追跡したり、環境の悪化している地域を特定したり、人間活動の影響をモニタリングしたりできます。

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

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

次に、データドリブンのスタイル設定を使用して動的データを可視化する地図の作成手順を説明します。前述のとおり、このユースケースはニューヨーク市のタクシー数を郵便番号別に可視化します。これにより、タクシーを呼び出すのがどれくらい簡単かをユーザーが把握しやすくなります。

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

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

データセットに動的データドリブン スタイル設定の階級区分図を実装するために必要な手順について説明します。

このソリューションを使用すると、ニューヨーク市周辺のリアルタイムのタクシー密度の架空のデータセットを郵便番号別に可視化できます。これは実際のデータではありませんが、実際のアプリケーションで使用できます。また、データドリブン スタイル設定を使用して動的データを地図上に可視化する方法の強力さと機能性を把握できます。

ステップ 1: 可視化して境界プレース ID に結合するデータを選択する

最初のステップは、表示するデータを特定し、Google の境界と一致させることです。この照合は、郵便番号ごとに 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: データドリブン スタイル設定で地図のスタイルを設定する

これで、地図 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 境界線のデータドリブン スタイル設定を使用すると、データを使用して地図のスタイルを設定できるため、さまざまな業界やセグメントでさまざまな実装が可能になります。リアルタイム データに接続すると、何が、どこで、いつ発生しているかを通知できます。この機能により、リアルタイム データの価値を活用し、ユーザーが現実世界でリアルタイムにデータをよりよく理解できるようになります。

次のアクション

寄稿者

プリンシパル作成者:

Jim Leflar | Google Maps Platform ソリューション エンジニア