都道府県の人口

--- title: 地域コードで塗る地図を HTML で作る description: Queria が配っている都道府県・市区町村・町丁目の境界を使い、地域コードごとの値で色を塗った地図を 1 枚の HTML で作る --- Queria は、都道府県・市区町村・町丁目の境界を地図のタイル（PMTiles 形式）にして配っています。タイルの各区画は地域コードを持っているので、地域コードと値の組を用意すれば、その値で色を塗った地図を作れます。境界のファイルをダウンロードして変換する必要はありません。このページの HTML は、AI に地図のアプリを作ってもらうときの見本にも使えます。AI にこのページの URL を渡してください。 ## タイルの場所 ``` https://assets.queria.io/boundaries/boundaries-20261027.pmtiles ``` ファイル名の日付は、タイルを作った日です。境界が更新されると、新しい日付の名前で別のファイルを置きます。置いたファイルの中身は書き換えません。今使えるファイルの名前は、このページに書いています。 ## レイヤーと地域コード 1 つのファイルに 3 つのレイヤーが入っています。各区画は `code` という属性を 1 つだけ持ちます。 | レイヤー | 区画 | `code` の形 | 表示できるズーム | |---|---|---|---| | `prefecture` | 都道府県 | 2 桁（東京都は `13`） | 0〜10 | | `city` | 市区町村 | 5 桁（新宿区は `13104`） | 4〜12 | | `small_area` | 町丁目 | 9 桁または 11 桁（国勢調査の小地域コード） | 10〜13 | 表示できるズームより寄った地図では、MapLibre がいちばん細かいタイルを拡大して描きます。表示できるズームより引いた地図には、そのレイヤーの区画は出ません。 `code` は文字列です。数字の列から作った値は、先頭の 0 が落ちていないか確かめてください（北海道は `1` ではなく `01`）。6 桁の全国地方公共団体コード（新宿区は `131041`）を使うときは、先頭の 5 桁にします。政令指定都市は、区ごとの区画だけがあり、市全体の区画はありません（横浜市の `14100` は無く、鶴見区の `14101` などがあります）。市の値で塗るときは、各区に同じ値を入れてください。 ## 都道府県を塗る HTML 次の HTML をファイルに保存して、ブラウザで開くと地図が表示されます。`values` に地域コードと値の組を入れると、値が大きい区画ほど濃い色で塗られます。`values` に無い区画は灰色になります。 ```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](/connection/queria-cli) や [AI チャット](/ai-chat) から流せます。地域コードの列がどの形か（2 桁・5 桁・6 桁など）は、テーブル詳細ページの列の説明で確かめてください。 ## 出典の表記地図には出典を表示してください。HTML の `attribution` に入れた文字は、地図の右下に表示されます。 - 都道府県・市区町村: 「国土数値情報（行政区域データ）」（国土交通省）を Queria が加工して作成 - 町丁目: 「令和2年国勢調査境界データ」（総務省統計局、政府統計の総合窓口 e-Stat）を Queria が加工して作成塗った値の出典も、あわせて表示してください。書き方は[出典・ライセンス表記](/data/attribution)を参照してください。