[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","689ef3db8448819193a79d1127a07417","versionInt","title","Interaktive Deutschlandkarte – Bundesländer, Bevölkerung & Sehenswürdigkeiten (react)","type","code/react","content","'use client';\n\nimport React, { useMemo, useRef, useState } from \"react\";\nimport germany from \"@svg-maps/germany\"; // Daten (IDs, Namen, Pfade) für die Deutschlandkarte\nimport { Users, MapPin, Landmark, Search, Info } from \"lucide-react\";\nimport { ResponsiveContainer, BarChart, XAxis, YAxis, Tooltip as RechartsTooltip, Bar } from \"recharts\";\n\n/**\n * ✅ Hinweis zur Fehlerursache (behoben):\n * Der Build brach ab, weil über das CDN kein `SVGMap`-Export existiert.\n * Lösung: `react-svg-map` entfernt und eine kleine eigene Komponente `SimpleSVGMap` implementiert,\n * die das Objekt aus `@svg-maps/germany` direkt rendert. So gibt es keinen CDN‑Export‑Mismatch mehr.\n *\n * Install:\n * npm i @svg-maps/germany lucide-react recharts\n * Next.js 13/14: Diese Datei ist eine Client Component (\"use client\").\n */\n\n// --- Kleine, lokale SVG-Map-Komponente --------------------------------------\nfunction SimpleSVGMap({\n map,\n className,\n onLocationClick,\n onLocationMouseOver,\n onLocationMouseOut,\n onLocationMouseMove,\n}) {\n const vbRaw = map?.viewBox;\n const vb = Array.isArray(vbRaw)\n ? vbRaw.join(\" \")\n : typeof vbRaw === \"string\"\n ? vbRaw\n : \"0 0 1000 1000\"; // Fallback\n\n return (\n \n \n {(map?.locations || []).map((loc) => (\n \n ))}\n \n \n );\n}\n\n// --- Hilfsfunktionen ---------------------------------------------------------\nconst deNumber = (n) => new Intl.NumberFormat(\"de-DE\").format(n);\n\nconst slugify = (str = \"\") =>\n str\n .toString()\n .normalize(\"NFD\")\n .replace(/[\\u0300-\\u036f]/g, \"\") // Diakritika robust entfernen\n .replace(/ä/g, \"ae\")\n .replace(/ö/g, \"oe\")\n .replace(/ü/g, \"ue\")\n .replace(/Ä/g, \"Ae\")\n .replace(/Ö/g, \"Oe\")\n .replace(/Ü/g, \"Ue\")\n .replace(/ß/g, \"ss\")\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, \"-\")\n .replace(/(^-|-$)+/g, \"\");\n\n// Mappe verschiedene mögliche IDs/Bezeichnungen -> unsere STATE_DATA Keys\nconst SYNONYMS = {\n // Englische Namen\n \"bavaria\": \"bayern\",\n \"baden-wurttemberg\": \"baden-wuerttemberg\",\n \"baden-württemberg\": \"baden-wuerttemberg\",\n \"berlin\": \"berlin\",\n \"brandenburg\": \"brandenburg\",\n \"bremen\": \"bremen\",\n \"hamburg\": \"hamburg\",\n \"hesse\": \"hessen\",\n \"lower-saxony\": \"niedersachsen\",\n \"mecklenburg-vorpommern\": \"mecklenburg-vorpommern\",\n \"mecklenburg-western-pomerania\": \"mecklenburg-vorpommern\",\n \"north-rhine-westphalia\": \"nordrhein-westfalen\",\n \"rhineland-palatinate\": \"rheinland-pfalz\",\n \"saarland\": \"saarland\",\n \"saxony\": \"sachsen\",\n \"saxony-anhalt\": \"sachsen-anhalt\",\n \"schleswig-holstein\": \"schleswig-holstein\",\n \"thuringia\": \"thueringen\",\n // ISO‑ähnliche IDs aus @svg-maps/germany (z. B. DE-BW)\n \"de-bw\": \"baden-wuerttemberg\",\n \"de-by\": \"bayern\",\n \"de-be\": \"berlin\",\n \"de-bb\": \"brandenburg\",\n \"de-hb\": \"bremen\",\n \"de-hh\": \"hamburg\",\n \"de-he\": \"hessen\",\n \"de-mv\": \"mecklenburg-vorpommern\",\n \"de-ni\": \"niedersachsen\",\n \"de-nw\": \"nordrhein-westfalen\",\n \"de-rp\": \"rheinland-pfalz\",\n \"de-sl\": \"saarland\",\n \"de-sn\": \"sachsen\",\n \"de-st\": \"sachsen-anhalt\",\n \"de-sh\": \"schleswig-holstein\",\n \"de-th\": \"thueringen\",\n};\n\n// --- Datengrundlage ----------------------------------------------------------\n// Populations ~2023/24 (gerundet). Kann bei Bedarf aktualisiert werden.\nconst STATE_DATA = {\n \"baden-wuerttemberg\": {\n name: \"Baden-Württemberg\",\n abbr: \"BW\",\n population: 11307000,\n sights: [\"Schloss Heidelberg\", \"Schwarzwald\", \"Burg Hohenzollern\"],\n },\n bayern: {\n name: \"Bayern\",\n abbr: \"BY\",\n population: 13569000,\n sights: [\"Schloss Neuschwanstein\", \"Marienplatz München\", \"Zugspitze\"],\n },\n berlin: {\n name: \"Berlin\",\n abbr: \"BE\",\n population: 3851000,\n sights: [\"Brandenburger Tor\", \"Reichstag\", \"Museumsinsel\"],\n },\n brandenburg: {\n name: \"Brandenburg\",\n abbr: \"BB\",\n population: 2608000,\n sights: [\"Schloss Sanssouci\", \"Spreewald\", \"Schloss Cecilienhof\"],\n },\n bremen: {\n name: \"Bremen\",\n abbr: \"HB\",\n population: 683000,\n sights: [\"Bremer Rathaus & Roland\", \"Bremer Stadtmusikanten\", \"Schnoorviertel\"],\n },\n hamburg: {\n name: \"Hamburg\",\n abbr: \"HH\",\n population: 1906000,\n sights: [\"Elbphilharmonie & Speicherstadt\", \"Miniatur Wunderland\", \"Landungsbrücken\"],\n },\n hessen: {\n name: \"Hessen\",\n abbr: \"HE\",\n population: 6389000,\n sights: [\"Bergpark Wilhelmshöhe\", \"Römerberg Frankfurt\", \"Mathildenhöhe Darmstadt\"],\n },\n \"mecklenburg-vorpommern\": {\n name: \"Mecklenburg-Vorpommern\",\n abbr: \"MV\",\n population: 1611000,\n sights: [\"Kreidefelsen Rügen\", \"Schweriner Schloss\", \"Müritz-Nationalpark\"],\n },\n niedersachsen: {\n name: \"Niedersachsen\",\n abbr: \"NI\",\n population: 8084000,\n sights: [\"Herrenhäuser Gärten\", \"Lüneburger Heide\", \"Niedersächsisches Wattenmeer\"],\n },\n \"nordrhein-westfalen\": {\n name: \"Nordrhein-Westfalen\",\n abbr: \"NW\",\n population: 18100000,\n sights: [\"Kölner Dom\", \"Zeche Zollverein\", \"Aachener Dom\"],\n },\n \"rheinland-pfalz\": {\n name: \"Rheinland-Pfalz\",\n abbr: \"RP\",\n population: 4181000,\n sights: [\"Burg Eltz\", \"Deutsches Eck & Ehrenbreitstein\", \"Mittelrheintal/Loreley\"],\n },\n saarland: {\n name: \"Saarland\",\n abbr: \"SL\",\n population: 985000,\n sights: [\"Saarschleife Cloef\", \"Völklinger Hütte\", \"Schloss Saarbrücken\"],\n },\n sachsen: {\n name: \"Sachsen\",\n abbr: \"SN\",\n population: 4077000,\n sights: [\"Dresdner Zwinger\", \"Basteibrücke\", \"Völkerschlachtdenkmal\"],\n },\n \"sachsen-anhalt\": {\n name: \"Sachsen-Anhalt\",\n abbr: \"ST\",\n population: 2171000,\n sights: [\"Bauhaus Dessau\", \"Quedlinburger Altstadt\", \"Magdeburger Dom\"],\n },\n \"schleswig-holstein\": {\n name: \"Schleswig-Holstein\",\n abbr: \"SH\",\n population: 2958000,\n sights: [\"Holstentor Lübeck\", \"Nationalpark Wattenmeer\", \"Schloss Glücksburg\"],\n },\n thueringen: {\n name: \"Thüringen\",\n abbr: \"TH\",\n population: 2120000,\n sights: [\"Wartburg\", \"Erfurter Dom & Krämerbrücke\", \"Klassik Weimar\"],\n },\n};\n\nconst allStatesArray = Object.entries(STATE_DATA).map(([key, v]) => ({ key, ...v }));\n\nfunction toCanonicalKey(id, name) {\n const cands = [id, name]\n .filter(Boolean)\n .map((s) => slugify(s))\n .flatMap((s) => (SYNONYMS[s] ? [s, SYNONYMS[s]] : [s]));\n for (const c of cands) {\n if (STATE_DATA[c]) return c;\n }\n return null;\n}\n\nfunction colorFromPopulation(value, min, max) {\n // Rotes Choropleth (HSL). Höhere Bevölkerung -> dunkler.\n const t = Math.max(0, Math.min(1, (value - min) / (max - min || 1)));\n const hue = 0; // rot\n const sat = 70; // %\n const light = 90 - t * 50; // 90% -> 40%\n return `hsl(${hue} ${sat}% ${light}%)`;\n}\n\nfunction buildTopByPopulation(n = 8) {\n return [...allStatesArray]\n .sort((a, b) => b.population - a.population)\n .slice(0, n)\n .map((s) => ({ name: s.abbr, Bevölkerung: s.population, key: s.key }));\n}\n\n// Reines Hilfs-Build für CSS, damit wir es auch testen können\nfunction buildDynamicFillCSS({ choroplethOn, selectedKey, minPop, maxPop }) {\n const lines = (germany.locations || []).map((loc) => {\n const key = toCanonicalKey(loc.id, loc.name);\n const pop = key ? STATE_DATA[key]?.population : null;\n const color = choroplethOn && pop ? colorFromPopulation(pop, minPop, maxPop) : \"#e5e7eb\"; // neutral grau\n return `#${loc.id}{fill:${color}}`;\n });\n const selId = selectedKey ? (germany.locations || []).find((l) => toCanonicalKey(l.id, l.name) === selectedKey)?.id : null;\n if (selId) lines.push(`#${selId}{stroke:#7f1d1d;stroke-width:2}`); // dunkelrot statt neutral\n return lines.join(\"\\n\");\n}\n\n// --- Komponente --------------------------------------------------------------\nexport default function GermanyInfographic() {\n const [selectedKey, setSelectedKey] = useState(null);\n const [hoverInfo, setHoverInfo] = useState({ show: false, x: 0, y: 0, label: \"\" });\n const [query, setQuery] = useState(\"\");\n const [choroplethOn, setChoroplethOn] = useState(true);\n const containerRef = useRef(null);\n\n // Min/Max für Skala\n const [minPop, maxPop] = useMemo(() => {\n const vals = allStatesArray.map((s) => s.population);\n return [Math.min(...vals), Math.max(...vals)];\n }, []);\n\n // CSS-Regeln je Bundesland (Farbe)\n const dynamicFillCSS = useMemo(() => {\n return buildDynamicFillCSS({ choroplethOn, selectedKey, minPop, maxPop });\n }, [choroplethOn, selectedKey, minPop, maxPop]);\n\n const filteredStates = useMemo(() => {\n if (!query.trim()) return allStatesArray;\n const q = query.trim().toLowerCase();\n return allStatesArray.filter((s) => [s.name, s.abbr, s.key].some((f) => f.toLowerCase().includes(q)));\n }, [query]);\n\n const topByPopulation = useMemo(() => buildTopByPopulation(8), []);\n\n const current = selectedKey ? STATE_DATA[selectedKey] : null;\n\n // Event-Handler für die Karte\n const handleClick = (event) => {\n const id = event.target?.id || event.currentTarget?.id;\n const label = event.target?.getAttribute(\"name\") || event.target?.getAttribute(\"aria-label\") || \"\";\n let key = toCanonicalKey(id, label);\n\n // Fallback: Wenn noch nicht erkannt, suche in Map-Objekt nach ID und nutze den Namen\n if (!key && id) {\n const loc = (germany.locations || []).find((l) => l.id === id);\n key = toCanonicalKey(id, loc?.name);\n }\n\n // Optionales Toggle-Verhalten: bei erneutem Klick gleiche Auswahl aufheben\n setSelectedKey((prev) => (prev === key ? null : key));\n };\n\n const handleMouseOver = (event) => {\n const label = event.target?.getAttribute(\"name\") || event.target?.getAttribute(\"aria-label\") || \"\";\n setHoverInfo((prev) => ({ ...prev, show: true, label }));\n };\n const handleMouseOut = () => setHoverInfo((prev) => ({ ...prev, show: false }));\n const handleMouseMove = (event) => {\n const bounds = containerRef.current?.getBoundingClientRect();\n const x = event.clientX - (bounds?.left || 0) + 12;\n const y = event.clientY - (bounds?.top || 0) + 12;\n setHoverInfo((prev) => ({ ...prev, x, y }));\n };\n\n const selectByKey = (key) => setSelectedKey((prev) => (prev === key ? null : key));\n\n // --- Selbsttests (sichtbar in UI) -----------------------------------------\n const selfTests = useMemo(() => {\n const vals = allStatesArray.map((s) => s.population);\n const minP = Math.min(...vals);\n const maxP = Math.max(...vals);\n\n const css = buildDynamicFillCSS({ choroplethOn: true, selectedKey: \"bayern\", minPop: minP, maxPop: maxP });\n const cssLineCount = css.split(\"\\n\").length;\n\n const top = buildTopByPopulation(8);\n\n const tests = [\n // (Bestehende) Tests – bitte nicht ändern\n {\n name: \"slugify umlauts\",\n pass: slugify(\"Baden-Württemberg\") === \"baden-wuerttemberg\",\n detail: slugify(\"Baden-Württemberg\"),\n },\n {\n name: \"slugify dash\",\n pass: slugify(\"Schleswig-Holstein\") === \"schleswig-holstein\",\n detail: slugify(\"Schleswig-Holstein\"),\n },\n {\n name: \"synonym de-bw\",\n pass: toCanonicalKey(\"de-bw\", \"\") === \"baden-wuerttemberg\",\n detail: toCanonicalKey(\"de-bw\", \"\"),\n },\n {\n name: \"synonym english name\",\n pass: toCanonicalKey(\"\", \"North Rhine-Westphalia\") === \"nordrhein-westfalen\",\n detail: toCanonicalKey(\"\", \"North Rhine-Westphalia\"),\n },\n {\n name: \"CSS lines >= locations\",\n pass: cssLineCount >= (germany.locations || []).length,\n detail: `${cssLineCount} vs ${(germany.locations || []).length}`,\n },\n // Neue Zusatztests (nicht vorhandene Tests ergänzt)\n {\n name: \"map has 16 locations\",\n pass: Array.isArray(germany.locations) && germany.locations.length === 16,\n detail: (germany.locations || []).length,\n },\n {\n name: \"synonym uppercase DE-NI\",\n pass: toCanonicalKey(\"DE-NI\", \"\") === \"niedersachsen\",\n detail: toCanonicalKey(\"DE-NI\", \"\"),\n },\n {\n name: \"selection rule present\",\n pass: css.includes(\"stroke-width:2\"),\n detail: css.slice(0, 64) + \"…\",\n },\n {\n name: \"neutral color used when off\",\n pass: buildDynamicFillCSS({ choroplethOn: false, selectedKey: null, minPop: minP, maxPop: maxP }).includes(\"fill:#e5e7eb\"),\n detail: \"looks for fill:#e5e7eb\",\n },\n {\n name: \"ß becomes ss\",\n pass: slugify(\"Straße\") === \"strasse\",\n detail: slugify(\"Straße\"),\n },\n {\n name: \"top by population first=NW\",\n pass: top[0]?.key === \"nordrhein-westfalen\",\n detail: top.slice(0, 3).map((s) => s.key).join(\", \"),\n },\n {\n name: \"english name Mecklenburg\",\n pass: toCanonicalKey(\"\", \"Mecklenburg-Western Pomerania\") === \"mecklenburg-vorpommern\",\n detail: toCanonicalKey(\"\", \"Mecklenburg-Western Pomerania\"),\n },\n // 🔴 Zusätzliche Tests für Rot‑Theming\n {\n name: \"choropleth hue is redish\",\n pass: colorFromPopulation(minP, minP, maxP).startsWith(\"hsl(0 \"),\n detail: colorFromPopulation(minP, minP, maxP),\n },\n // 🧪 Zusatztst: CSS nutzt wirklich \\n als Separator\n {\n name: \"css contains newline separators\",\n pass: css.indexOf(\"\\n\") !== -1,\n detail: JSON.stringify(css.slice(0, 40)) + \"…\",\n },\n ];\n\n return tests;\n }, []);\n\n const testsAllPass = selfTests.every((t) => t.pass);\n\n return (\n

\n {/* Inline-Komponentencss */}\n \n\n

Interaktive Deutschlandkarte · Bundesländer, Einwohner & Highlights

\n setChoroplethOn((v) => !v)}\n title=\"Choropleth-Farben ein/aus\"\n >\n {choroplethOn ? \"Choropleth: an\" : \"Choropleth: aus\"}\n \n setSelectedKey(null)}\n title=\"Auswahl zurücksetzen\"\n >\n Zurücksetzen\n \n

\n\n

\n {/* Seitenleiste links */}\n

\n \n

Bundesland suchen

\n setQuery(e.target.value)}\n placeholder=\"Name oder Kürzel (z. B. BW, BY, NRW)\"\n className=\"w-full rounded-xl border border-neutral-300 px-3 py-2 outline-none focus:ring-4 focus:ring-red-100\"\n />\n

\n {filteredStates.map((s) => (\n selectByKey(s.key)}\n className={`w-full text-left list-item ${selectedKey === s.key ? \"bg-red-50\" : \"\"}`}\n >\n {s.abbr}\n

{s.name}

{deNumber(s.population)} Einwohner

\n \n ))}\n

\n\n

\n \n

Einwohner (Top 8)

\n \n \n \n (v / 1_000_000).toFixed(0) + \" M\"} width={35} tickLine={false} axisLine={false} fontSize={12} />\n deNumber(v)} labelFormatter={(l) => `Kürzel: ${l}`} />\n \n \n \n

Zahlen gerundet (≈ 2023/24)

\n\n {/* Karte */}\n

\n {/* Legende */}\n

Einwohner

\n \n

\n {deNumber(minPop)}\n {deNumber(maxPop)}\n

\n\n

\n \n\n {hoverInfo.show && (\n \n {hoverInfo.label}\n

\n )}\n

\n \n\n {/* Detailbereich rechts */}\n

\n \n

Details

\n {!current ? (\n

\n Wähle ein Bundesland auf der Karte oder aus der Liste, um Einwohnerzahl und Top‑Sehenswürdigkeiten zu sehen.\n

\n ) : (\n

\n {current.abbr}\n

{current.name}

\n \n {deNumber(current.population)} Einwohner\n

Top‑Sehenswürdigkeiten

\n \n {s}\n

\n )}\n

\n\n {/* Selbsttests anzeigen */}\n

\n \n

Selbsttests

\n \n {t.name}\n – {t.pass ? \"ok\" : \"fehlt/prüfen\"}\n {!t.pass && ({t.detail})}\n

\n {testsAllPass ? \"Alle Tests bestanden.\" : \"Mindestens ein Test ist fehlgeschlagen.\"}\n

\n \n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","4275461650659644468","traceTime",1776411478310]