4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T13d3,"use client"; import { useMemo, useState } from "react"; import { useTheme } from "next-themes"; import { Map, MapControls, MapGeoJSON, MapPopup } from "@/components/ui/map"; import { useWorldData } from "@/lib/use-world-data"; import { mapConfig, visitorsByCountry, type Theme } from "./data"; // WebGL paint can't read CSS variables, so we build a concrete value→color // expression per theme. The hovered country is highlighted in place via the // `hover` feature-state, restricted to countries that actually have data. function buildFillColor(theme: Theme): unknown[] { const { base, ramp, hover } = mapConfig.colors[theme]; const [s0, s1, s2, s3, s4] = mapConfig.scaleStops; const ramped = [ "interpolate", ["linear"], ["coalesce", ["get", "visitors"], 0], s0, base, s1, ramp[0], s2, ramp[1], s3, ramp[2], s4, ramp[3], ]; return [ "case", [ "all", ["boolean", ["feature-state", "hover"], false], [">", ["coalesce", ["get", "visitors"], 0], 0], ], hover, ramped, ]; } const legendGradientStyle = { "--choropleth-ramp-light": `linear-gradient(to right, ${mapConfig.colors.light.ramp.join(", ")})`, "--choropleth-ramp-dark": `linear-gradient(to right, ${mapConfig.colors.dark.ramp.join(", ")})`, } as React.CSSProperties; interface HoverInfo { name: string; visitors: number; lng: number; lat: number; } interface CountryProperties { NAME_LONG: string; visitors: number; } type CountryFeatureCollection = GeoJSON.FeatureCollection< GeoJSON.Geometry, CountryProperties >; export default function Page() { const { resolvedTheme } = useTheme(); const theme: Theme = resolvedTheme === "dark" ? "dark" : "light"; const [hover, setHover] = useState(null); const world = useWorldData(); const countries = useMemo(() => { if (!world) return null; return { type: "FeatureCollection", features: world.features.map((f) => ({ ...f, properties: { NAME_LONG: f.properties.NAME_LONG, visitors: visitorsByCountry[f.properties.NAME_LONG] ?? 0, }, })), }; }, [world]); // Recompute paint only when the theme changes; MapGeoJSON recolors in place. const fillPaint = useMemo( () => ({ "fill-color": buildFillColor(theme) as never, "fill-opacity": 0.92, }), [theme], ); return (

{countries && ( data={countries} promoteId="NAME_LONG" fillPaint={fillPaint} interactive onHover={(e) => { const visitors = e?.feature.properties.visitors ?? 0; // Only countries with data are interactive. if (!e || visitors <= 0) { setHover(null); return; } setHover({ name: e.feature.properties.NAME_LONG, visitors, lng: e.longitude, lat: e.latitude, }); }} /> )} {hover && (

{hover.name}

Visitors {hover.visitors.toLocaleString()}

)}

Visitors by country

Low High

); } 51:T57c,/** Visitor counts keyed by the feature `NAME_LONG`. */ export const visitorsByCountry: Record = { "United States": 100, Canada: 70, Brazil: 65, "United Kingdom": 95, Germany: 80, France: 55, India: 90, China: 45, Japan: 35, Australia: 25, "South Africa": 20, Egypt: 15, }; export type Theme = "light" | "dark"; /** Resolved colors for the choropleth, per theme. */ interface ChoroplethColors { /** Fill for countries with no data (value 0). */ base: string; /** Sequential fill ramp from low → high, mapped to `scaleStops`. */ ramp: [string, string, string, string]; /** Fill for the hovered country. */ hover: string; } /** * Central map config: colors, the value→color scale, and the initial view. * Colors are concrete hex values (not CSS variables) since WebGL paint can't * read them. Update `colors.light`/`colors.dark` below for custom colors. */ export const mapConfig = { view: { center: [12, 28] as [number, number], zoom: 1.4, minZoom: 1, maxZoom: 4, }, scaleStops: [0, 25, 50, 75, 100] as const, colors: { light: { base: "#f0f0f0", ramp: ["#d4d4d4", "#a3a3a3", "#737373", "#404040"], hover: "#0a0a0a", }, dark: { base: "#2a2a2a", ramp: ["#404040", "#737373", "#a3a3a3", "#d4d4d4"], hover: "#ffffff", }, } satisfies Record, }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","next-themes",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next-themes","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"next-themes"}]]}]}]]}],["$","$L4e",null,{"namespace":"@mapcn","registryDependencies":["@mapcn/map"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/choropleth/page.tsx","content":"$50","type":"registry:page","target":"app/choropleth/page.tsx"},{"path":"src/registry/blocks/choropleth/data.ts","content":"$51","type":"registry:component","target":"app/choropleth/data.ts"},{"path":"src/lib/use-world-data.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nexport const WORLD_GEOJSON =\n \"https://cdn.jsdelivr.net/gh/nvkelso/natural-earth-vector@v5.1.2/geojson/ne_110m_admin_0_countries.geojson\";\n\nexport interface WorldFeatureProperties {\n NAME_LONG: string;\n}\n\nexport type WorldData = GeoJSON.FeatureCollection<\n GeoJSON.Geometry,\n WorldFeatureProperties\n>;\n\nexport function useWorldData(url: string = WORLD_GEOJSON): WorldData | null {\n const [data, setData] = useState(null);\n\n useEffect(() => {\n let active = true;\n fetch(url)\n .then((res) => res.json() as Promise)\n .then((world) => {\n if (active) setData(world);\n });\n return () => {\n active = false;\n };\n }, [url]);\n\n return data;\n}\n","type":"registry:lib","target":"@lib/use-world-data.ts"}],"className":"h-[70svh] min-h-80"}]]}]