Mapbox Tiling Serviceでデータクラスタリングが利用可能になりました

本日より、お客様はレシピ機能を使用してMapbox Tiling Service (MTS)経由でタイル化されたデータを直接クラスタリングできるようになりました。開発者は、ソースデータを事前にクラスタリングしたり、Tippecanoeのような従来のツールを使用してクラスタ化されたタイルセットを作成したりする必要がなくなりました。MTSの新しいクラスタリング機能により、データパイプラインの統合と効率化が容易になります。

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

MTSクラスタリングにより、フィーチャのドロップや欠落なしに、高ポイント数、低ズームレベルのデータセットに対して、クラスタ円とヒートマップのデータ可視化が可能になります。これにより、高ポイント数のデータセットの場合、低いズームレベルでレイヤーサイズの制限に達するのを回避しやすくなります。たとえば、開発者は、ズームレベル4で大陸全体または大規模な国で使用可能な駐車スポットの円クラスターを作成できます。開発者は、ズームレベル3でも表示される米国全体の不動産ポートフォリオの価値のヒートマップを作成することもできます。プロパティが欠落することはありません。

不動産組織は、分析を支援するために、国内のリスティングデータベースを内部ダッシュボードにクラスター化することができます。旅行計画サイトは、旅行を計画する際にホテルの空室状況を俯瞰できるように、都市または国ごとにホテルのリスティングをクラスター化することができます。

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

‍“ポルトガル、スペイン、ブルガリア、ポーランド、その他のヨーロッパ諸国にわたる100万件以上の不動産物件を表示することは、複雑な課題でした。Propertium.ioで処理する膨大な量のデータ（文字通り、国全体に及ぶギガバイト単位のデータ）により、地図の読み込み、パン、ズームが遅く、煩雑になりました。クラスタリングがなければ、シームレスとは程遠い体験でした。”

「この問題を解決するために、迅速かつ効果的なレシピ変更により、わずか60分でMTSクラスタリングを実装しました。現在、Propertium.ioを利用する投資家は、高ROIの不動産機会に最適な場所を一目で確認できます。リスボン、マドリード、ソフィア、ワルシャワなど、どこであっても、このプラットフォームは、よりスマートな投資判断を下すために必要なスピードと洞察を提供します。」- Nikita Navalikhin, Founder, Propertium.io

MTSを使用してクラスターデータの視覚化を作成するには、2つのステップがあります。

ステップ1：MTSでデータをクラスタリングする

MTSでデータをクラスタリングするには:

1. セット カウント 各ポイントの値が1のフィーチャー属性
2. タイル構成でクラスターフィールドを設定します

ステップ1 - カウントフィーチャ属性を設定します

まず、以下を追加します フィーチャー属性 呼び出し カウント 宛先 フィーチャー構成 MTSレシピの セット このフィーチャー属性の値を1に設定します。MTSは各ポイントを集計して、クラスターポイント数を生成します。

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

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

次に、以下を追加します。 unionオブジェクト 宛先 タイル構成 MTSレシピの設定 クラスタ 宛先 true. 空のを使用する group_by （"group_by": []） 属性に関係なく、すべてのフィーチャ（クラスタ化されるポイントなど）を結合します。設定 地域数 各タイルのクラスタ化されたポイントの数に。その 地域数 1〜16,384の間の4の累乗である必要があります。したがって、有効な値は1です, 4, 16, 64, 256, 1024, 4096, または 16384.

最後に、集計ルールを使用して、各ポイントのカウントを合計し、クラスターのポイントカウントを作成します。クラスタリングまたはヒートマップデータ視覚化で使用するために、他のフィーチャ属性に対して追加の集計ルールをここに追加できます。たとえば、不動産のフットプリントデータセットの総資産価値、または都市データセットの総人口を計算します。

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

最終レシピ

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

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

ステップ2：クラスタ化されたデータのスタイル設定

タイルセットを公開すると、タイルセットエクスプローラーに等間隔のポイントセットが表示されます。これらのポイントはまだクラスターのように見えませんが、データは、ほんの数ステップ追加するだけでデータ駆動型スタイリングを可能にするように構成されています。

クラスタを作成するには、データ駆動型スタイリングを円レイヤーまたはヒートマップレイヤーのいずれかで使用します。円レイヤーは、クラスタのポイント数に基づいてサイズと色が異なる円を持つ従来のクラスタマップを作成します。または、代わりにヒートマップレイヤーを使用して、色の範囲を使用して密度を表示します。

以下のコードサンプルでは、Mapbox GL JSを使用しています。Mapbox Studio、およびiOSとAndroid向けのMapbox Mobile Maps SDKも、円とヒートマップレイヤーの作成をサポートしています。

データ駆動型スタイルを使用した従来のクラスターサークルレイヤーを作成する

以下の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 by zoom level
      "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
      // Color ramp for heatmap. Domain is 0 (low) to 1 (high)
      "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 Tiling Serviceの継続的な改善

MTSクラスタリングは、現在、すべてのMTSのお客様に追加費用なしでご利用いただけます。MTSの詳細については、MTSドキュメントをご覧ください。

クラスタリングは、ラスタデータのサポートや、信頼性とコンプライアンスのためのマルチリージョンアーキテクチャなど、Mapbox Tiling Serviceに対する最近の改善点の1つです。開始するには、ラスタMTSドキュメントを確認してください。マルチリージョンMTSの詳細については、Mapbox（mts-multi-region@mapbox.com）にメールでお問い合わせください。