Map of Italy

\n \n \n \n \n

\n \n \n \n {filteredRegions.map((region) => (\n handleClick(region)}\n className={`region ${selectedRegions.includes(region) ? \"selected\" : \"\"} ${hoveredRegion === region ? \"hovered\" : \"\"}`}\n >\n \n \n ))}\n \n \n \n {hoveredRegion && (\n \n {regionData[hoveredRegion].name}\n \n Population: {regionData[hoveredRegion].population.toLocaleString()}\n \n \n Density: {calculateDensity(hoveredRegion)} people/km²\n \n

\n )}\n

Legend

\n Default\n

\n Hovered\n

\n Selected\n

Selected Regions

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

Total Population: {totalPopulation.toLocaleString()}

Historical Population

\n \n

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}

\n \n {Object.keys(regionData).map((region) => (\n \n ))}\n \n

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

\n ({\n name: regionData[region].name,\n population: regionData[region].population,\n area: regionData[region].area,\n density: calculateDensity(region),\n }))}\n filename={\"italy-regions-data.csv\"}\n className=\"hidden\"\n ref={csvLink}\n target=\"_blank\"\n />\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Map of Italy\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n }\n );\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: 'Lora', serif;\n background-color: #F5F5DC;\n color: #4A4A4A;\n 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\");\n transition: background-color 0.5s, color 0.5s;\n}\n\n.container {\n max-width: 1000px;\n margin: 0 auto;\n padding: 40px 20px;\n transition: background-color 0.5s, color 0.5s;\n}\n\n.dark-mode {\n background-color: #2C3E50;\n color: #ECF0F1;\n}\n\nh1, h2, h3, h4 {\n font-family: 'Playfair Display', serif;\n text-align: center;\n}\n\nh1 {\n font-size: 3rem;\n margin-bottom: 40px;\n color: #8B4513;\n}\n\nh2 {\n font-size: 2rem;\n margin-bottom: 20px;\n color: #8B4513;\n}\n\n.dark-mode h1,\n.dark-mode h2,\n.dark-mode h3,\n.dark-mode h4 {\n color: #D2B48C;\n}\n\n.content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.map-container {\n flex: 0 0 500px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n border: 1px solid #D2B48C;\n background-color: #FFF8DC;\n padding: 20px;\n position: relative;\n 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;\n border-width: 30px;\n border-style: solid;\n}\n\n.dark-mode .map-container {\n background-color: #34495E;\n border-color: #D2B48C;\n}\n\nsvg {\n width: 500px;\n height: 603px;\n}\n\n.region {\n fill: #E8D0A9;\n transition: fill 0.3s ease;\n 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;\n}\n\n.region.hovered {\n fill: #D2691E;\n}\n\n.region.selected {\n fill: #8B4513;\n}\n\n.dark-mode .region {\n fill: #7F8C8D;\n}\n\n.dark-mode .region.hovered {\n fill: #F39C12;\n}\n\n.dark-mode .region.selected {\n fill: #D35400;\n}\n\n.info-container {\n flex: 1;\n margin-left: 40px;\n}\n\n.legend {\n background-color: #FFF8DC;\n border: 1px solid #D2B48C;\n border-radius: 4px;\n padding: 20px;\n margin-bottom: 20px;\n}\n\n.dark-mode .legend {\n background-color: #34495E;\n border-color: #D2B48C;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.legend-color {\n width: 20px;\n height: 20px;\n margin-right: 10px;\n border-radius: 50%;\n}\n\n.legend-color.default {\n background-color: #E8D0A9;\n}\n\n.legend-color.hovered {\n background-color: #D2691E;\n}\n\n.legend-color.selected {\n background-color: #8B4513;\n}\n\n.dark-mode .legend-color.default {\n background-color: #7F8C8D;\n}\n\n.dark-mode .legend-color.hovered {\n background-color: #F39C12;\n}\n\n.dark-mode .legend-color.selected {\n background-color: #D35400;\n}\n\n.selected-regions, .timeline, .grouped-regions {\n background-color: #FFF8DC;\n border: 1px solid #D2B48C;\n border-radius: 4px;\n padding: 20px;\n margin-bottom: 20px;\n}\n\n.dark-mode .selected-regions,\n.dark-mode .timeline,\n.dark-mode .grouped-regions {\n background-color: #34495E;\n border-color: #D2B48C;\n}\n\nul {\n list-style-type: none;\n padding: 0;\n}\n\nli {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n padding: 5px 10px;\n background-color: #F4A460;\n color: #FFF8DC;\n border-radius: 4px;\n transition: transform 0.2s ease;\n}\n\nli:hover {\n transform: translateX(5px);\n}\n\n.dark-mode li {\n background-color: #D35400;\n}\n\n.region-name {\n font-weight: bold;\n}\n\n.total-population {\n margin-top: 20px;\n font-weight: bold;\n text-align: right;\n}\n\n.footer {\n margin-top: 40px;\n text-align: center;\n font-style: italic;\n}\n\na {\n color: #8B4513;\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n\n.dark-mode a {\n color: #F1C40F;\n}\n\n.controls {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\n\nbutton, input[type=\"text\"] {\n background-color: #8B4513;\n color: #FFF8DC;\n border: none;\n padding: 10px 20px;\n margin: 0 10px;\n font-family: 'Lora', serif;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #A0522D;\n}\n\n.dark-mode button,\n.dark-mode input[type=\"text\"] {\n background-color: #D2B48C;\n color: #2C3E50;\n}\n\n.dark-mode button:hover {\n background-color: #E6CCAF;\n}\n\n.tooltip {\n position: fixed;\n background-color: rgba(255, 248, 220, 0.9);\n border: 1px solid #D2B48C;\n border-radius: 4px;\n padding: 10px;\n font-size: 0.9rem;\n pointer-events: none;\n z-index: 1000;\n transform: translate(10px, 10px);\n}\n\n.dark-mode .tooltip {\n background-color: rgba(52, 73, 94, 0.9);\n border-color: #D2B48C;\n}\n\n.mini-map {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background-color: rgba(255, 248, 220, 0.9);\n border: 1px solid #D2B48C;\n border-radius: 4px;\n padding: 5px;\n}\n\n.dark-mode .mini-map {\n background-color: rgba(52, 73, 94, 0.9);\n border-color: #D2B48C;\n}\n\n.hidden {\n display: none;\n}\n\n@media print {\n body {\n background: none;\n }\n\n .controls, .footer, .mini-map {\n display: none;\n }\n\n .map-container {\n border: none;\n box-shadow: none;\n }\n\n .content {\n flex-direction: column;\n }\n\n .info-container {\n margin-left: 0;\n margin-top: 20px;\n }\n}\n\n@media (max-width: 768px) {\n .content {\n flex-direction: column;\n }\n\n .map-container {\n flex: none;\n width: 100%;\n max-width: 500px;\n margin: 0 auto;\n }\n\n .info-container {\n margin-left: 0;\n margin-top: 40px;\n }\n\n .controls {\n flex-wrap: wrap;\n }\n\n button, input[type=\"text\"] {\n margin: 5px;\n }\n}\n`;\n\nconst regionPoints = {\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n 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\",\n};","deleted","label",[99],"permalink","https://www.val.town/x/all/italy/code/main.tsx","extension","actionData","errors"]