🗺️

Overture Maps Foundationのデータを活用したい (3): Mapboxを用いたクラスタ可視化

2023/10/04に公開

Overture Maps Foundationというものがあります。前回、位置データ (Placesデータ) をダウンロードして保存しました。

https://zenn.dev/takilog/articles/e96d8c1e132db4

今回はMatplotlibではなく、Mapboxを利用して、ダウンロードしてきたPOI情報を地図上に可視化してみます。

データの確認

前回の記事でダウンロードして総数のうち、10,000個のPOIを格納してgeojson形式に変換したものを用意しました。このような形式になっています。基本的には点 (Point) として、名前とID・カテゴリ名・緯度経度を入力してあります。

{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": 195968,
        "name": "\u6f22",
        "cat": "japanese_restaurant"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ 139.7983606, 35.6873133 ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": 3419,
        "name": "\u30ac\u30ec\u30fc\u30b8\u30a2\u30d1\u30fc\u30c8\u6e80\u5ba4\u7d4c\u55b6 by GLB",
        "cat": "real_estate"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ 139.7714867, 35.6699106 ]
      }
    }
  ]
}

Mapboxを用いた可視化

実装について

たくさんの地点データがあるため、Mapboxのサンプルソースに使われているマーカーをクラスタ化した地図上の可視化を試してみます。Mapboxのサンプルソース (データは地震の情報) はこちらです。

https://docs.mapbox.com/mapbox-gl-js/example/cluster/

入力形式は同じようにgeojsonにしてあるので、Overtureからダウンロードしてきて加工して作ったgeojsonをそのまま入力すると、地図上に可視化できます。詳細や細かい調整は上のサンプルソースのドキュメントを確認してください。

可視化した結果

結果を3段階で見てみます (クラスタ化したマーカー、もう少し小さいクラスタ、個別のPoint)。

引きの状態ではこのような表示になります。

クラスタをクリックしたり、地図を操作してもう少し拡大すると、次のようになります。

拡大レベルをあげていくと個別の点が可視化されます。個別の点をクリックするとOvertureから取得してきた名前が表示されます。

レポジトリ

今回の記事で使ったソースなどはこちらに起きました。地図アクセスのため、MapboxのAPIキーが必要です。

https://github.com/cocomoff/Visualize-Overture-Places-Mapbox

Discussion