Skip to content

Instantly share code, notes, and snippets.

@gbvitrano

gbvitrano/.block

Last active February 20, 2026 11:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gbvitrano/e50b138375979713ede9c4aba6816787 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gbvitrano/e50b138375979713ede9c4aba6816787 to your computer and use it in GitHub Desktop.
Download ZIP
Masterplan ZEN – Rinascita San Filippo Neri, Palermo
Raw
.block
license: mit
Raw
readme.md

Masterplan ZEN – Rinascita San Filippo Neri, Palermo

Raw
index.html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masterplan ZEN – Rinascita San Filippo Neri, Palermo</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f0f2f5; color: #1a1a2e; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
/* ── HEADER ── */
header {
background: #1a2744;
padding: 10px 20px;
border-bottom: 3px solid #2d6a9f;
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0; z-index: 10;
}
header h1 { font-size: 1.05rem; font-weight: 700; color: #ffffff; letter-spacing: 0.3px; }
header p { font-size: 0.72rem; color: #a0b4cc; margin-top: 2px; }
/* Layer switch buttons */
.layer-btns { display: flex; gap: 6px; }
.layer-btn {
padding: 5px 11px; border-radius: 5px; font-size: 0.72rem; font-weight: 600;
cursor: pointer; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08);
color: #c8d8e8; transition: all 0.15s; white-space: nowrap;
}
.layer-btn:hover { background: rgba(255,255,255,0.16); }
.layer-btn.active { background: #2d6a9f; border-color: #58a6ff; color: #fff; }
/* ── BODY LAYOUT ── */
#layout { display: flex; flex: 1; overflow: hidden; }
/* ── LEFT PANEL (relazione) ── */
#left-panel {
width: 300px;
background: #ffffff;
border-right: 1px solid #d0d7de;
display: flex; flex-direction: column;
flex-shrink: 0;
box-shadow: 2px 0 8px rgba(0,0,0,0.08);
z-index: 5;
}
#left-panel-header {
background: #1a2744;
color: #fff;
padding: 11px 14px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.3px;
flex-shrink: 0;
display: flex; align-items: center; gap: 7px;
}
/* Section tabs */
#doc-tabs {
display: flex;
border-bottom: 1px solid #d0d7de;
background: #f6f8fa;
flex-shrink: 0;
}
.doc-tab {
flex: 1; padding: 7px 4px; text-align: center;
font-size: 0.68rem; font-weight: 600; cursor: pointer;
color: #57606a; border-bottom: 2px solid transparent;
transition: all 0.15s; white-space: nowrap;
}
.doc-tab:hover { color: #1a2744; background: #eef1f4; }
.doc-tab.active { color: #1a2744; border-bottom-color: #2d6a9f; background: #fff; }
/* Slider / scroll content */
#doc-content {
flex: 1;
overflow-y: auto;
padding: 0;
}
#doc-content::-webkit-scrollbar { width: 5px; }
#doc-content::-webkit-scrollbar-track { background: #f6f8fa; }
#doc-content::-webkit-scrollbar-thumb { background: #c8d0d8; border-radius: 3px; }
.doc-section { display: none; }
.doc-section.visible { display: block; }
.doc-intro {
background: #f0f5ff;
border-bottom: 1px solid #d0d7de;
padding: 12px 14px;
font-size: 0.73rem;
color: #444;
line-height: 1.6;
font-style: italic;
}
.doc-chapter {
border-bottom: 1px solid #e8ecf0;
}
.doc-chapter-title {
padding: 10px 14px 8px;
font-size: 0.8rem;
font-weight: 700;
color: #1a2744;
display: flex; align-items: center; gap: 7px;
cursor: pointer;
user-select: none;
background: #f6f8fa;
border-bottom: 1px solid #e8ecf0;
}
.doc-chapter-title:hover { background: #eef1f4; }
.doc-chapter-num {
background: #2d6a9f;
color: #fff;
width: 20px; height: 20px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.65rem; font-weight: 700; flex-shrink: 0;
}
.doc-chapter-body {
padding: 10px 14px 12px;
font-size: 0.73rem;
color: #333;
line-height: 1.65;
}
.doc-chapter-body ul { margin: 6px 0 6px 16px; }
.doc-chapter-body li { margin-bottom: 6px; }
.doc-chapter-body strong { color: #1a2744; }
.doc-chapter-body .place-link {
display: inline-block;
background: #e8f0fb;
border: 1px solid #b0c8e8;
border-radius: 4px;
padding: 1px 6px;
font-size: 0.68rem;
color: #1a5a9a;
cursor: pointer;
margin: 1px 2px;
font-weight: 600;
transition: background 0.12s;
}
.doc-chapter-body .place-link:hover { background: #c0d8f5; }
/* ── MAP AREA ── */
#map-area { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }
/* ── RIGHT PANEL (interventi) ── */
#right-panel {
width: 270px;
background: #ffffff;
border-left: 1px solid #d0d7de;
display: flex; flex-direction: column;
flex-shrink: 0;
box-shadow: -2px 0 8px rgba(0,0,0,0.08);
z-index: 5;
}
#right-panel-header {
background: #1a2744;
color: #fff;
padding: 11px 14px;
font-size: 0.78rem;
font-weight: 700;
flex-shrink: 0;
display: flex; align-items: center; gap: 7px;
}
#interventions-list {
flex: 1; overflow-y: auto; padding: 10px 8px;
display: flex; flex-direction: column; gap: 6px;
}
#interventions-list::-webkit-scrollbar { width: 4px; }
#interventions-list::-webkit-scrollbar-track { background: #f6f8fa; }
#interventions-list::-webkit-scrollbar-thumb { background: #c8d0d8; border-radius: 3px; }
.cat-group { margin-bottom: 4px; }
.cat-label {
font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.8px; color: #57606a; padding: 4px 6px 3px;
}
.int-item {
padding: 7px 9px;
border-radius: 6px;
font-size: 0.75rem;
cursor: pointer;
display: flex; align-items: flex-start; gap: 7px;
transition: background 0.12s, border 0.12s;
color: #24292f;
border: 1.5px solid transparent;
line-height: 1.4;
background: #f6f8fa;
}
.int-item:hover { background: #eef1f4; border-color: #d0d7de; }
.int-item.active { background: #e8f0fb; border-color: #2d6a9f; }
.int-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
/* ── INFO POPUP ON MAP ── */
#info-panel {
position: absolute; bottom: 20px; left: 16px;
background: #fff;
border: 1px solid #d0d7de;
border-radius: 10px;
padding: 13px 15px;
max-width: 280px;
z-index: 1000;
display: none;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
#info-panel h3 { font-size: 0.86rem; margin-bottom: 5px; }
#info-panel p { font-size: 0.75rem; color: #444; line-height: 1.55; }
#info-panel .tag {
display: inline-block; padding: 2px 7px; border-radius: 4px;
font-size: 0.67rem; font-weight: 700; margin-bottom: 7px;
color: #fff;
}
#info-close {
position: absolute; top: 8px; right: 10px;
cursor: pointer; color: #888; font-size: 1rem; line-height: 1;
}
#info-close:hover { color: #333; }
/* Tooltip mappa */
.leaflet-tooltip.zen-tip {
background: rgba(255,255,255,0.95);
border: 1px solid #ccc;
color: #333;
font-size: 0.72rem;
padding: 4px 8px;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.leaflet-tooltip.zen-tip::before { display: none; }
/* Legend bottom-right */
#legend {
position: absolute; bottom: 14px; right: 14px;
background: rgba(255,255,255,0.96);
border: 1px solid #d0d7de;
border-radius: 8px;
padding: 10px 13px;
z-index: 900;
font-size: 0.7rem;
color: #333;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
min-width: 160px;
}
#legend .leg-title { font-weight: 700; color: #1a2744; margin-bottom: 7px; font-size: 0.72rem; }
.leg-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(0,0,0,0.15); }
</style>
</head>
<body>
<!-- HEADER -->
<header>
<div>
<h1>🏙 Masterplan ZEN — Rinascita San Filippo Neri, Palermo</h1>
<p>Piano di Riqualificazione Urbana · Dati OSM + Fonti Progettuali</p>
</div>
<div class="layer-btns">
<button class="layer-btn active" id="btn-base" onclick="setLayer('base')">🗺 Mappa</button>
<button class="layer-btn" id="btn-sat" onclick="setLayer('sat')">🛰 Satellite</button>
</div>
</header>
<!-- LAYOUT -->
<div id="layout">
<!-- LEFT: Relazione PDF -->
<div id="left-panel">
<div id="left-panel-header">📄 Relazione di Piano</div>
<div id="doc-tabs">
<div class="doc-tab active" onclick="showSection(0)">Intro</div>
<div class="doc-tab" onclick="showSection(1)">Scuole</div>
<div class="doc-tab" onclick="showSection(2)">Sport</div>
<div class="doc-tab" onclick="showSection(3)">Urbano</div>
<div class="doc-tab" onclick="showSection(4)">Infra</div>
</div>
<div id="doc-content">
<!-- TAB 0: Intro -->
<div class="doc-section visible" id="sec-0">
<div class="doc-intro">
Relazione sugli Interventi di Riqualificazione nel Quartiere San Filippo Neri (ZEN) — Palermo.<br><br>
Il documento sintetizza le principali linee di intervento pianificate per il recupero infrastrutturale e sociale del quartiere, basandosi sui dati progettuali disponibili.
</div>
<div class="doc-chapter">
<div class="doc-chapter-title">
<span class="doc-chapter-num">!</span> Struttura del Piano
</div>
<div class="doc-chapter-body">
Il piano è articolato in quattro macro-aree tematiche:
<ul>
<li><strong>Edilizia Scolastica e Servizi per l'Infanzia</strong> — recupero e nuove costruzioni</li>
<li><strong>Sport e Tempo Libero</strong> — grandi impianti e sport di prossimità</li>
<li><strong>Riqualificazione Urbana e Inclusione Sociale</strong> — spazi pubblici, cultura, orti</li>
<li><strong>Infrastrutture e Mobilità</strong> — tram, strade, marciapiedi</li>
</ul>
Seleziona un intervento nella colonna destra o clicca un pin sulla mappa per visualizzarne i dettagli.
</div>
</div>
</div>
<!-- TAB 1: Scolastica -->
<div class="doc-section" id="sec-1">
<div class="doc-chapter">
<div class="doc-chapter-title">
<span class="doc-chapter-num">1</span> Edilizia Scolastica e Servizi per l'Infanzia
</div>
<div class="doc-chapter-body">
L'azione sulle strutture educative si divide in due macro-aree: il recupero dell'esistente e l'ampliamento dell'offerta tramite nuove costruzioni.
</div>
</div>
<div class="doc-chapter">
<div class="doc-chapter-title" onclick="toggleChapter(this)">
<span class="doc-chapter-num" style="background:#888">▸</span> Recupero Strutture Esistenti
</div>
<div class="doc-chapter-body" style="display:none">
Sono previsti interventi di <strong>messa in sicurezza sismica</strong> (O.P.C.M. 3274/2003) presso il <strong>Plesso Scolastico Sciascia</strong>, sia nella sede di
<span class="place-link" onclick="selectIntervention('sciascia-smith')">Via Adamo Smith</span>
che in quella di
<span class="place-link" onclick="selectIntervention('sciascia-gobbis')">Via De Gobbis</span>.
In via Adamo Smith è programmata anche una manutenzione straordinaria specifica per l'agibilità e l'igiene della scuola materna.
</div>
</div>
<div class="doc-chapter">
<div class="doc-chapter-title" onclick="toggleChapter(this)">
<span class="doc-chapter-num" style="background:#888">▸</span> Nuove Costruzioni
</div>
<div class="doc-chapter-body" style="display:none">
Il piano prevede un significativo potenziamento dei servizi per la prima infanzia con la costruzione di:
<ul>
<li>Una nuova <strong>scuola materna</strong> in <span class="place-link" onclick="selectIntervention('materna-patti')">Via Patti</span></li>
<li>Tre nuovi <strong>asili nido comunali</strong> situati in:
<span class="place-link" onclick="selectIntervention('nido-pertini')">Viale Sandro Pertini</span>,
<span class="place-link" onclick="selectIntervention('nido-besta')">Via Fabio Besta</span> e
<span class="place-link" onclick="selectIntervention('nido-lanza')">Via Giuseppe Lanza di Scalea</span>
</li>
</ul>
</div>
</div>
</div>
<!-- TAB 2: Sport -->
<div class="doc-section" id="sec-2">
<div class="doc-chapter">
<div class="doc-chapter-title">
<span class="doc-chapter-num">2</span> Sport e Tempo Libero
</div>
<div class="doc-chapter-body">
Lo sport viene utilizzato come leva per l'aggregazione e il presidio del territorio, agendo sia su grandi impianti che su spazi di prossimità.
</div>
</div>
<div class="doc-chapter">
<div class="doc-chapter-title" onclick="toggleChapter(this)">
<span class="doc-chapter-num" style="background:#888">▸</span> Grandi Impianti
</div>
<div class="doc-chapter-body" style="display:none">
Le iniziative riguardano:
<ul>
<li>La valorizzazione del <span class="place-link" onclick="selectIntervention('velodromo')">Velodromo "Paolo Borsellino"</span></li>
<li>La riqualificazione del <span class="place-link" onclick="selectIntervention('palazzetto')">Palazzetto dello Sport</span></li>
<li>Il completamento della cittadella dello sport con interventi sulla tribuna e la manutenzione dell'impianto per il <span class="place-link" onclick="selectIntervention('baseball')">Baseball</span></li>
</ul>
</div>
</div>
<div class="doc-chapter">
<div class="doc-chapter-title" onclick="toggleChapter(this)">
<span class="doc-chapter-num" style="background:#888">▸</span> Sport di Cittadinanza
</div>
<div class="doc-chapter-body" style="display:none">
A livello locale, si segnalano:
<ul>
<li>L'accordo per il <strong>Playground "SPORT ILLUMINA"</strong> in <span class="place-link" onclick="selectIntervention('playground')">Piazza Gino Zappa</span></li>
<li>Il recupero del <span class="place-link" onclick="selectIntervention('campetto')">Campetto Andrea Parisi</span>, inserito nel progetto "Cittadinanza e Città"</li>
</ul>
</div>
</div>
</div>
<!-- TAB 3: Urbano -->
<div class="doc-section" id="sec-3">
<div class="doc-chapter">
<div class="doc-chapter-title">
<span class="doc-chapter-num">3</span> Riqualificazione Urbana e Inclusione Sociale
</div>
<div class="doc-chapter-body">
Gli interventi mirano a creare nuovi centri di aggregazione e a migliorare il decoro urbano, con una forte attenzione al sociale.
</div>
</div>
<div class="doc-chapter">
<div class="doc-chapter-title" onclick="toggleChapter(this)">
<span class="doc-chapter-num" style="background:#888">▸</span> Spazi Pubblici e Cultura
</div>
<div class="doc-chapter-body" style="display:none">
<ul>
<li>Realizzazione della nuova <span class="place-link" onclick="selectIntervention('piazza-zen')">Piazza ZEN (Piazza Primo Carnera)</span></li>
<li>Recupero del <span class="place-link" onclick="selectIntervention('baglio')">Baglio Mercadante</span> per trasformarlo in un <strong>Centro di Quartiere</strong></li>
<li>Un intervento di arte pubblica prevede l'installazione di un <span class="place-link" onclick="selectIntervention('murale')">murale digitale luminoso</span> sugli edifici residenziali tra via Girardengo e via Coppi</li>
</ul>
</div>
</div>
<div class="doc-chapter">
<div class="doc-chapter-title" onclick="toggleChapter(this)">
<span class="doc-chapter-num" style="background:#888">▸</span> Inclusione Sociale
</div>
<div class="doc-chapter-body" style="display:none">
Di rilievo il progetto per la realizzazione di <span class="place-link" onclick="selectIntervention('orti')">orti urbani per l'agricoltura biologica</span>, destinati al <strong>reinserimento dei giovani del circuito penale minorile</strong>.
</div>
</div>
</div>
<!-- TAB 4: Infrastrutture -->
<div class="doc-section" id="sec-4">
<div class="doc-chapter">
<div class="doc-chapter-title">
<span class="doc-chapter-num">4</span> Infrastrutture e Mobilità
</div>
<div class="doc-chapter-body">
Per migliorare la connessione del quartiere e la vivibilità quotidiana, sono programmati interventi sulla mobilità.
</div>
</div>
<div class="doc-chapter">
<div class="doc-chapter-title" onclick="toggleChapter(this)">
<span class="doc-chapter-num" style="background:#888">▸</span> Trasporto Pubblico
</div>
<div class="doc-chapter-body" style="display:none">
Il piano include il <span class="place-link" onclick="selectIntervention('tram')">Sistema Tram</span> per il trasporto pubblico e il potenziamento della connessione del quartiere ZEN con il resto della città di Palermo.
</div>
</div>
<div class="doc-chapter">
<div class="doc-chapter-title" onclick="toggleChapter(this)">
<span class="doc-chapter-num" style="background:#888">▸</span> Viabilità Locale
</div>
<div class="doc-chapter-body" style="display:none">
Sono previste <span class="place-link" onclick="selectIntervention('strade')">opere di manutenzione ordinaria e straordinaria di strade e marciapiedi</span> per la viabilità locale, migliorando la sicurezza e la vivibilità quotidiana del quartiere.
</div>
</div>
</div>
</div>
</div>
<!-- MAP -->
<div id="map-area">
<div id="map"></div>
<!-- Info panel -->
<div id="info-panel">
<span id="info-close" onclick="deselect()">✕</span>
<span id="info-tag" class="tag"></span>
<h3 id="info-title"></h3>
<p id="info-desc"></p>
</div>
<!-- Legend -->
<div id="legend">
<div class="leg-title">Legenda Interventi</div>
<div class="leg-row"><span class="leg-dot" style="background:#3b82f6;"></span> Edilizia Scolastica</div>
<div class="leg-row"><span class="leg-dot" style="background:#22c55e;"></span> Sport &amp; Tempo Libero</div>
<div class="leg-row"><span class="leg-dot" style="background:#f97316;"></span> Riqualificazione Urbana</div>
<div class="leg-row"><span class="leg-dot" style="background:#a855f7;"></span> Infrastrutture</div>
</div>
</div>
<!-- RIGHT: Interventi -->
<div id="right-panel">
<div id="right-panel-header">📍 Interventi</div>
<div id="interventions-list">
<div class="cat-group">
<div class="cat-label" style="color:#1d4ed8;">🏫 Edilizia Scolastica</div>
<div class="int-item" id="item-sciascia-smith" onclick="selectIntervention('sciascia-smith')">
<span class="int-dot" style="background:#3b82f6;"></span> Plesso Sciascia – Via Adamo Smith
</div>
<div class="int-item" id="item-sciascia-gobbis" onclick="selectIntervention('sciascia-gobbis')">
<span class="int-dot" style="background:#3b82f6;"></span> Plesso Sciascia – Via De Gobbis
</div>
<div class="int-item" id="item-materna-patti" onclick="selectIntervention('materna-patti')">
<span class="int-dot" style="background:#3b82f6;"></span> Nuova Scuola Materna – Via Patti
</div>
<div class="int-item" id="item-nido-pertini" onclick="selectIntervention('nido-pertini')">
<span class="int-dot" style="background:#3b82f6;"></span> Asilo Nido – V.le Sandro Pertini
</div>
<div class="int-item" id="item-nido-besta" onclick="selectIntervention('nido-besta')">
<span class="int-dot" style="background:#3b82f6;"></span> Asilo Nido – Via Fabio Besta
</div>
<div class="int-item" id="item-nido-lanza" onclick="selectIntervention('nido-lanza')">
<span class="int-dot" style="background:#3b82f6;"></span> Asilo Nido – Via Lanza di Scalea
</div>
</div>
<div class="cat-group">
<div class="cat-label" style="color:#15803d;">⚽ Sport &amp; Tempo Libero</div>
<div class="int-item" id="item-velodromo" onclick="selectIntervention('velodromo')">
<span class="int-dot" style="background:#22c55e;"></span> Velodromo "Paolo Borsellino"
</div>
<div class="int-item" id="item-baseball" onclick="selectIntervention('baseball')">
<span class="int-dot" style="background:#22c55e;"></span> Area Baseball – Cittadella Sport
</div>
<div class="int-item" id="item-playground" onclick="selectIntervention('playground')">
<span class="int-dot" style="background:#22c55e;"></span> Playground – Via Gino Zappa
</div>
<div class="int-item" id="item-palazzetto" onclick="selectIntervention('palazzetto')">
<span class="int-dot" style="background:#22c55e;"></span> Palazzetto dello Sport
</div>
<div class="int-item" id="item-campetto" onclick="selectIntervention('campetto')">
<span class="int-dot" style="background:#22c55e;"></span> Campetto Andrea Parisi
</div>
</div>
<div class="cat-group">
<div class="cat-label" style="color:#c2410c;">🌆 Riqualificazione Urbana</div>
<div class="int-item" id="item-piazza-zen" onclick="selectIntervention('piazza-zen')">
<span class="int-dot" style="background:#f97316;"></span> Nuova Piazza ZEN (Primo Carnera)
</div>
<div class="int-item" id="item-murale" onclick="selectIntervention('murale')">
<span class="int-dot" style="background:#f97316;"></span> Murale Digitale – Girardengo/Coppi
</div>
<div class="int-item" id="item-baglio" onclick="selectIntervention('baglio')">
<span class="int-dot" style="background:#f97316;"></span> Baglio Mercadante – Centro di Quartiere
</div>
<div class="int-item" id="item-orti" onclick="selectIntervention('orti')">
<span class="int-dot" style="background:#f97316;"></span> Orti Urbani Biologici
</div>
</div>
<div class="cat-group">
<div class="cat-label" style="color:#7c3aed;">🚊 Infrastrutture</div>
<div class="int-item" id="item-tram" onclick="selectIntervention('tram')">
<span class="int-dot" style="background:#a855f7;"></span> Sistema Tram
</div>
<div class="int-item" id="item-strade" onclick="selectIntervention('strade')">
<span class="int-dot" style="background:#a855f7;"></span> Manutenzione Strade &amp; Marciapiedi
</div>
</div>
</div>
</div>
</div>
<script>
// ── TILE LAYERS ─────────────────────────────────────────────────────────────
const map = L.map('map', {
center: [38.1795, 13.3145],
zoom: 15,
zoomControl: true
});
const tileBase = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Rielaborazione: <a href="https://www.linkedin.com/in/gbvitrano/" title="Giovan Battista Vitrano" target="_blank" rel="noopener">gbvitrano</a> - AI Claude Anthropic',
maxZoom: 19
});
const tileSat = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '© <a href="https://www.esri.com/">Esri</a> — Source: Esri, Maxar, Earthstar Geographics',
maxZoom: 19
});
const tileLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png', {
attribution: '',
subdomains: 'abcd',
maxZoom: 19,
pane: 'overlayPane'
});
tileBase.addTo(map);
let currentLayer = 'base';
function setLayer(type) {
if (type === currentLayer) return;
currentLayer = type;
document.getElementById('btn-base').classList.toggle('active', type === 'base');
document.getElementById('btn-sat').classList.toggle('active', type === 'sat');
if (type === 'base') {
map.removeLayer(tileSat);
map.removeLayer(tileLabels);
tileBase.addTo(map);
} else {
map.removeLayer(tileBase);
tileSat.addTo(map);
tileLabels.addTo(map);
}
}
// ── DATI INTERVENTI ────────────────────────────────────────────────────────
const INTERVENTIONS = {
'sciascia-smith': {
latlng: [38.1798, 13.3108], cat: 'scuola', color: '#3b82f6', catBg: '#dbeafe',
tag: 'Edilizia Scolastica',
title: 'Plesso Sciascia – Via Adamo Smith',
desc: 'Messa in sicurezza sismica (O.P.C.M. 3274/2003) e manutenzione straordinaria per agibilità e igiene della scuola materna. Istituto comprensivo Leonardo Sciascia.'
},
'sciascia-gobbis': {
latlng: [38.1791, 13.3103], cat: 'scuola', color: '#3b82f6', catBg: '#dbeafe',
tag: 'Edilizia Scolastica',
title: 'Plesso Sciascia – Via De Gobbis',
desc: 'Messa in sicurezza sismica (O.P.C.M. 3274/2003). Programma "Iniziativa Cittadinanza e Città". Sede distaccata del plesso Sciascia.'
},
'materna-patti': {
latlng: [38.1741, 13.3167], cat: 'scuola', color: '#3b82f6', catBg: '#dbeafe',
tag: 'Nuova Costruzione',
title: 'Nuova Scuola Materna – Via Patti',
desc: 'Costruzione di una nuova scuola materna comunale. Potenziamento dei servizi per la prima infanzia nel quartiere ZEN.'
},
'nido-pertini': {
latlng: [38.1815, 13.3183], cat: 'scuola', color: '#3b82f6', catBg: '#dbeafe',
tag: 'Nuova Costruzione',
title: 'Nuovo Asilo Nido – Viale Sandro Pertini',
desc: 'Uno dei tre nuovi asili nido comunali previsti nel piano. Potenziamento dei servizi 0–3 anni sul principale asse del quartiere.'
},
'nido-besta': {
latlng: [38.1748, 13.3050], cat: 'scuola', color: '#3b82f6', catBg: '#dbeafe',
tag: 'Nuova Costruzione',
title: 'Nuovo Asilo Nido – Via Fabio Besta',
desc: 'Secondo dei tre nuovi asili nido comunali. Parte del pacchetto di nuovi servizi per l\'infanzia del piano di riqualificazione.'
},
'nido-lanza': {
latlng: [38.1755, 13.3104], cat: 'scuola', color: '#3b82f6', catBg: '#dbeafe',
tag: 'Nuova Costruzione',
title: 'Nuovo Asilo Nido – Via G. Lanza di Scalea',
desc: 'Terzo asilo nido comunale. Via Lanza di Scalea è l\'asse viario principale del quartiere ZEN.'
},
'velodromo': {
latlng: [38.1739, 13.3138], cat: 'sport', color: '#22c55e', catBg: '#dcfce7',
tag: 'Grandi Impianti',
title: 'Velodromo "Paolo Borsellino"',
desc: 'Valorizzazione e riqualificazione del Velodromo intitolato al magistrato. Grande impianto sportivo polifunzionale a valenza sovralocale.'
},
'baseball': {
latlng: [38.1908, 13.3151], cat: 'sport', color: '#22c55e', catBg: '#dcfce7',
tag: 'Grandi Impianti',
title: 'Area Baseball – Cittadella dello Sport',
desc: 'Completamento della tribuna e manutenzione straordinaria dell\'impianto per il baseball. Parte della Cittadella dello Sport (Fondo Patti).'
},
'playground': {
latlng: [38.1785, 13.3123], cat: 'sport', color: '#22c55e', catBg: '#dcfce7',
tag: 'Sport di Prossimità',
title: 'Playground "SPORT ILLUMINA" – Via Gino Zappa',
desc: 'Accordo per la realizzazione di un playground sportivo di prossimità. Progetto di presidio e aggregazione territoriale tramite lo sport.'
},
'palazzetto': {
latlng: [38.1914, 13.3175], cat: 'sport', color: '#22c55e', catBg: '#dcfce7',
tag: 'Grandi Impianti',
title: 'Palazzetto dello Sport (Palasport Fondo Patti)',
desc: 'Riqualificazione del Palazzetto dello Sport del quartiere. Impianto polifunzionale al servizio del territorio ZEN.'
},
'campetto': {
latlng: [38.1800, 13.3095], cat: 'sport', color: '#22c55e', catBg: '#dcfce7',
tag: 'Sport di Prossimità',
title: 'Campetto Andrea Parisi',
desc: 'Recupero del campetto di prossimità intitolato ad Andrea Parisi, inserito nel progetto "Cittadinanza e Città".'
},
'piazza-zen': {
latlng: [38.1812, 13.3179], cat: 'urbano', color: '#f97316', catBg: '#ffedd5',
tag: 'Spazio Pubblico',
title: 'Nuova Piazza ZEN – Via Primo Carnera',
desc: 'Realizzazione della nuova piazza pubblica del quartiere ZEN (Piazza Primo Carnera). Nuovo cuore civico e spazio di aggregazione.'
},
'murale': {
latlng: [38.1793, 13.3170], cat: 'urbano', color: '#f97316', catBg: '#ffedd5',
tag: 'Arte Pubblica',
title: 'Murale Digitale Luminoso – Lotto 2C2',
desc: 'Installazione di un murale digitale luminoso sugli edifici residenziali tra Via Girardengo e Via Coppi. Arte pubblica per il decoro urbano del quartiere.'
},
'baglio': {
latlng: [38.1810, 13.3135], cat: 'urbano', color: '#f97316', catBg: '#ffedd5',
tag: 'Cultura & Sociale',
title: 'Recupero Baglio Mercadante',
desc: 'Recupero del Baglio Mercadante (struttura storica rurale) per trasformarlo in un Centro di Quartiere. Nuovo spazio di aggregazione sociale e culturale.'
},
'orti': {
latlng: [38.1760, 13.3150], cat: 'urbano', color: '#f97316', catBg: '#ffedd5',
tag: 'Inclusione Sociale',
title: 'Orti Urbani Biologici',
desc: 'Orti urbani per l\'agricoltura biologica, destinati al reinserimento di giovani del circuito penale minorile. Progetto a forte valenza sociale.'
},
'tram': {
latlng: [38.1795, 13.3200], cat: 'infra', color: '#a855f7', catBg: '#f3e8ff',
tag: 'Trasporto Pubblico',
title: 'Sistema Tram – TPL Quartiere ZEN',
desc: 'Estensione/potenziamento del Sistema Tram per connettere il quartiere ZEN con il centro di Palermo. Miglioramento della mobilità pubblica locale.'
},
'strade': {
latlng: [38.1780, 13.3115], cat: 'infra', color: '#a855f7', catBg: '#f3e8ff',
tag: 'Viabilità',
title: 'Manutenzione Strade & Marciapiedi',
desc: 'Interventi di manutenzione ordinaria e straordinaria della rete stradale e dei marciapiedi per migliorare vivibilità e sicurezza nel quartiere.'
}
};
// ── MARKER ────────────────────────────────────────────────────────────────
let selectedId = null;
const markers = {};
function createIcon(color, active) {
const s = active ? 22 : 16;
const border = active ? 3 : 2;
const shadow = active
? `0 0 0 4px ${color}44, 0 2px 8px rgba(0,0,0,0.3)`
: `0 1px 5px rgba(0,0,0,0.25)`;
return L.divIcon({
className: '',
html: `<div style="
width:${s}px;height:${s}px;
background:${color};
border:${border}px solid #fff;
border-radius:50%;
box-shadow:${shadow};
transition:all 0.15s;
"></div>`,
iconSize: [s, s],
iconAnchor: [s / 2, s / 2]
});
}
Object.entries(INTERVENTIONS).forEach(([id, d]) => {
const m = L.marker(d.latlng, {
icon: createIcon(d.color, false),
zIndexOffset: 500
}).addTo(map);
m.bindTooltip(d.title, { className: 'zen-tip', sticky: true, offset: [10, 0] });
m.on('click', e => { L.DomEvent.stopPropagation(e); selectIntervention(id); });
markers[id] = m;
});
// ── PERIMETRO ZEN ─────────────────────────────────────────────────────────
L.polygon([
[38.1660,13.3050],[38.1660,13.3270],
[38.1870,13.3270],[38.1870,13.3050]
], {
color: '#2d6a9f', weight: 2, opacity: 0.5,
fillColor: '#2d6a9f', fillOpacity: 0.04,
dashArray: '8 5'
}).addTo(map).bindTooltip('Quartiere ZEN – San Filippo Neri', {
permanent: false, sticky: true, className: 'zen-tip'
});
// ── SELEZIONE ─────────────────────────────────────────────────────────────
function selectIntervention(id) {
// Reset precedente
if (selectedId) {
markers[selectedId].setIcon(createIcon(INTERVENTIONS[selectedId].color, false));
markers[selectedId].setZIndexOffset(500);
const prevEl = document.getElementById('item-' + selectedId);
if (prevEl) prevEl.classList.remove('active');
}
// Toggle
if (selectedId === id) {
selectedId = null;
closeInfo();
return;
}
selectedId = id;
const d = INTERVENTIONS[id];
markers[id].setIcon(createIcon(d.color, true));
markers[id].setZIndexOffset(1500);
map.flyTo(d.latlng, 17, { duration: 0.65 });
const el = document.getElementById('item-' + id);
if (el) { el.classList.add('active'); el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }
showInfo(id);
}
function deselect() {
if (!selectedId) return;
markers[selectedId].setIcon(createIcon(INTERVENTIONS[selectedId].color, false));
markers[selectedId].setZIndexOffset(500);
document.getElementById('item-' + selectedId)?.classList.remove('active');
selectedId = null;
closeInfo();
}
// ── INFO PANEL ────────────────────────────────────────────────────────────
function showInfo(id) {
const d = INTERVENTIONS[id];
const tag = document.getElementById('info-tag');
tag.textContent = d.tag;
tag.style.background = d.color;
document.getElementById('info-title').textContent = d.title;
document.getElementById('info-title').style.color = d.color;
document.getElementById('info-desc').textContent = d.desc;
document.getElementById('info-panel').style.display = 'block';
}
function closeInfo() {
document.getElementById('info-panel').style.display = 'none';
}
map.on('click', deselect);
// ── TABS DOCUMENTO ────────────────────────────────────────────────────────
const docTabs = document.querySelectorAll('.doc-tab');
const docSections = document.querySelectorAll('.doc-section');
function showSection(i) {
docTabs.forEach((t, idx) => t.classList.toggle('active', idx === i));
docSections.forEach((s, idx) => s.classList.toggle('visible', idx === i));
}
function toggleChapter(header) {
const body = header.nextElementSibling;
const arrow = header.querySelector('.doc-chapter-num');
const open = body.style.display !== 'none';
body.style.display = open ? 'none' : 'block';
arrow.textContent = open ? '▸' : '▾';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment