viewof map = { // Crea un contenitore DOM per la mappa const div = DOM.element("div", { style: "height: 600px; width: 100%;" }); // Carica Leaflet CSS const leafletCSS = document.createElement("link"); leafletCSS.rel = "stylesheet"; leafletCSS.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"; document.head.appendChild(leafletCSS); // Importa Leaflet JS await import("https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"); // Crea la mappa centrata sull’Italia const map = L.map(div).setView([41.9, 12.5], 6); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "© OpenStreetMap contributors" }).addTo(map); // Carica il GeoJSON da allegato Observable const data = await FileAttachment("reddiri2012Comuniwgs84-min.json").json(); // <-- sostituisci nomefile.geojson con il tuo nome file // Funzione per assegnare colori in base al reddito medio function getColor(v) { return v > 40000 ? "#006837" : // verde scuro (redditi alti) v > 35000 ? "#31A354" : // verde medio v > 30000 ? "#78C679" : // verde chiaro v > 25000 ? "#C2E699" : // giallo-verde v > 20000 ? "#FFFF99" : // giallo v > 15000 ? "#FDBE85" : // arancio chiaro v > 10000 ? "#FD8D3C" : // arancio "#E31A1C"; // rosso (redditi bassi) } // Stile delle aree function style(feature) { return { fillColor: getColor(feature.properties.reddito_medio), weight: 1, opacity: 1, color: "white", dashArray: "3", fillOpacity: 0.7 }; } // Aggiungi il layer GeoJSON const geojsonLayer = L.geoJSON(data, { style, onEachFeature: (feature, layer) => { const props = feature.properties; const prov = feature.properties["Sigla Provincia"]; const label = ` ${"Comune: " + props.NOME}
${"Provincia: " + prov}
Reddito medio: ${props.reddito_medio?.toLocaleString("it-IT")} € `; layer.bindPopup(label); } }).addTo(map); // Crea la legenda const legend = L.control({ position: "bottomright" }); legend.onAdd = function () { const div = L.DomUtil.create("div", "info legend"); const grades = [0, 10000, 15000, 20000, 25000, 30000, 35000, 40000]; let labels = []; for (let i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i].toLocaleString("it-IT") + (grades[i + 1] ? "–" + grades[i + 1].toLocaleString("it-IT") + "
" : "+"); } div.style.background = "white"; div.style.padding = "6px"; div.style.font = "12px/1.4 Arial, sans-serif"; div.style.borderRadius = "6px"; div.style.boxShadow = "0 0 5px rgba(0,0,0,0.2)"; return div; }; legend.addTo(map); return div; }