Mapbox Tiling Serviceでデータクラスタリングが利用開始に｜ブログ

Mapboxのサービス概要資料はこちら

Mapboxのアカウント作成はこちら

お問い合わせはこちら

本日より、Mapbox Tiling Service (MTS) 経由で、レシピ機能を使用してタイル化されたデータを直接クラスタ化できるようになりました。ソースデータを事前にクラスタ化したり、タイルセットを手動で作成するために Tippecanoeのようなレガシーツールを使用したりする必要はもうありません。データのクラスタリングは、データ可視化や地図設計のための貴重な機能であり、MTSの新しいクラスタリング機能により、データパイプラインの統合と合理化が容易になります。

多数のポイント数、低ズームレベルのデータセットを可視化

MTSのクラスタリング機能により、ポイント数が多く、ズームレベルが低いデータセットでも、クラスターサークルやヒートマップによるデータ視覚化が可能になり、データが欠落することがなくなります。これにより、ポイント数が多いデータセットのズームレベルが低い場合でも、レイヤーサイズの制限を回避しやすくなります。例えば、開発者はズームレベル4で、大陸全体もしくは大きな国の利用可能な駐車場のクラスターマップを作成することができます。また、デベロッパーは米国全体の不動産ポートフォリオの価値を、ズームレベル3でも見えるヒートマップで作成することができます。

金融および不動産分析を行うCoreLogic社は、CoreLogic InsightサービスでMTSクラスタリングを使用しています。

”MTSクラスタリングにより、ポイントが多いデータセットをクラスタリングするためにTippecanoeのようなタイル化ツールを使用する必要がなくなりました。自社でホスティングしていたTippecanoeのスタックをすべて停止し、データパイプラインをすべてMTSに移行したことで、時間とリソースを節約することができました。” ー CoreLogic、プリンシパルソフトウェアエンジニア、Jin Yi氏

旅行計画サイトでは、ホテルのリストを都市や国ごとにまとめることで、ユーザーが旅行を計画する際にホテルの空き状況を俯瞰できるようになります。

‍

Propertium.ioは最近、不動産マップにクラスタリングを採用しました。

”ポルトガル、スペイン、ブルガリア、ポーランドなどヨーロッパ諸国にまたがる100万件以上の不動産物件を表示することは、技術的に複雑な課題でした。Propertium.ioが処理する膨大なデータ量により、地図の読み込みやズームが遅くなり、スムーズな操作が困難だったのです。特に、クラスタリングなしの状態では、地図上でシームレスな操作性を実現するのはほど遠い状況だったのです。この課題を解決するため、私たちは迅速に対応し、わずか60分でMTSクラスタリングを実装しました。結果として、Propertium.ioのユーザーは、リスボン、マドリッド、ソフィア、ワルシャワなどの都市を含む広範囲の不動産情報を瞬時に把握できるようになりました。投資家は、このプラットフォームを通じて、高いROIが期待できる最適な物件を効率よく見つけ、より賢明な投資判断を下せるようになりました。”ーPropertium.io創設者 Nikita Navalikhin氏

‍

MTSを使用してクラスターデータ可視化を作成するには、次の2ステップが必要です。

1.MTSでクラスタリングデータを作成

MTSでデータをクラスタリングするには、次の2つのステップが必要です。

各ポイントに値1を設定してcount機能属性を設定します
タイル設定でクラスタフィールドを設定します

ステップ1 - count機能属性を設定する

まず、MTSレシピの機能構成にcountと呼ばれる機能属性を追加します。この機能属性の値を1に設定します。MTSは各ポイントを合計してクラスタポイントのカウントを作成します。


{
 "version": 1,
 "layers": {
   "locations": {
     "minzoom": 0,
     "maxzoom": 12,
     "source": "mapbox://tileset-source/{username}/{id}",
     "features": {
       "attributes": {
         "set": { "count": 1 }
       }
     }
   }
 }
}

ステップ 2 - クラスタリングによるポイントの結合

次に、MTSレシピのタイル構成に結合オブジェクトを追加し、clusterをtrueに設定します。属性に関係なくすべての機能(クラスタ化するポイントなど)を結合するには、空のgroup_by( “group_by”: [ ])を使用します。タイルごとに希望するクラスタ化ポイントの数にregion_countを設定します。region_count は 1から16,384までの4の累乗でなければなりません。したがって、有効な値は 1,4,16,64,256,1024,4096,16384 です。

最後に、集約ルールを使用して、各ポイントのcountを合計し、クラスターのポイントカウントを作成します。追加の集約ルールをここへ追加し、クラスタリングやヒートマップのデータ視覚化で使用したいその他の機能属性を指定することもできます。例えば、不動産フットプリントのデータセットの総プロパティ値や、都市データセットの総人口を計算することができます。


     "tiles": {
       "union": [
         {
           "group_by": [],
           "cluster": true,
           "region_count": 64,
           "aggregate": { "count": "sum" }
         }
       ]
     }

最終レシピ

最終的なクラスタリングMTSレシピは次のようになります。


{
 "version": 1,
 "layers": {
   "world-cities": {
     "minzoom": 0,
     "maxzoom": 12,
     "source": "mapbox://tileset-source/mapbox-test/world-cities",
     "features": {
       "attributes": {
         "set": { "count": 1 }
       }
     },
     "tiles": {
       "union": [
         {
           "group_by": [],
           "cluster": true,
           "region_count": 64,
           "aggregate": { "count": "sum" }
         }
       ]
     }
   }
 }
}

クラスタ化されたデータのスタイル設定

タイルセットを公開すると、タイルセットエクスプローラに等間隔に配置されたポイントのセットが表示されます。スタイル設定がされていないため、これらのポイントはまだクラスターのように見えません。

クラスターを作成するには、円レイヤーまたはヒートマップレイヤーを使用して、データドリブンスタイリングを行うことができます。円レイヤーは、クラスターのポイント数に基づいて異なるサイズと色の円を作成し、従来のクラスターマップを作成します。また、ポイント数以外の属性に基づいてクラスターに重み付けを行うヒートマップレイヤーを使用することもできます。

以下のコードサンプルではMapbox GL JSを使用しています。Mapbox StudioやMapbox SDK for iOS, Androidでも円とヒートマップのレイヤーを作成できます。

データドリブンのスタイル設定による従来のクラスター円レイヤーの作成

以下のMapbox GL JSコードサンプルでは、クラスターのポイントカウントを使用した円レイヤーのデータドリブンスタイリングを使用しています。ポイントカウントが2以下のクラスターは半径3pxの青い円、2~10のポイントカウントは半径5pxの黄色い円、10以上のポイントカウントは半径10pxのピンクの円で表示されます。


map.addLayer({
 id: "locations",
 type: "circle",
 source: "locations",
 "source-layer": "locations",
 filter: ["has", "count"],
 paint: {
   "circle-color": [
     "step",
     ["get", "count"],
     "#51bbd6",
     2,
     "#f1f075",
     10,
     "#f28cb1",
   ],
   "circle-radius": ["step", ["get", "count"], 3, 2, 5, 10, 10],
 },
});

クラスター化されたタイルセットデータを使用したヒートマップの作成

以下の Mapbox GL JS のコードサンプルでは、ヒートマップレイヤーを使用してクラスタ化されたポイントを表示します。「Mapbox GL JSでヒートマップを作成するチュートリアル」では、データソースのヒートマップペイントプロパティを変更する方法について詳しく説明しています。


map.addLayer(
 {
   id: "locations",
   type: "heatmap",
   source: "locations",
   "source-layer": "locations",
   maxzoom: 9,
   paint: {
     "heatmap-weight": [
       "interpolate",
       ["linear"],
       ["get", "count"],
       0,
       0,
       5,
       5,
     ],
     // Increase the heatmap color weight weight by zoom level
     // heatmap-intensity is a multiplier on top of heatmap-weight
     "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
     // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
     // Begin color ramp at 0-stop with a 0-transparancy color
     // to create a blur-like effect.
     "heatmap-color": [
       "interpolate",
       ["linear"],
       ["heatmap-density"],
       0,
       "rgba(33,102,172,0)",
       0.2,
       "rgb(103,169,207)",
       0.4,
       "rgb(209,229,240)",
       0.6,
       "rgb(253,219,199)",
       0.8,
       "rgb(239,138,98)",
       1,
       "rgb(178,24,43)",
     ],
     // Adjust the heatmap radius by zoom level
     "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 20, 6, 40],
     // Transition from heatmap to circle layer by zoom level
     "heatmap-opacity": ["interpolate", ["linear"], ["zoom"], 7, 1, 9, 0],
   },
 },
 "waterway-label"
);

map.addLayer(
 {
   id: "locations-point",
   type: "circle",
   source: "locations",
   "source-layer": "locations",
   minzoom: 7,
   paint: {
     // Size circle radius by point count and zoom level
     "circle-radius": [
       "interpolate",
       ["linear"],
       ["zoom"],
       7,
       ["interpolate", ["linear"], ["get", "count"], 1, 1, 6, 4],
       16,
       ["interpolate", ["linear"], ["get", "count"], 1, 5, 6, 50],
     ],
     // Color circle by point count
     "circle-color": [
       "interpolate",
       ["linear"],
       ["get", "count"],
       1,
       "rgba(33,102,172,0)",
       2,
       "rgb(103,169,207)",
       3,
       "rgb(209,229,240)",
       4,
       "rgb(253,219,199)",
       5,
       "rgb(239,138,98)",
       6,
       "rgb(178,24,43)",
     ],
     "circle-stroke-color": "white",
     "circle-stroke-width": 1,
     // Transition from heatmap to circle layer by zoom level
     "circle-opacity": ["interpolate", ["linear"], ["zoom"], 7, 0, 8, 1],
   },
 },
 "waterway-label"
);

Mapbox タイリングサービスの継続的な改善

MTSクラスタリングは、追加費用なしですべてのMTSのお客様にご利用いただけます。まずは、MTSに関してはMapboxドキュメントサイトでご覧いただけます。

クラスタリングは、ラスターデータのサポートや、信頼性とコンプライアンスのためのマルチリージョンアーキテクチャなど、Mapboxが最近Mapbox Tiling Serviceに加えた多くの改良点のひとつです。ラスターMTSのドキュメンテーションもあわせてご覧ください。マルチリージョンMTSにご興味をお持ちの場合は、mts-multi-region@mapbox.comまでお問い合わせください。

＊本記事は、Mapbox Inc. Blogの翻訳記事です。

No items found.

Mapboxのサービス概要資料はこちら

Mapbox Japanでは、プロダクトの概要や導入事例を紹介した資料をご用意しております。無料でダウンロードいただけますので、ぜひMapboxのビジネス活用のご参考にご利用ください。

無料でダウンロード無料でダウンロード

Mapboxのアカウント作成はこちら

Mapboxではお得な無料枠をご用意しているため、お気軽にご利用を開始することができます。ご登録がお済みでない方は今すぐMapboxアカウントに登録してMapboxのツール・サービスをお試しください。

今すぐ無料登録

お問い合わせはこちら

Mapboxのプロダクトや企業情報に関するご質問・ご不明点はこちらからお問い合わせください。

お問い合わせ

共有リンク

MTS

ニュースレター購読

導入事例

利用料金

ブログ

お問い合わせ

プロダクト

Mapbox Tiling Serviceでデータクラスタリングが利用開始に

Mapboxのサービス概要資料はこちら

Mapboxのアカウント作成はこちら

お問い合わせはこちら

多数のポイント数、低ズームレベルのデータセットを可視化

1.MTSでクラスタリングデータを作成

ステップ1 - count機能属性を設定する

ステップ 2 - クラスタリングによるポイントの結合

最終レシピ

クラスタ化されたデータのスタイル設定

データドリブンのスタイル設定による従来のクラスター円レイヤーの作成

クラスター化されたタイルセットデータを使用したヒートマップの作成

Mapbox タイリングサービスの継続的な改善

Mapboxのサービス概要資料はこちら

Mapboxのアカウント作成はこちら

お問い合わせはこちら

Mapbox Streetsでできる9つのこと｜Mapbox Streets v8

パフォーマンスとユーザーリテンションのためのマップ

【新機能リリース】国土地理院データを利用した地形タイル (パブリックベータ版) を提供｜Vector Terrain for Japan

ニュースレターを購読

ニュースレター購読

デジタルマップ活用の業界別事例

地図ゲーム開発におけるMapbox活用ガイド - Mapbox Gaming Solution

【デモ】Mapboxと歩く京都観光マップ

プロダクト

ソリューション

企業情報

リソース

導入事例

ドキュメント

利用料金

ブログ

お問い合わせ

プロダクト

Mapbox Tiling Serviceでデータクラスタリングが利用開始に

Mapboxのサービス概要資料はこちら

Mapboxのアカウント作成はこちら

お問い合わせはこちら

多数のポイント数、低ズームレベルのデータセットを可視化

1.MTSでクラスタリングデータを作成

ステップ1 - count機能属性を設定する

ステップ 2 - クラスタリングによるポイントの結合

最終レシピ

クラスタ化されたデータのスタイル設定

データドリブンのスタイル設定による従来のクラスター円レイヤーの作成

クラスター化されたタイルセットデータを使用したヒートマップの作成

Mapbox タイリングサービスの継続的な改善

Mapboxのサービス概要資料はこちら

Mapboxのアカウント作成はこちら

お問い合わせはこちら

関連記事

プロダクト

Mapbox Streetsでできる9つのこと｜Mapbox Streets v8

プロダクト

パフォーマンスとユーザーリテンションのためのマップ

プロダクト

【新機能リリース】国土地理院データを利用した地形タイル (パブリックベータ版) を提供｜Vector Terrain for Japan

ニュースレターを購読