{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "census-choropleth",
"title": "Census Choropleth",
"description": "A page that colours the provinces and territories by 2021 Census population, change since 2016 or people per km², joined by id with feature-state, with a legend that lists each class's provinces and the number for whatever the pointer is on. Ships Statistics Canada boundaries and counts (Statistics Canada Open Licence); calls no API beyond the map.",
"registryDependencies": [
"https://registry.unmap.dev/r/map.json",
"https://registry.unmap.dev/r/map-context.json",
"https://registry.unmap.dev/r/map-layers.json",
"card",
"toggle-group",
"button",
"alert"
],
"files": [
{
"path": "registry/blocks/census-choropleth/page.tsx",
"content": "/**\n * /census-choropleth: the census choropleth block as a Next.js App Router page, full-bleed (the\n * block keeps its own gutter). The key comes from NEXT_PUBLIC_UNMAP_KEY in .env.local; installing\n * the block added the empty line, paste your key.\n */\nimport { CensusChoropleth } from \"@/components/ui/census-choropleth\";\n\nexport const metadata = { title: \"Compare provinces and territories\" };\n\nexport default function CensusChoroplethPage() {\n return (\n \n \n \n );\n}\n",
"type": "registry:page",
"target": "app/census-choropleth/page.tsx"
},
{
"path": "registry/blocks/census-choropleth/census-choropleth.tsx",
"content": "\"use client\";\n\n/**\n * - population by province and territory from the 2021 Census, as a choropleth\n * in one component. A full-bleed map of Canada with a floating panel (a bottom sheet on a phone):\n * one switch between population, change since 2016 and people per km², a legend that says what\n * the scale means and lists each class's provinces under it, and the number for whatever the\n * pointer, the keyboard or a tap is on.\n *\n * The thirteen shapes are added once as GeoJSON with `promoteId: \"PRUID\"`, and each metric is\n * joined onto them by that id with `setFeatureState`: switching metric writes thirteen feature\n * states and the fill's classes, and never uploads the shapes again. Classes are quantiles of the\n * metric. The ramp is your `--primary` stepped toward your `--background` (CENSUS_TOKENS remaps\n * `--chart-1`..`--chart-5` on the map only, since a theme's chart colours are categorical and a\n * choropleth needs an order), so the fill and the legend read the same five colours in light and\n * dark.\n *\n * The join is the part to keep: swap PROVINCES and CENSUS_ROWS (lib/census-choropleth-data) for\n * your own shapes and numbers keyed by any property, and the rest works unchanged. The census data\n * ships with the block (Statistics Canada Open Licence, credited in the panel), so it calls no API\n * beyond the map's own style and tiles. Installed by `npx shadcn add` with its page at\n * app/census-choropleth/page.tsx. Edit freely.\n */\n\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Map } from \"@/components/ui/map\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\nimport { useMap, useMapGeneration, useMapReady } from \"@/lib/map-context\";\nimport { chartRamp, tokenColor, accentColor, useLayerPointer, useLayerSet, type LayerSpec, type MapFeatureEvent } from \"@/lib/map-layers\";\nimport { CENSUS_ROWS, CENSUS_SOURCE, PROVINCES } from \"@/lib/census-choropleth-data\";\n\n// --- census-choropleth helpers (kept identical across both lanes) ---\nexport type CensusLang = \"en\" | \"fr\";\n\n/** What the map colours: persons, percent change since 2016, or persons per km². */\nexport type CensusMetric = \"population\" | \"change\" | \"density\";\n\nexport const CENSUS_METRICS: readonly CensusMetric[] = [\"population\", \"change\", \"density\"];\n\n/** The three counts a row carries; every metric is derived from them. */\nexport interface CensusCounts {\n population: number;\n population2016: number;\n landArea: number;\n}\n\n/** A box on screen, as getBoundingClientRect() gives it. */\nexport interface CensusRect {\n left: number;\n top: number;\n right: number;\n bottom: number;\n width: number;\n height: number;\n}\n\n/** Camera padding in pixels, as fitBounds takes it. */\nexport interface CensusPadding {\n top: number;\n right: number;\n bottom: number;\n left: number;\n}\n\n/** The block's own map id, so a map elsewhere on the page never answers for it. */\nexport const CENSUS_MAP_ID = \"census-choropleth\";\n/** The GeoJSON source and its two layers. */\nexport const CENSUS_SOURCE_ID = \"census-choropleth\";\nexport const CENSUS_FILL_ID = \"census-choropleth-fill\";\nexport const CENSUS_LINE_ID = \"census-choropleth-line\";\n\n/** How many quantile classes the map is split into. */\nexport const CLASS_COUNT = 5;\n\n/** A shape with no value joined draws nothing, so a missing number never reads as the lowest class. */\nexport const MISSING_FILL = \"rgba(0, 0, 0, 0)\";\n\n/** All of Canada: where the map opens before it frames the provinces clear of the panel. */\nexport const CANADA_VIEW: { center: [number, number]; zoom: number } = { center: [-96, 62], zoom: 2.3 };\n\n/** The provinces and territories, for fitBounds; the north edge spares the far Arctic islands most of the height. */\nexport const CANADA_BOUNDS: [[number, number], [number, number]] = [\n [-141, 41.7],\n [-52.6, 76],\n];\n\n/** The panel's inset from the map edge, and the gutter the camera keeps. */\nexport const GUTTER = 24;\n/** The least map, in pixels, a padded camera must have to frame at its full gutter. */\nconst MIN_FRAME = 120;\n/** The tightened gutter, and the least strip the camera keeps to frame in beside a tall panel. */\nconst TIGHT = 8;\nconst MIN_STRIP = 32;\n\n/**\n * The ramp, in your own tokens: `--primary` stepped toward `--background`, lightest class first\n * (darkest on a dark page). A stock theme's `--chart-1`..`--chart-5` are categorical colours in\n * no order; this remaps them on the map (the block's