地域コードで塗る地図を HTML で作る

Queria が配っている都道府県・市区町村・町丁目の境界を使い、地域コードごとの値で色を塗った地図を 1 枚の HTML で作る

Queria は、都道府県・市区町村・町丁目の境界を地図のタイル（PMTiles 形式）にして配っています。タイルの各区画は地域コードを持っているので、地域コードと値の組を用意すれば、その値で色を塗った地図を作れます。境界のファイルをダウンロードして変換する必要はありません。

このページの HTML は、AI に地図のアプリを作ってもらうときの見本にも使えます。AI にこのページの URL を渡してください。

タイルの場所

https://assets.queria.io/boundaries/boundaries-20261027.pmtiles

ファイル名の日付は、タイルを作った日です。境界が更新されると、新しい日付の名前で別のファイルを置きます。置いたファイルの中身は書き換えません。今使えるファイルの名前は、このページに書いています。

レイヤーと地域コード

1 つのファイルに 3 つのレイヤーが入っています。各区画は code という属性を 1 つだけ持ちます。

表示できるズームより寄った地図では、MapLibre がいちばん細かいタイルを拡大して描きます。表示できるズームより引いた地図には、そのレイヤーの区画は出ません。

code は文字列です。数字の列から作った値は、先頭の 0 が落ちていないか確かめてください（北海道は 1 ではなく 01）。6 桁の全国地方公共団体コード（新宿区は 131041）を使うときは、先頭の 5 桁にします。

政令指定都市は、区ごとの区画だけがあり、市全体の区画はありません（横浜市の 14100 は無く、鶴見区の 14101 などがあります）。市の値で塗るときは、各区に同じ値を入れてください。

都道府県を塗る HTML

次の HTML をファイルに保存して、ブラウザで開くと地図が表示されます。values に地域コードと値の組を入れると、値が大きい区画ほど濃い色で塗られます。values に無い区画は灰色になります。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>都道府県の人口</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@6.14.0/dist/maplibre-gl.css">
  <script src="https://cdn.jsdelivr.net/npm/pmtiles@4.5.0/dist/pmtiles.js"></script>
  <style>html, body, #map { height: 100%; margin: 0; }</style>
</head>
<body>
  <div id="map"></div>
  <script type="module">
    import * as maplibregl from "https://cdn.jsdelivr.net/npm/maplibre-gl@6.14.0/dist/maplibre-gl.mjs";

    // 地域コードと値。Queria で SQL を流した結果をここに入れる
    const values = { "13": 14047594, "14": 9237337, "27": 8837685 };

    const max = Math.max(...Object.values(values));
    const color = (v) => `rgba(37, 99, 235, ${(0.15 + 0.85 * v / max).toFixed(2)})`;
    const fill = ["match", ["get", "code"],
      ...Object.entries(values).flatMap(([code, v]) => [code, color(v)]),
      "#e5e7eb"];

    const protocol = new pmtiles.Protocol();
    maplibregl.addProtocol("pmtiles", protocol.tile);

    new maplibregl.Map({
      container: "map",
      center: [137, 37],
      zoom: 4,
      style: {
        version: 8,
        sources: {
          boundaries: {
            type: "vector",
            url: "pmtiles://https://assets.queria.io/boundaries/boundaries-20261027.pmtiles",
            maxzoom: 10,
            attribution: "「国土数値情報（行政区域データ）」（国土交通省）を Queria が加工して作成",
          },
        },
        layers: [
          { id: "background", type: "background", paint: { "background-color": "#ffffff" } },
          {
            id: "prefecture",
            type: "fill",
            source: "boundaries",
            "source-layer": "prefecture",
            paint: { "fill-color": fill, "fill-outline-color": "#ffffff" },
          },
        ],
      },
    });
  </script>
</body>
</html>

市区町村や町丁目を塗るとき

HTML の 3 か所を変えます。

• "source-layer" を city または small_area にする
• sources.boundaries の maxzoom を、上の表の「表示できるズーム」の上限（市区町村は 12、町丁目は 13）にする
• 町丁目はズーム 10 より引くと表示されないので、center と zoom を塗りたい地域に合わせる（例: 新宿区なら center: [139.70, 35.69]、zoom: 12）

地図を地域に寄せる範囲は、タイルと同じ場所にある boundaries-20261027.bbox.json で引けます。都道府県（2 桁）と市区町村（5 桁）のコードごとに [西, 南, 東, 北] の経緯度が入っています。map.fitBounds() に渡すと、その範囲が画面に収まります。

値を用意する

values には、Queria で SQL を流した結果を { 地域コード: 値 } の形で入れます。SQL は Queria CLI や AI チャット から流せます。地域コードの列がどの形か（2 桁・5 桁・6 桁など）は、テーブル詳細ページの列の説明で確かめてください。

出典の表記

地図には出典を表示してください。HTML の attribution に入れた文字は、地図の右下に表示されます。

• 都道府県・市区町村: 「国土数値情報（行政区域データ）」（国土交通省）を Queria が加工して作成
• 町丁目: 「令和2年国勢調査 境界データ」（総務省統計局、政府統計の総合窓口 e-Stat）を Queria が加工して作成

塗った値の出典も、あわせて表示してください。書き方は出典・ライセンス表記を参照してください。