/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { TransformWrapper, TransformComponent } from 'https://esm.sh/react-zoom-pan-pinch'; import { CSVLink } from "https://esm.sh/react-csv"; const regionData = { sar: { name: "Sardegna", population: 1590044, area: 24100 }, sic: { name: "Sicilia", population: 4833705, area: 25711 }, cal: { name: "Calabria", population: 1877728, area: 15222 }, bas: { name: "Basilicata", population: 547579, area: 10073 }, pug: { name: "Puglia", population: 3933777, area: 19541 }, cam: { name: "Campania", population: 5679759, area: 13671 }, mol: { name: "Molise", population: 296547, area: 4461 }, abr: { name: "Abruzzo", population: 1285256, area: 10832 }, laz: { name: "Lazio", population: 5720796, area: 17232 }, umb: { name: "Umbria", population: 865452, area: 8464 }, mar: { name: "Marche", population: 1501406, area: 9401 }, tos: { name: "Toscana", population: 3692555, area: 22987 }, emi: { name: "Emilia-Romagna", population: 4438937, area: 22453 }, fri: { name: "Friuli-Venezia Giulia", population: 1201510, area: 7924 }, ven: { name: "Veneto", population: 4852453, area: 18345 }, tre: { name: "Trentino-Alto Adige", population: 1067648, area: 13606 }, lom: { name: "Lombardia", population: 9965046, area: 23844 }, }; const historicalData = { 2010: { total: 59190143 }, 2015: { total: 60795612 }, 2020: { total: 59641488 }, }; function App() { const [hoveredRegion, setHoveredRegion] = useState(""); const [selectedRegions, setSelectedRegions] = useState([]); const [isDarkMode, setIsDarkMode] = useState(false); const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 }); const [searchTerm, setSearchTerm] = useState(""); const [year, setYear] = useState(2020); const [groupedRegions, setGroupedRegions] = useState({}); const csvLink = useRef(); const handleMouseEnter = (event) => { const regionId = event.target.id; setHoveredRegion(regionId); }; const handleMouseMove = (event) => { setTooltipPosition({ x: event.clientX, y: event.clientY }); }; const handleMouseLeave = () => { setHoveredRegion(""); }; const handleClick = (region) => { setSelectedRegions((prev) => prev.includes(region) ? prev.filter((r) => r !== region) : [...prev, region] ); }; const totalPopulation = selectedRegions.reduce( (sum, region) => sum + regionData[region].population, 0 ); const toggleDarkMode = () => { setIsDarkMode(!isDarkMode); }; const printMap = () => { window.print(); }; const handleSearch = (event) => { setSearchTerm(event.target.value); }; const filteredRegions = Object.keys(regionData).filter((region) => regionData[region].name.toLowerCase().includes(searchTerm.toLowerCase()) ); const calculateDensity = (region) => { return (regionData[region].population / regionData[region].area).toFixed(2); }; const handleYearChange = (event) => { setYear(parseInt(event.target.value)); }; const exportData = () => { csvLink.current.link.click(); }; const groupRegions = () => { const groups = { low: [], medium: [], high: [], }; Object.keys(regionData).forEach((region) => { const population = regionData[region].population; if (population < 1000000) { groups.low.push(region); } else if (population < 5000000) { groups.medium.push(region); } else { groups.high.push(region); } }); setGroupedRegions(groups); }; useEffect(() => { const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); setIsDarkMode(mediaQuery.matches); const handler = () => setIsDarkMode(mediaQuery.matches); mediaQuery.addListener(handler); groupRegions(); return () => mediaQuery.removeListener(handler); }, []); return (

Map of Italy

{hoveredRegion && (

{regionData[hoveredRegion].name} Population: {regionData[hoveredRegion].population.toLocaleString()} Density: {calculateDensity(hoveredRegion)} people/km²

)}

Legend

Default

Hovered

Selected

Selected Regions

{regionData[region].name} {regionData[region].population.toLocaleString()}

Total Population: {totalPopulation.toLocaleString()}

Historical Population

Year: {year}

Total Population: {historicalData[year].total.toLocaleString()}

Grouped Regions

Low Population (<1M)

{regionData[region].name}

Medium Population (1M-5M)

{regionData[region].name}

High Population (>5M)

{regionData[region].name}

View source:{" "} {import.meta.url.replace("esm.town", "val.town")}

({ name: regionData[region].name, population: regionData[region].population, area: regionData[region].area, density: calculateDensity(region), }))} filename={"italy-regions-data.csv"} className="hidden" ref={csvLink} target="_blank" />

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Map of Italy

`, { headers: { "content-type": "text/html", }, } ); } const css = ` body { margin: 0; font-family: 'Lora', serif; background-color: #F5F5DC; color: #4A4A4A; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d2b48c' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); transition: background-color 0.5s, color 0.5s; } .container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; transition: background-color 0.5s, color 0.5s; } .dark-mode { background-color: #2C3E50; color: #ECF0F1; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; text-align: center; } h1 { font-size: 3rem; margin-bottom: 40px; color: #8B4513; } h2 { font-size: 2rem; margin-bottom: 20px; color: #8B4513; } .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4 { color: #D2B48C; } .content { display: flex; justify-content: space-between; align-items: flex-start; } .map-container { flex: 0 0 500px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border: 1px solid #D2B48C; background-color: #FFF8DC; padding: 20px; position: relative; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none' stroke='%23B88846' stroke-width='2'%3E%3Cpath d='M1 1h73v73H1z'/%3E%3Cpath d='M8 8h59v59H8z'/%3E%3Cpath d='M8 8l59 59m0-59L8 67'/%3E%3C/g%3E%3C/svg%3E") 30; border-width: 30px; border-style: solid; } .dark-mode .map-container { background-color: #34495E; border-color: #D2B48C; } svg { width: 500px; height: 603px; } .region { fill: #E8D0A9; transition: fill 0.3s ease; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF0000' d='M7 2l12 11.2-5.8 0.5 3.8 7.3-2 1-3.8-7.4-4.2 4.4z'/%3E%3C/svg%3E"), auto; } .region.hovered { fill: #D2691E; } .region.selected { fill: #8B4513; } .dark-mode .region { fill: #7F8C8D; } .dark-mode .region.hovered { fill: #F39C12; } .dark-mode .region.selected { fill: #D35400; } .info-container { flex: 1; margin-left: 40px; } .legend { background-color: #FFF8DC; border: 1px solid #D2B48C; border-radius: 4px; padding: 20px; margin-bottom: 20px; } .dark-mode .legend { background-color: #34495E; border-color: #D2B48C; } .legend-item { display: flex; align-items: center; margin-bottom: 10px; } .legend-color { width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; } .legend-color.default { background-color: #E8D0A9; } .legend-color.hovered { background-color: #D2691E; } .legend-color.selected { background-color: #8B4513; } .dark-mode .legend-color.default { background-color: #7F8C8D; } .dark-mode .legend-color.hovered { background-color: #F39C12; } .dark-mode .legend-color.selected { background-color: #D35400; } .selected-regions, .timeline, .grouped-regions { background-color: #FFF8DC; border: 1px solid #D2B48C; border-radius: 4px; padding: 20px; margin-bottom: 20px; } .dark-mode .selected-regions, .dark-mode .timeline, .dark-mode .grouped-regions { background-color: #34495E; border-color: #D2B48C; } ul { list-style-type: none; padding: 0; } li { display: flex; justify-content: space-between; margin-bottom: 10px; padding: 5px 10px; background-color: #F4A460; color: #FFF8DC; border-radius: 4px; transition: transform 0.2s ease; } li:hover { transform: translateX(5px); } .dark-mode li { background-color: #D35400; } .region-name { font-weight: bold; } .total-population { margin-top: 20px; font-weight: bold; text-align: right; } .footer { margin-top: 40px; text-align: center; font-style: italic; } a { color: #8B4513; text-decoration: none; } a:hover { text-decoration: underline; } .dark-mode a { color: #F1C40F; } .controls { display: flex; justify-content: center; margin-bottom: 20px; } button, input[type="text"] { background-color: #8B4513; color: #FFF8DC; border: none; padding: 10px 20px; margin: 0 10px; font-family: 'Lora', serif; font-size: 1rem; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #A0522D; } .dark-mode button, .dark-mode input[type="text"] { background-color: #D2B48C; color: #2C3E50; } .dark-mode button:hover { background-color: #E6CCAF; } .tooltip { position: fixed; background-color: rgba(255, 248, 220, 0.9); border: 1px solid #D2B48C; border-radius: 4px; padding: 10px; font-size: 0.9rem; pointer-events: none; z-index: 1000; transform: translate(10px, 10px); } .dark-mode .tooltip { background-color: rgba(52, 73, 94, 0.9); border-color: #D2B48C; } .mini-map { position: fixed; bottom: 20px; right: 20px; background-color: rgba(255, 248, 220, 0.9); border: 1px solid #D2B48C; border-radius: 4px; padding: 5px; } .dark-mode .mini-map { background-color: rgba(52, 73, 94, 0.9); border-color: #D2B48C; } .hidden { display: none; } @media print { body { background: none; } .controls, .footer, .mini-map { display: none; } .map-container { border: none; box-shadow: none; } .content { flex-direction: column; } .info-container { margin-left: 0; margin-top: 20px; } } @media (max-width: 768px) { .content { flex-direction: column; } .map-container { flex: none; width: 100%; max-width: 500px; margin: 0 auto; } .info-container { margin-left: 0; margin-top: 40px; } .controls { flex-wrap: wrap; } button, input[type="text"] { margin: 5px; } } `; const regionPoints = { sar: "193,463 203.6,472.3 210,472.3 207.2,482 217.6,491.5 221.5,524.9 213.6,537.5 218.8,559.4 206.2,599.4 209.1,610.6 198.5,623.2 187,611.7 170.8,617.6 173.8,629.1 157.4,637.6 139.2,619.5 138.3,591.7 149.8,564.9 141.1,561.1 143.2,550.4 142.1,513.4 136.4,507.9 129,505.7 128.1,502.8 136.4,498.3 133.6,482 132.6,479 141.1,474.9 143.2,487.5 154.5,489.4 167.9,484.7 184,469.4", sic: "374.4,704.6 363.7,710.2 365.6,729.2 370.8,741.8 400.2,750.4 430.8,770.3 449.7,778.2 467.9,785.6 477.6,799.1 494.8,802.9 510.9,810.6 515.5,805.6 510.1,797.2 522.6,780.1 516.6,763.8 508.2,760.7 512,736.1 521.6,725.5 530.9,694.8 513.7,694 507.3,703.5 497.5,696.7 483.2,705.5 469.8,710.2 448.8,706.5 439.2,713.1 421.2,704.6 410.5,705.5 410.5,695.9 391.6,696.7 393.5,709.3 385,711.2", cal: "535.3,568.9 549.7,566.8 557.5,568.4 580.4,558.3 588.3,561.9 582.8,580.1 587.8,593.9 596.8,591.7 606.2,602.6 615.4,602.1 616.6,627.5 621.1,634.1 621.7,647.5 605.5,643.4 589.5,655.9 589.9,685 573.9,696.5 563.2,718 542.1,718 537.7,707.1 538,704.6 537.2,698.9 543.7,690.2 550.3,668.3 545.2,663.4 565.1,654 553.9,610.2 543.7,597.2", bas: "601.7,531.5 594.6,517.6 583.9,510.9 573.6,513.4 562.7,498.3 554.7,497 551.1,487.2 545.2,482.3 538.9,485.6 527.8,485.3 527.8,498.6 518.5,502.5 524.9,524.7 542.4,549.6 537.7,552 530.3,566.2 530.3,566.2 534.7,568.9 549.8,566.8 557.5,568.7 570.2,562.7 581.3,558 588.9,561.6 590.2,556.4 601.7,531.5", pug: "495.8,462 495.1,451.6 501.6,439.3 506.3,426.9 506.3,426.5 512,428.1 558.6,429.1 565.1,437.9 547.1,448.5 610,486.6 635.1,505.7 659,514.3 667.4,531.5 685.5,542.1 689.6,551.7 683.6,564 685.5,576.3 663.8,570.9 658.1,560.2 655.1,548.7 636,544.9 620.7,535.3 617.9,531.5 601.7,531.5 594.6,517.6 583.9,510.9 573.6,513.4 562.7,498.3 554.7,497 551.1,487.2 545.2,482.3 538.9,485.6 512,486.3 509.5,472.6 502.5,470.4 501.6,462.3", cam: "430.8,479 451.6,508.7 460.5,507.9 470.9,524.1 489.6,523.2 498.6,538.3 493.9,549.6 509,555.6 530,566.5 530.3,565.1 537.7,552 542.4,549.6 524.9,524.7 518.5,502.5 527.8,498.6 527.8,485.6 525.9,486 512,486.3 509.5,472.6 502.5,470.4 501.6,462.3 495.8,462 477.2,466.7 462.3,457.3 450.4,464.2 436.3,463.3 439.2,472.6 430.8,479", mol: "506.3,426.5 494.8,423.4 486.6,416.6 486.3,416.9 486.3,417.6 479.4,429.4 470.9,433.6 466.1,425.9 454.5,425.6 440.1,435.5 441.1,456 436.3,463.3 450.4,464.2 462.3,457.3 477.2,466.7 495.8,462 495.1,451.6 501.6,439.3 506.3,426.9", abr: "408.8,362.9 411.8,367.3 410.3,379.3 404,379.6 412.7,410.2 399.9,412.2 398.7,420.7 415.9,433.3 440.1,435.5 454.5,425.6 466.1,425.9 470.9,433.6 479.4,429.4 486.3,417.6 486.6,416.6 465.2,398.5 441.1,359.6 440.1,356.7 420.1,362.9", laz: "340.7,361.5 364.9,386.7 372.5,388.6 383.1,380.8 391.9,373 408.4,362.7 411.8,367.3 410.3,379.3 404,379.6 412.7,410.2 399.9,412.2 398.7,420.7 415.9,433.3 440.1,435.5 441.1,456 436.3,463.3 439.2,472.6 430.8,479 392.4,471.5 352.2,439.8 346.7,426.2 334.1,419.8 321.6,395.8 319.6,394.9 323.2,380.5 331.4,377.1 330.4,362.1 340.7,361.5", umb: "408.1,362.9 391.9,373 383.1,380.8 372.5,388.6 364.9,386.7 340.7,361.5 340,337 352.6,331.2 348.2,316.8 359.4,301.6 362.7,312.3 384,315.9 393.9,359.9 405.6,362.9", mar: "359.4,301.6 362.7,312.3 384,315.9 393.9,359.9 405.6,362.9 420.1,362.9 439.2,357.2 440.4,356.4 427.7,310.1 404,297.5 392.4,282.3 382.6,278.2 382.3,277.9 380.9,286.6 370.3,282 358.8,283.4 352.2,291.6 359.4,301.6", tos: "247.7,273.2 247.1,262.9 236.5,252.4 235.2,242 249.1,240.7 261.4,254 272.3,255.2 277.3,264.5 289.3,262.9 306,268.9 315.1,259.8 332.3,268.6 336.6,284.1 343.7,291 352.2,291.6 359.4,301.6 348.2,316.8 352.6,331.2 340,337 340.7,361.5 330.4,362.1 331.4,377.1 323.2,380.5 319.6,394.9 319.6,395.3 305.5,393 298,394.9 298.9,383.4 287.4,361.5 277.8,348.1 268.3,349.8 272,334.7 262.3,316.7 254,277.1 247.7,273.5", emi: "382.3,277.9 380.9,286.6 370.3,282 358.8,283.4 352.2,291.6 343.7,291 336.6,284.1 332.3,268.6 315.1,259.8 306,268.9 289.3,262.9 277.3,264.5 272.3,255.2 261.4,254 249.1,240.7 235.2,242 221.2,241.4 217.9,227.5 205.4,224.8 205.9,217.1 212.5,218.8 212.8,211.4 216.3,208.6 212.5,202.1 219.2,192.2 249.3,190.3 280.3,208.3 289.6,203.7 290.7,201.8 314.2,207.9 319.6,205.3 332,213.6 343.8,213.3 364.9,217.1 362.7,221.2 365.6,256.5 376.3,275.4", fri: "398.8,159.1 398.7,158.8 396.5,149.9 390.5,144.7 376.8,146.3 369.5,134.5 372.2,123.1 364.3,110.1 384,92.3 383.7,83.9 384,83.9 425.8,90.2 431.8,96.7 414.3,106.3 417.4,115.1 427.7,115.1 420.1,130.4 428.6,135.9 427.7,145.7 442,153.1 436.3,161.9 428.6,153.1 420.1,153.1 405,148.5 403.1,156.9 399.1,159.1", ven: "398.8,159.1 376.3,171.2 374.4,161.9 363.7,173.1 359.9,186.5 372.5,203.7 364.6,216.8 343.8,213.3 332,213.6 319.6,205.3 305.2,190 289.3,179.1 289,148.2 291.5,145.7 291.5,146 307.6,149.6 315.1,137.8 332.3,133.2 344.8,116.1 337.8,108.2 342.6,93.5 361.2,86.1 371.7,75.5 371.7,75.2 380.9,83.6 383.7,83.9 384,92.3 364.3,110.1 372.2,123.1 369.5,134.5 376.8,146.3 390.5,144.7 396.5,149.9 398.7,158.8", tre: "365.6,70.2 358.2,51 340,57.7 313.2,56.6 299.7,72.1 289.3,64.4 280,65.1 275.7,81.4 282.5,106.3 279.5,116.1 275.4,126 279.4,138.4 288.5,138.9 293.2,143.8 291.5,145.7 291.5,146 307.6,149.6 315.1,137.8 332.3,133.2 344.8,116.1 337.8,108.2 342.6,93.5 361.2,86.1 371.7,75.5 371.7,75.2", lom: "276.1,81.7 282.5,106.3 279.5,116.1 275.4,126 279.4,138.4 288.5,138.9 293.2,143.8 289,148.2 289.3,179.1 305.2,190 319.6,205.3 314.2,207.9 290.7,201.8 289.6,203.7 280.3,208.3 249.3,190.3 219.2,192.2 212.5,202.1 216.3,208.6 212.8,211.4 212.5,218.8 205.9,217.1 205.9,216.1 193.1,195.6 182.9,193.4 179.9,169.6 190.8,165.4 181,138.9", };

italy

Versions

v0