Population by prefecture

--- title: Build a map colored by area code in HTML description: Use the prefecture, municipality and town boundaries that Queria serves to build a single HTML page that colors each area by its value --- Queria serves the boundaries of prefectures, municipalities and towns (chōme) as map tiles in PMTiles format. Every area in the tiles carries its area code, so once you have pairs of area code and value, you can build a map that colors each area by that value. You do not need to download or convert boundary files. The HTML on this page also works as a model when you ask an AI to build a map app. Give the AI the URL of this page. ## Where the tiles are ``` https://assets.queria.io/boundaries/boundaries-20261027.pmtiles ``` The date in the file name is the day the tiles were built. When the boundaries are updated, a new file is placed under a name with a new date. A file that has been placed is never rewritten. This page shows the name of the current file. ## Layers and area codes One file holds three layers. Each area has a single attribute, `code`. | Layer | Areas | Form of `code` | Zoom levels with tiles | |---|---|---|---| | `prefecture` | Prefectures | 2 digits (Tokyo is `13`) | 0–10 | | `city` | Municipalities | 5 digits (Shinjuku is `13104`) | 4–12 | | `small_area` | Towns | 9 or 11 digits (census small-area code) | 10–13 | When the map is zoomed in past these levels, MapLibre enlarges the most detailed tiles. When the map is zoomed out past them, the layer shows no areas. `code` is a string. If your values come from a numeric column, check that leading zeros were not dropped (Hokkaido is `01`, not `1`). If you use the 6-digit local government code (Shinjuku is `131041`), take its first 5 digits. Designated cities have one area per ward and no area for the whole city (there is no `14100` for Yokohama, but there is `14101` for Tsurumi Ward and so on). To color by a city-wide value, give each ward the same value. ## HTML that colors prefectures Save the following HTML to a file and open it in a browser to see the map. Put pairs of area code and value in `values`: areas with larger values are drawn in a darker color. Areas not in `values` are gray. ```html Population by prefecture

``` ## Coloring municipalities or towns Change three places in the HTML. - Set `"source-layer"` to `city` or `small_area` - Set `maxzoom` in `sources.boundaries` to the top of the zoom range in the table above (12 for municipalities, 13 for towns) - Towns are not shown below zoom 10, so set `center` and `zoom` to the area you want to color (for Shinjuku, `center: [139.70, 35.69]` and `zoom: 12`) To fit the map to an area, use `boundaries-20261027.bbox.json`, which sits next to the tiles. It holds `[west, south, east, north]` for each prefecture (2-digit) and municipality (5-digit) code. Pass it to `map.fitBounds()` to fit that range on the screen. ## Preparing the values Put the result of your SQL on Queria into `values` as `{ area code: value }`. You can run SQL from the [Queria CLI](/en/connection/queria-cli) or an [AI chat](/en/ai-chat). Check the form of the area code column (2, 5 or 6 digits, and so on) in the column descriptions on the table details page. ## Attribution Show the source on the map. The text in `attribution` in the HTML appears at the bottom right of the map. - Prefectures and municipalities: Based on National Land Numerical Information (Administrative Areas), MLIT, processed by Queria - Towns: Based on the 2020 Census boundary data (Statistics Bureau of Japan, e-Stat), processed by Queria Show the source of the values you colored as well. See [Attribution and licenses](/en/data/attribution) for how to write it.