ベクトルタイルなのに地図に表示できない？不動産情報ライブラリのタイルをWeb地図で表示できるようにしました

何を作ったか？

「国交省の不動産情報ライブラリAPI のバイナリベクトルタイルを、Mapbox / MapLibre GL JS で直接使えるようにするプロキシAPI」を作りました。これを使えば、下記のようなコードだけで不動産価格データを地図に重ねて表示できます：

// 不動産価格（取引価格・成約価格）ポイントのベクトルタイルソースを追加
map.addSource("real-estate-price", {
  type: "vector",
  tiles: [
    "https://du6jhqfvlioa4.cloudfront.net/ex-api/external/XPT001/{z}/{x}/{y}.pbf?from=20234&to=20243"
  ],
  minzoom: 13,
  attribution: '<a href="https://www.reinfolib.mlit.go.jp/">不動産情報ライブラリ（国土交通省）</a>'
});

// 表示レイヤを追加
map.addLayer({
  id: "real-estate-points",
  type: "circle",
  source: "real-estate-price",
  "source-layer": "hits", // ソースレイヤー名は hits を指定して下さい
  paint: {
    "circle-radius": 10,
    "circle-color": "#ff0000",
    "circle-stroke-width": 1,
    "circle-stroke-color": "#ffffff"
  }
});

実際の動作デモはこちら：
CodePenデモ
https://codepen.io/geolonia/pen/MYYgwEJ

🔍 なぜプロキシAPIを作ったのか？

国交省が提供する「不動産情報ライブラリ」は、日本全国の不動産取引価格や都市計画、防災、人口、公共施設などの情報を z/x/y 形式のバイナリベクトルタイル（PBF）で提供しています。まさに「地図で使ってください」と言わんばかりのデータです。

しかし……実際に地図で使ってみようとすると、以下のような壁にぶつかりました：

課題1：APIキーが公開されてしまう

不動産ライブラリAPIを使うには、APIキーを取得して、HTTPヘッダーに追加する必要があります。

Ocp-Apim-Subscription-Key: xxxxxxxx

サーバーサイドでリクエストする分には問題ないのですが、MapLibre GL JS や Mapbox GL JS で、ヘッダーにAPIキーをセットしようとすると、

フロントエンドにAPIキーを埋め込むしかなく、APIキーが公開されてしまいNG。

課題2：CORSエラーが発生する

MapLibreから直接タイルを読み込もうとすると、Access-Control-Allow-Origin ヘッダーが返ってこないため、CORSエラーでブロックされます。

課題3：URL形式が「クエリ文字列式」で地図ライブラリと相性が悪い

APIのPBFエンドポイントは、以下のように query string でパラメータを渡します：

https://www.reinfolib.mlit.go.jp/ex-api/external/XPT001?response_format=pbf&z=13&x=7312&y=3008&from=20223&to=20234

でも MapLibre の tiles プロパティは、以下のような「パス形式」のURLであることが一般的：

https://your-api.example.com/tiles/landprice/{z}/{x}/{y}.pbf

※ MapBox の TileJSON 仕様によると、{z}、{x}、{y}のプレースホルダーがあればパス形式でなくても良いとあるのですが、今回は一般的なパス形式に揃えています。

そこで作った：プロキシAPI（Node.js × AWS CDK）

これらの課題を解決するために、AWS上にプロキシAPIを構築しました。主な構成は以下です：

アーキテクチャ

CloudFront：キャッシュ
Lambda@Edge（Node.js）：APIキーの付加、CORS対応、URL変換
Secrets Manager：APIキーを保存しておいてビルド時に同梱

今回のプロキシAPIでは、AWSの CloudFront + Lambda@Edge を使って、 APIキーの付与とCORSヘッダーの付加という2つの処理をCDNレイヤーで実現しています。

具体的には以下のような流れです：

クライアントからベクトルタイルのURLにリクエストが送られる（例：https://example.com/{z}/{x}/{y}.pbf）
CloudFrontから不動産情報ライブラリAPIのリクエスト時に、Lambda@Edgeで APIキーを追加、{z}/{x}/{y}.pbfのパスを response_format=pbf&z={z}&x={x}&y={y}というクエリパラメータに置換
CloudFrontからクライアントへのレスポンス時に、Lambda@Edgeで CORSヘッダーを付加

これにより、MapLibreなどのクライアントライブラリで直接PBFタイルを読み込むことが可能になります。

エンドポイント例

https://du6jhqfvlioa4.cloudfront.net/<不動産ライブラリAPIの任意のパス>/{z}/{x}/{y}.pbf?<任意のクエリパラメータ>

Mapbox / MapLibre GL JS からはそのまま読み込めます！

ソースレイヤー名は hits を指定して下さい。
不動産ライブラリ API 操作説明で解説されている任意のクエリパラメータを指定できます。（response_format, z, x, y` のクエリパラメータは指定しないで下さい）
不動産ライブラリAPI自体への負荷を考え、ベクトルタイルの minzoomは 13に設定しています

map.addSource("landprice", {
  type: "vector",
  tiles: [
    "https://du6jhqfvlioa4.cloudfront.net/ex-api/external/XPT001/{z}/{x}/{y}.pbf?from=20223&to=20234"
  ],
  minzoom: 13,
  attribution: '<a href="https://www.reinfolib.mlit.go.jp/">不動産情報ライブラリ（国土交通省）</a>'
});


// 表示レイヤを追加
map.addLayer({
  id: "landprice-points",
  type: "circle",
  source: "landprice",
  "source-layer": "hits", // ソースレイヤー名は hits を指定して下さい
  paint: {
    "circle-radius": 10,
    "circle-color": "#ff0000",
    "circle-stroke-width": 1,
    "circle-stroke-color": "#ffffff"
  }
});

※ もちろん QGIS でも読み込めます！

経産省・内閣府が進める地理空間連携への対応性

このプロキシAPIが出力する z/x/y 形式のベクトルタイルは、

経済産業省が推進する「空間ID」
内閣府「地理空間データ連携基盤」

などの各種地理空間プラットフォームと形式的に互換性があります。つまり、同じ座標系・タイル形式を前提としたデータ基盤と重ね合わせがしやすい構造になっており、将来的な「データの連携」や「マッシュアップ」にも向いています。

公開

CDKコードは以下のGitHub リポジトリで公開しています。興味ある方はぜひチェックしてください！

https://github.com/geolonia/mlit-estate-library-proxy-api

あとがき

不動産情報ライブラリAPIで、データがベクトルタイル形式で配信されたことは素晴らしい事だと思います！ただ「惜しい！」部分が多かったので、こうしたラッパーを通じてもっと使いやすくなれば、位置情報のデータ連携が加速するはず。

「このAPIをこんな風に活用したい」などあれば、ぜひ教えてください！

← Previous Post