/* global React, PageShell, AGGIE_CATALOG, LucideIcon */ /* * AggieMapLegend.jsx — Batch B.2: Map legend & attribution. * * The signage system that overlays any map. Legends, scale bars, north * arrows, and source attribution — formal enough for an exhibit-grade * report, restrained enough to embed in an interactive dashboard. * * Helper prefix: ML (Map Legend). */ // Shared helpers function MLBox({ dark = false, label, padded = true, children }) { return (
{label}on {dark ? "dark" : "light"}
{children}
); } function MLSectionLabel({ children }) { return
{children}
; } function MLIntro({ children }) { return
{children}
; } function MLSpecRow({ children }) { return
{children}
; } function MLSpec({ label, value, note }) { return (
{label}
{value}
{note &&
{note}
}
); } // ════════════════════════════════════════════════════════════════════════ // Legend kinds — choropleth, categorical, graduated, bivariate // ════════════════════════════════════════════════════════════════════════ function MLChoroplethLegend({ title = "Daily VMT", unit = "millions", stops = [0, 5, 10, 20, 35, 50] }) { const colors = [ "color-mix(in srgb, var(--brand-primary) 8%, var(--surface-page))", "color-mix(in srgb, var(--brand-primary) 22%, var(--surface-page))", "color-mix(in srgb, var(--brand-primary) 40%, var(--surface-page))", "color-mix(in srgb, var(--brand-primary) 60%, var(--surface-page))", "color-mix(in srgb, var(--brand-primary) 80%, var(--surface-page))", "var(--brand-primary)", ]; return (
{title}
{unit}
{colors.map((c, i) =>
)}
{stops.map((s, i) => {s})}
); } function MLCategoricalLegend({ title = "TxDOT district", items }) { const defaults = [ { label: "Atlanta", color: "oklch(0.55 0.15 12)" }, { label: "Austin", color: "oklch(0.60 0.13 78)" }, { label: "Dallas", color: "oklch(0.50 0.16 220)" }, { label: "El Paso", color: "oklch(0.58 0.14 160)" }, { label: "Fort Worth", color: "oklch(0.55 0.13 300)" }, { label: "Houston", color: "oklch(0.50 0.18 35)" }, ]; const list = items || defaults; return (
{title}
); } function MLGraduatedSymbolLegend({ title = "Crash count", values = [10, 50, 200] }) { return (
{title}
{values.map((v, i) => { const r = 4 + Math.sqrt(v) * 1.6; return (
{v}
); })}
); } function MLBivariateLegend({ titleX = "VMT", titleY = "Fatal rate" }) { // 3x3 grid mixing two channels const grid = [ ["#f4ecec", "#e9c8d0", "#d493ad"], ["#e9d3c8", "#c8a59f", "#9a6378"], ["#d4ad8a", "#a37166", "#5C0025"], ]; return (
Exposure × risk
highlow
{grid.flatMap((row, ri) => row.map((c, ci) =>
))}
lowhigh
↕ {titleY}↔ {titleX}
); } function MLFlowLegend() { return (
Daily trips
{[{ w: 1, label: "< 5,000" }, { w: 3, label: "5,000–20,000" }, { w: 6, label: "20,000–100,000" }, { w: 10, label: "> 100,000" }].map((it, i) => (
{it.label}
))}
); } // Scale bar + north arrow + attribution function MLScaleBar({ km = 100 }) { return (
0{km / 2}{km} km
); } function MLNorthArrow() { return (
N
); } function MLAttribution({ basemap = "TxDOT districts (2024)", projection = "EPSG:3083 NAD83 / Texas Centric Albers", source = "TTI · TxDOT HSIP 2024" }) { return (
Basemap: {basemap} · Proj: {projection} · Source: {source}
); } // Composed map demo — to show legends in situ function MLMapDemo({ children, legendPos = "bottom-right" }) { const cornerStyle = { "top-left": { top: 10, left: 10 }, "top-right": { top: 10, right: 10 }, "bottom-left": { bottom: 10, left: 10 }, "bottom-right": { bottom: 10, right: 10 }, }; return (
{/* Stylized Texas silhouette */} {/* Overlays */}
{children}
); } // ════════════════════════════════════════════════════════════════════════ // PAGE // ════════════════════════════════════════════════════════════════════════ function MapLegendPage() { const item = (window.AGGIE_CATALOG || []).find(c => c.id === "map-legend"); return ( The signage that overlays any map: legend (choropleth, categorical, graduated symbol, bivariate, flow), scale bar, north arrow, and attribution. Embeddable into a TTI map (chart-maps) or a third-party basemap (Mapbox, Leaflet) — surface, type, and color tokens are identical to the rest of the system. {/* Legend kinds */} Legend kinds
{/* In situ */} In situ — map with full overlay set
{/* Atomic overlays */} Atomic overlays
{/* Decision matrix */} When to use which
{["Legend", "Encodes", "Best for", "Avoid when"].map(h => ( ))} {[ ["Choropleth", "Continuous quantity by area", "VMT, density, rate per unit area", "Areas vary wildly in size — use graduated symbol"], ["Categorical", "Discrete class membership", "TxDOT districts, land-use zones", "Classes exceed 7 — viewer can't distinguish hues"], ["Graduated symbol", "Magnitude by point area", "Crash counts, station counts", "Symbols overlap heavily — use heatmap"], ["Bivariate", "Two correlated quantities", "Exposure × risk, supply × demand", "Casual audience — bivariate maps require legend literacy"], ["Flow", "Magnitude along a line/path", "Origin–destination, freight corridors", "Many short segments at similar magnitude"], ].map((row, i) => ( {row.map((cell, j) => ( ))} ))}
{h}
{cell}
); } Object.assign(window, { MapLegendPage });