wms: layer added to map with control

TODO: refactor bibliography UI logic...

.gitignore

@@ -5,6 +5,17 @@
 *.shp*
 *.log
 *.zip
+*.pdf
+*.tif
+*.mp4
 vendor/
-docs/
 progetto_QGIS/
+conf.json
+shapefile
+config.js
+# Don't track shperical photos
+webgis/img/spherical/*.png
+# Don't track georeferenced images
+webgis/img/geo/*
+!webgis/img/geo/.keep
+*Zone*Identifier

README.md

@@ -0,0 +1,62 @@
+# WebGIS Isola di Capri
+
+Il webGIS è servito dalla cartella `webgis/`, che funziona da _root_ per i file JavaScript (cartella `js/`), caricati dal relativo `index.html`, oltre che per immagini, documenti e layer GeoJSON.
+
+## Configurazione
+
+Il webGIS necessita di un singolo file di configurazione (**_non versionato_**), che deve trovarsi in `webgis/js` ed essere nominato `config.js`.
+
+Il file definisce solo gli endpoint di base da utilizzare per le chiamate alla API JSON lato server (che fornisce dati estratti dal database PostgreSQL) in ambiente di sviluppo (`dev`) o in produzione (`prod`).
+
+La struttura del file deve essere la seguente (gli endpoint riportati sono solo di esempio):
+
+```js
+const API_CONFIG = {
+    dev: 'https://localhost',
+    prod: 'https://api.example.com'
+};
+
+export default API_CONFIG;
+```
+
+## Struttura e funzionamento base
+
+### Entry point
+
+Il punto d'ingresso dell'applicazione è `webgis/js/index.js` che registra i controller Stimulus e inizializza alcune funzioni UI (che potrebbero essere migrate in un controller Stimulus dedicato in futuro).
+
+### Mappa
+
+La mappa è gestita con Leaflet dalle funzioni definite nel modulo `GIS` (`webgis/js/gis.js`) che carica i layer iniziali, inclusi i geoJSON necessari, interroga le API server per recuperare i dati dal database e crea i cluster di puntatori (_markers_) tramite il plugin `Leaflet.markercluster`.
+
+### Pseudo-componenti HTML
+
+Il contenuto HTML mostrato nei modali che si aprono cliccando sui puntatori è gestito dinamicamente da pseudo-componenti rappresentati da classi JavaScript che si trovano in `webgis/js/components`.
+
+Potrebbe essere utile (o auspicabile) trasformarli in Web Components veri e propri, magari tramite [_Lit.js_](https://lit.dev/). In questo caso, bisognerebbe capire come gestire i dati dinamici all'interno dei template.
+
+## Dipendenze
+
+Le dipendenze sono gestite con `yarn`, per installarle è sufficiente eseguire `yarn` dalla cartella `webgis/js`, dove si trova `package.json`.
+
+Il file `webgis/index.html` contiene una [`importmap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) principalmente per mappare 
+Photo Sphere Viewer, Three.js (da cui dipende Photo Sphere Viewer) e Stimulus.
+
+### CSS
+
+- [Bulma](https://bulma.io)
+- Fontawesome free
+
+### JS
+
+- [Leaflet](https://leafletjs.com) (mappa)
+    - [kalisio/leaflet-graphicscale](https://github.com/kalisio/leaflet-graphicscale) (plugin Leaflet per scala mappa)
+    - [Leaflet/Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster) (plugin Leaflet per raggruppamenti puntatori)
+- [Spotlight.js](https://nextapps-de.github.io/spotlight/) (gallery immagini)
+- [Photo Sphere Viewer](https://photo-sphere-viewer.js.org/) (foto sferiche / panorami)
+- [Stimulus](https://stimulus.hotwired.dev) (UI)
+
+## TODO
+
+- [ ] Auto-discovery per Stimulus?
+- [ ] Refactor con app state per evitare oggetti globali

css/app.css

@@ -1,5 +1,5 @@
-@import url("../js/vendor/bulma/css/bulma.min.css");
+@import url("../webgis/js/vendor/bulma/css/bulma.min.css");
-@import url("../js/vendor/fontawesome-free/css/all.min.css");
+@import url("../webgis/js/vendor/fontawesome-free/css/all.min.css");
 @import url("../fonts/fonts.css");
 /* Variables */
 :root {
@@ -20,6 +20,9 @@ a {
 a:visited {
     color: var(--links-color);
 }
+.main.columns {
+    height: 95vh;
+}
 .main.credits {
     width: 60vw;
     margin: 0 auto;
@@ -30,6 +33,12 @@ a:visited {
     background: #fff; 
     font-family: inherit;
 }
+
+.leaflet-top,
+.leaflet-left {
+    z-index: 999 !important;
+}
+
 .leaflet-control a {
     text-decoration: none;
     color: initial;
@@ -111,8 +120,14 @@ a:visited {
 .modal {
     z-index: 1000;
 }
-.modal-content {
+.modal-content,
+.modal-card {
     width: 60vw;
+    min-height: 95vh;
+}
+.modal-card-body img {
+    max-height: 200px;
+    max-width: 200px;
 }
 .has-bottom-border {
     border-bottom: 1px #aaa solid;
@@ -132,5 +147,43 @@ a:visited {
 }
 /* Leaflef map container */
 #map {
-    height: calc(100vh - 107px);
+    /*height: calc(100vh - 107px);*/
+    height: 100%;
+}
+
+#map-progress {
+    position: absolute;
+    top: 30vh;
+    max-width: 600px;
+    left: 35vw;
+}
+/* Menu overlay */
+.menu-overlay {
+    z-index: 1000;
+    overflow-y: auto;
+    margin-top: 54px;
+}
+.menu-overlay.is-overlay {
+    left: auto;
+}
+/* Content in tabs */
+.docs-title {
+    width: 300px;
+    max-width: 300px;
+}
+/* Panoramas */
+#pano-viewer {
+    height: 100%;
+    width: 100%;
+}
+/* Marker cluster */
+.marker-cluster-small {
+	background-color: rgba(202, 92, 143, 0.61);
+}
+.marker-cluster-small div {
+	background-color: rgba(204, 57, 113, 0.6);
+}
+
+.marker-cluster-small span {
+    color: #fff;
 }

index.html

@@ -2,19 +2,27 @@
 <html lang="it" data-text="html" data-theme="light">
 <head>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
-    <script src="js/vendor/leaflet/dist/leaflet.js"></script>
     <link rel="stylesheet" href="css/app.css" />
-    <link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
+    <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
-    <script src="js/index.js" type="module"></script>
+    <link rel="stylesheet" href="webgis/js/vendor/spotlight.js/dist/css/spotlight.min.css" />
-    <title>Carta Archeologica di Capri</title>
+    <title>Carta Archeologica Isola di Capri</title>
+    <script type="importmap">
+    {
+        "imports": {
+        "@hotwired/stimulus": "./webgis/js/vendor/@hotwired/stimulus/dist/stimulus.js"
+        }
+    }
+    </script>
 </head>
-<body>
+<body data-controller="modal">
-    <nav class="navbar mb-2" role="navigation">
+    <nav class="navbar mb-2 p-3 has-bottom-border" role="navigation">
         <div class="navbar-brand">
-            <span class="navbar-item is-size-3">
+            <a class="navbar-item" href="https://ispc.cnr.it" title="CNR-ISPC">
-                Carta archeologica di Capri
+                <img class="image" src="img/logo_ispc_compatto.png" style="min-height: 88px;" />
-            </span>
+            </a>
+            <a class="navbar-item" title="Associazione Apragopolis">
+                <img class="image" src="img/logo_apragopolis.jpg" style="min-height: 68px;" />
+            </a>
             <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
@@ -23,66 +31,545 @@
             </a>
         </div>
         <hr class="navbar-divider">
-        <div class="navbar-menu ml-3" id="nav-menu">
-            <button class="navbar-item button is-size-5 is-white" role="button" id="siti">
-                <i class="fa fa-list mr-2"></i> Siti indagati
-            </button>
-        </div>
         <div class="navbar-end">
-            <a class="navbar-item" href="about.html" class="btn btn-link" title="About">About</a>
+            <a href="/webgis/" class="navbar-item">WebGIS</a>
+            <a class="navbar-item" href="https://cultura.gov.it/" title="Ministero della Cultura">
+                <img class="image" src="img/logo_MIC.jpg" style="min-height: 88px;" />
+            </a>
+            <a class="navbar-item" href="https://www.comune.anacapri.na.it/" title="Comune di Anacapri">
+                <img class="image" src="img/logo_anacapri.svg" style="min-height: 88px;" />
+            </a>
+            <a class="navbar-item" href="https://www.cittadicapri.it/" title="Comune di Capri">
+                <img class="image" src="img/logo_comune_capri.png" style="min-height: 88px;" />
+            </a>
         </div>
     </nav>
-    <!-- TODO Loader -->
+    <div class="main content mt-5">
-    <div class="wait-lg text-center is-hidden" style="clear: both;">
+        <h1 class="mt-6 title has-text-centered">La Carta Archeologica dell'Isola di Capri</h1>
-        <p>Loading...</p>
+        <div class="columns">
-        <div class="loading loading-lg"></div>
+            <div class="column"></div>
+            <div class="column is-three-quarters is-size-5">
+                <section class="section pb-1 has-text-centered">
+                    La carta archeologica di Capri è frutto di un lavoro condiviso tra il <a href="https://ispc.cnr.it">CNR–ISPC</a>,
+                    la <a href="https://sabapmetropolitanana.cultura.gov.it/">Soprintendenza Archeologia Belle Arti e Paesaggio per l'Area Metropolitana di Napoli</a>,
+                    i Comuni di Capri e Anacapri e l’Associazione Culturale Apragopolis.
+                    Il <a href="/webgis/">WebGis</a>, creato appositamente per una consultazione facile e interattiva, contiene gli elaborati dei rilievi
+                    archeologici svolti, le ricerche archivistiche e bibliografiche sui beni archeologici oggi visibili e su quelli
+                    non più esistenti, la raccolta della cartografia storica, contenuti multimediali e immagini storiche.
+                </section>
             </div>
-    <div class="main columns">
+            <div class="column"></div>
-        <div class="column is-hidden" id="menu">
+        </div>
-            <aside class="menu ml-4">
+        <div class="level is-fullwidth mb-0 has-background-light">
-                <p class="menu-label">
+            <div class="columns mt-5 is-8" style="width: 80vw; margin-left: auto; margin-right: auto">
-                    Siti indagati
+                <div class="column card has-text-centered is-one-third"
-                <button title="Chiudi menu" class="button is-small is-pulled-right" id="close-menu">
+                    data-id="progetto" data-action="click->modal#homeOpen">
-                    <span class="icon is-small">
+                    <div class="card-image">
-                      <i class="fa fa-chevron-left"></i>
+                        <img src="img/progetto.jpg" />
-                    </span>
+                    </div>
+                    <div class="card-content">
+                        <button class="button is-link mt-3 is-large has-text-white">
+                            Il progetto
                         </button>
+                    </div>
+                </div>
+                <div class="column card has-text-centered is-clickable"
+                    data-id="webgis" data-action="click->modal#homeOpen">
+                    <div class="card-image">
+                        <img src="img/webgis.jpg" />
+                    </div>
+                    <div class="card-content">
+                        <button class="button is-link mt-3 is-large has-text-white">
+                            Il WebGIS
+                        </button>
+                    </div>
+                </div>
+                <div class="column card has-text-centered mb-5 is-clickable"
+                    data-id="cartografia" data-action="click->modal#homeOpen">
+                    <div class="card-image">
+                        <img src="img/cartografia.jpg" />
+                    </div>
+                    <div class="card-content">
+                        <button class="button is-link is-large mt-3 has-text-white">
+                            Cartografia storica
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="level is-fullwidth mt-0 has-background-light">
+            <div class="columns is-8 pt-6 pb-6" style="width: 80vw; margin-left: auto; margin-right: auto">
+                <div class="column is-one-third card has-text-centered is-clickable"
+                    data-id="pubblicazioni" data-action="click->modal#homeOpen">
+                    <div class="card-image">
+                        <img src="img/pubblicazioni.jpg" />
+                    </div>
+                    <div class="card-content">
+                        <button class="button is-link is-large mt-3 has-text-white">Pubblicazioni</button>
+                    </div>
+                </div>
+                <div class="column card has-text-centered is-clickable"
+                    data-id="credits" data-action="click->modal#homeOpen">
+                    <div class="card-image">
+                        <img src="img/credits.jpg" />
+                    </div>
+                    <div class="card-content">
+                        <button class="button is-link is-large mt-3 has-text-white">Credits</button>
+                    </div>
+                </div>
+                <div class="column card mb-5 has-text-centered is-clickable"
+                    data-id="riconoscimenti" data-action="click->modal#homeOpen">
+                    <div class="card-image">
+                        <img src="img/riconoscimenti.jpg" />
+                    </div>
+                    <div class="card-content">
+                        <button class="button is-link is-large mt-3 has-text-white">Riconoscimenti</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </div>
+        <div class="modal" data-modal-target="modal" data-id="progetto">
+            <div class="modal-background" data-action="click->modal#homeClose" data-id="progetto"></div>
+            <div class="modal-card">
+            <header class="modal-card-head">
+                <h3 class="modal-card-title has-text-centered">Il progetto</h3> 
+                <button class="delete" aria-label="close" data-action="modal#homeClose" data-id="progetto"></button>
+            </header>
+            <section class="modal-card-body">
+                <p class="p-2 mt-2 mb-2">
+                    Il progetto per la realizzazione della carta archeologica dell’isola di Capri vede coinvolti, tramite appositi accordi di collaborazione e sotto la direzione scientifica della Soprintendenza Archeologia Belle Arti e Paesaggio per l’Area Metropolitana di Napoli, i Comuni di Capri e di Anacapri, l’Istituto di Scienze del Patrimonio Culturale (ISPC) del CNR e l’Associazione Culturale Apragopolis.
                 </p>
-                <ul class="menu-list">
+                <p class="p-2 mt-2 mb-2">
-                    <li>
+                    L’obiettivo principale consiste nell’acquisire conoscenze sull’effettiva estensione dei beni archeologici presenti sull’isola, localizzarne i resti e approfondirne le funzioni e dimensioni originarie. La creazione di una mappa archeologica dell’isola rappresenta lo strumento più idoneo per affrontare diverse esigenze, tra cui facilitare le azioni mirate alla protezione e valorizzazione del patrimonio culturale, oltre a fornire una corretta comprensione dell’evoluzione territoriale. Questa comprensione è un presupposto fondamentale per ricostruire gli eventi storici dell’area e guidare la pianificazione territoriale.
-                        <a class="button" title="Vai al sito Villa di Gradola" id="gradola">
+                </p>
-                            Villa di Gradola
+                <p class="p-2 mt-2 mb-2">
-                        </a>
+                    Il progetto sperimenta l’utilizzo di metodi innovativi di rappresentazione dei monumenti per produrre nuovi contenuti scientifici e una documentazione grafica dettagliata utile all’analisi archeologica. Attraverso la creazione del webgis si consente a tutti i soggetti interessati di fruire liberamente ed in maniera condivisa delle informazioni storico-archeologiche appositamente raccolte e archiviate.
-                        <a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
+                </p>
-                            Villa di Damecuta
+                <p class="p-2 mt-2 mb-2">
-                        <a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
+                    Il contributo del CNR ha riguardato il censimento del noto, la raccolta e lo studio della cartografia storica, le attività di rilevamento archeologico dei siti di estensione maggiore scarsamente studiati e rappresentati, la schedatura e analisi delle murature e delle tecniche costruttive, ipotesi di ricostruzione e delle funzioni degli spazi, nonché la costruzione del sistema Web GIS.
-                            Grotta di Matermania
+                </p>
-                        </a>
+                <p class="p-2 mt-2 mb-2">
-                        <a class="button" id="arsenale">
+                    L’Associazione Culturale Apragopolis ha condotto attività di digitalizzazione e analisi della documentazione d’archivio storico e corrente (documenti amministrativi, documentazione di scavo, disegni storici, planimetrie e fotografie), unitamente a ricognizioni sul campo con il coinvolgimento di esperti per l’avvio dei rilievi subacquei e per la realizzazione di ricostruzioni virtuali.
-                            Grotta dell'Arsenale
+                </p>
-                        </a>
+            </section>
-                        <a class="button" id="tiberio">
+            <footer class="modal-card-foot">
-                            Bagni di Tiberio
+            </footer>
-                        </a>
-                        <a class="button" id="mura">
-                            Mura greche
-                        </a>
-                        <a class="button" id="san_michele">
-                            Villa San Michele
-                        </a>
-                    </li>
-                </ul>
-            </aside>
-        </div>
-        <div class="column is-full">
-            <div id="map"></div>
             </div>
         </div>
-    <div class="modal">
+        <div class="modal" data-modal-target="modal" data-id="webgis">
-        <div class="modal-background"></div>
+            <div class="modal-background" data-action="click->modal#homeClose" data-id="webgis"></div>
-        <div class="modal-content has-background-white">
+            <div class="modal-card">
+            <header class="modal-card-head">
+                <h3 class="modal-card-title has-text-centered">Il WebGIS</h3> 
+                <button class="delete" aria-label="close" data-action="modal#homeClose" data-id="webgis"></button>
+            </header>
+            <section class="modal-card-body">
+                <p class="has-text-centered">
+                    <a href="webgis/" class="button mt-3 mb-6 is-link is-large has-text-white">Accedi al WebGIS</a>
+                </p>
+                <p>
+                    Il WebGIS è una tipologia di mappa georeferenziata interattiva presentata 
+                    tramite il Web, quindi fruibile attraverso un qualsiasi browser moderno.
+                </p>
+                <p>
+                    Il WebGIS relativo alla Carta Archeologica dell'Isola di Capri è stato realizzato
+                    utilizzando esclusivamente tecnologie open-source, principalmente la libreria JavaScript
+                    <a href="https://leafletjs.com">Leaflet</a> per il rendering della mappa con
+                    i layer (livelli) georeferenziati contenenti i punti geografici e le strutture rilevate
+                    dal progetto, e il framework PHP <a href="https://symfony.com">Symfony</a> per lo
+                    sviluppo della API (lato server) che interagisce con il database per recuperare le informazioni
+                    e i dati relativi ai punti da visualizzare sulla mappa.
+                </p>
+                <p>
+                    Il database stesso è stato costruito con il sistema <a href="https://www.postgresql.org/">PostgreSQL</a>, il quale - attraverso l'estensione
+                    <a href="https://postgis.net/">PostGIS</a> - permette di rappresentare dati geografici e geometrici e fornisce un insieme di
+                    funzionalità integrate per l'interazione e le operazioni con i dati geometrici, rendendolo quindi
+                    particolarmente utile per applicazioni <abbr title="Geography Information Systems">GIS</abbr>.
+                </p>
+            </section>
+            <footer class="modal-card-foot">
+            </footer>
         </div>
-        <button class="modal-close is-large" aria-label="close"></button>
         </div>
+        <div class="modal" data-modal-target="modal" data-id="cartografia">
+            <div class="modal-background" data-action="click->modal#homeClose" data-id="cartografia"></div>
+            <div class="modal-card">
+            <header class="modal-card-head">
+                <h3 class="modal-card-title has-text-centered">Cartografia storica</h3> 
+                <button class="delete" aria-label="close" data-action="modal#homeClose" data-id="cartografia"></button>
+            </header>
+            <section class="modal-card-body">
+                <p class="p-2 mt-2 mb-2">
+                    La raccolta della cartografia dedicata al patrimonio archeologico dell'isola di Capri evidenzia
+                    i principali contributi, al più recente al più antico, prodotti dal XV secolo fino agli anni Trenta del XX secolo.
+                </p>
+                <h4 class="has-text-weight-bold">Anni '30 del Novecento</h4>
+                <p class="p-2 mt-2 mb-1">
+                    Paolino Mingazzini (1931) pubblica un foglio dell'Edizione archeologica della carta d’Italia (1:100.000), sintetico e compilativo (49 schede per altrettanti punti di interesse archeologico) ma poco chiaro per uso pratico, visto il grande denominatore di scala impiegato.
+                </p>
+                <p class="p-2 mt-1 mb-2">
+                    Immanuel Friedlaender (1938) elabora una carta (1:12.000) più dettagliata, con oltre 100 punti di interesse archeologico,
+                    identificandoli mediante numeri ed estendendo la segnalazione ai “ruderi” di tutte le età (1-9: <em>antichità preistoriche</em>;
+                    11-72: <em>antichità grecoromane</em>; 73-100: <em>opere medioevali e successive</em>), sulla base di un modernissimo approccio anticlassicistico,
+                    inserendo anche segnalazioni naturalistiche.
+                </p>
+                <h4 class="has-text-weight-bold">Inizi del XX secolo</h4>
+                <p class="p-2 mt-2 mb-1">
+                    La carta Richter & Co. (1901), anche se non si tratta di una carta archeologica, è un ottimo strumento di consultazione e di orientamento
+                    topografico in generale, vista la scala di rappresentazione (1:10.000), che consente un'individuazione puntuale del costruito e delle strade, con l'abbondanza dei microtoponimi.
+                </p>
+                <p class="p-2 mt-1 mb-2">
+                    Julius Beloch (fine XIX sec.) pubblica una carta dove registra soltanto
+                    i resti più importanti dell'isola, ovvero le duodecim villae tiberiane di <em>tacitiana memoria</em>, riducendo l'ambito archeologico.
+                </p>
+                <h4 class="has-text-weight-bold">XIX secolo</h4>
+                <p class="p-2 mt-2 mb-1">
+                    Rosario Mangoni, nel primo Ottocento, pubblica un’opera corredata da una carta topografica dell'isola,
+                    che in realtà riproduce quasi esattamente il Foglio 14 della <em>Carta topografica ed idrografica dei contorni di Napoli
+                    levata per ordine di S. M. Ferdinando I, Re del Regno delle Due Sicilie, dagli uffiziali dello Stato Maggiore e
+                    dagl'ingegneri topografi negli anni 1817, 1818, 1819</em>, disegnata ed incisa all'acquaforte nel Reale Officio Topografico
+                    di Napoli (scala dettagliata 1:10.000 e 1:5.000). Questa carta straordinaria, composta da 15 fogli  e continuamente
+                    aggiornata fino al 1860, è considerata una delle migliori realizzazioni europee in campo cartografico, che si distingue per la bellezza della resa grafica e soprattutto per il dettaglio.
+                </p>
+                <p class="p-2 mt-1 mb-2">
+                    Tra le imprese cartografiche del Reale Officio Topografico di Napoli, vanno segnalati anche l'<em>Atlante marittimo delle due
+                    Sicilie</em> (1792), in 23 fogli più il frontespizio e l'indice, la <em>Carta del littorale di Napoli</em> (1793) e l'<em>Atlante geografico
+                    del Regno di Napoli</em>, in 31 fogli, terminato nel 1812 ( scale 1:90.000 e 1:115.000), affidati a Antonio Rizzi Zannoni,
+                    che produce mappe topografiche avanzate ma non archeologiche.
+                </p>
+                <h4 class="has-text-weight-bold">XVII-XVIII secolo</h4>
+                <p class="p-2 mt-2 mb-1">
+                    Vincenzo Coronelli pubblica sul finire del XVII l'<em>Isolario dell'Atlante Veneto</em>, la monumentale raccolta di carte e
+                    vedute di isole, dove è rappresentata anche Capri mediante una veduta da nord, corredata da una descrizione sintetica.
+                </p>
+                <p class="p-2 mt-1 mb-2">
+                    Le pergamene aragonesi (XV-XVI sec.) stupiscono per precisione e toponomastica, influenzando la successiva
+                    produzione cartografica.<br>
+                    Documenti rilevanti sono i disegni non cartografici come lo schizzo di Jean-Jacques Bouchard (1632) e quello
+                    di Fabio Giordano (XVI sec.) evidenziano il ruolo delle "anticaglie" e delle rovine imperiali nell'identificazione
+                    storica di Capri.
+                </p>
+                <p class="mt-2 mb-2">
+                    In conclusione, la cartografia ha riflettuto i mutamenti di interessi scientifici e culturali, dall'archeologia
+                    classica a un approccio più sistematico e naturalistico. 
+                </p>
+                <p class="mt-2 mb-2">
+                    Per approfondimenti sull’argomento si veda il contributo di Cecilia Giorgi e Giovanni Caratelli,
+                    <a href="webgis/docs/Verso_una_nuova_carta_archeologica.pdf" title="Scarica PDF">
+                        <em>Verso una nuova carta archeologica per l’isola di Capri. Il contributo del CNR al progetto Masgaba</em>
+                    </a>, in R. Bosso, L. Di Franco, G. Di Martino, S. Foresta, R. Perrella (a cura di),
+                    <em>Archeologie borboniche. La ricerca sull'antico a Capri e nelle province di Napoli e Terra di Lavoro</em>.
+                    Convegno Internazionale di Studi (Capri-Anacapri, 11-12 ottobre 2019), Roma 2020, pp. 21-41
+                </p>
+                <h4 class="mt-4 has-text-centered has-text-weight-bold is-size-4">Gallery</h4>
+                <div class="has-text-centered mt-4">
+					<figure class="is-relative is-clickable has-text-centered" id="gallery">
+                        <img src="img/cartografia/FIG_01_1931_MINGAZZINI.jpg" width="400">
+						<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
+							<i class="is-flex fa fa-2x fa-play-circle"></i>
+						</div>
+                    </figure>
+                </div>
+            </section>
+            <footer class="modal-card-foot">
+            </footer>
+            </div>
+        </div>
+        <div class="modal" data-modal-target="modal" data-id="credits">
+            <div class="modal-background" data-action="click->modal#homeClose" data-id="credits"></div>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <h3 class="modal-card-title has-text-centered">Credits</h3> 
+                    <button class="delete" aria-label="close" data-action="modal#homeClose" data-id="credits"></button>
+                </header>
+                <section class="modal-card-body">
+                    <article class="media">
+                        <figure class="media-left">
+                          <p class="image is-128x128">
+                            <img src="img/logo-soprintendenza-abap-area-metropolitana-napoli-bianco-e1680166536285.webp" />
+                          </p>
+                        </figure>
+                        <div class="media-content">
+                          <div class="content">
+                            <p>
+                              <strong>
+                                <a href="https://sabapmetropolitanana.cultura.gov.it/">
+                                    Soprintendenza Archeologia Belle Arti e Paesaggio per l'Area Metropolitana di Napoli
+                                </a>
+                              </strong>
+                            </p>
+                            <p>
+                              <strong>Direzione scientifica:</strong> Luca Di Franco
+                              <br />
+                              <strong>Studiosi coinvolti:</strong> Rosaria  Perrella,  Giancarlo Di Martino, Ilaria Matarese, Carmen D'Anna, Raffaella Bosso
+                            </p>
+                          </div>
+                        </div>
+                    </article>
+                    <article class="media">
+                        <figure class="media-left">
+                          <p class="image is-128x128">
+                            <img src="img/logo_ispc_compatto.png" />
+                          </p>
+                        </figure>
+                        <div class="media-content">
+                          <div class="content">
+                            <p>
+                              <strong><a href="https://ispc.cnr.it">CNR-ISPC</a></strong>
+                            </p>
+                            <p>
+                               <strong>Responsabile scientifico:</strong> Cecilia Giorgi
+                                <br />
+                                <strong>Ricercatori e tecnici coinvolti:</strong> Giovanni Caratelli, Nicolò Paraciani
+                            </p>
+                            <p>
+                                Rilievo archeologico con analisi delle murature, schedatura e studio delle emergenze indagate,
+                                documentazione grafica archeologica di cartografie, planimetrie, prospetti e sezioni,
+                                modellazione 3D e video, creazione del <a href="webgis/">WebGIS</a> (elaborazione, struttura
+                                logica dei contenuti, architettura e sviluppo software, grafica), ricerche bibliografiche,
+                                raccolta e georeferenziazione dei vincoli archeologici e paesaggistici. 
+                            </p>
+                          </div>
+                        </div>
+                      </article>
+                    <article class="media">
+                        <figure class="media-left">
+                          <p class="image is-128x128">
+                            <img src="img/logo_apragopolis.jpg" />
+                          </p>
+                        </figure>
+                        <div class="media-content">
+                          <div class="content">
+                            <p>
+                              <strong>Associazione Culturale Apragopolis</strong>
+                            </p>
+                            <p>
+                                <strong>Presidente:</strong> Rosaria Perrella
+                            </p>
+                            <p>
+                                Ricerche archivistiche e bibliografiche, schedatura dei siti e rinvenimenti archeologici, incarichi
+                                a professionisti per rilievi subacquei e ricostruzioni virtuali, organizzazione di convegni e curatela
+                                di pubblicazioni inerenti lo studio archeologico dell’isola.
+                            </p>
+                          </div>
+                        </div>
+                    </article>
+                </section>
+                <footer class="modal-card-foot">
+                </footer>
+            </div>
+        </div>
+        <div class="modal" data-modal-target="modal" data-id="pubblicazioni">
+            <div class="modal-background" data-action="click->modal#homeClose" data-id="pubblicazioni"></div>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <h3 class="modal-card-title has-text-centered">Pubblicazioni</h3> 
+                    <button class="delete" aria-label="close" data-action="modal#homeClose" data-id="pubblicazioni"></button>
+                </header>
+                <section class="modal-card-body">
+                    <p class="mt-4 mb-6">
+                        Nell’ambito del progetto per la carta archeologica dell’isola di Capri sono stati organizzati convegni
+                        internazionali sull’isola di Capri mirati a informare la cittadinanza e la comunità scientifica sui risultati
+                        in itinere, comprese le ricerche dei ricercatori del CNR-ISPC, individuando tematiche che hanno coinvolto
+                        le varie ricerche svolte sul territorio nazionale e nell’ambito del Mediterraneo, per incentivare dialoghi
+                        e confronti su argomenti di carattere storico-archeologico:
+                    </p>
+                    <article class="media pb-6">
+                        <figure class="media-left">
+                          <p class="image is-128x128">
+                            <img src="img/pub/1_copertina libro archeologie borboniche.png" />
+                          </p>
+                        </figure>
+                        <div class="media-content">
+                          <div class="content">
+                            <p>
+                                R. Bosso, L. Di Franco, G. Di Martino, S. Foresta, R. Perrella (a cura di),
+                                <em>Archeologie borboniche. La ricerca sull'antico a Capri e nelle province di Napoli e Terra di Lavoro</em>,
+                                Atti del Convegno Internazionale di Studi (Capri-Anacapri, 11-12 ottobre 2019), Roma 2020.
+                            </p>
+                          </div>
+                        </div>
+                    </article>
+                    <article class="media mt-4 pb-6">
+                        <figure class="media-left">
+                          <p class="image is-128x128">
+                            <img src="img/pub/2_copertina libro Le Grotte.png" />
+                          </p>
+                        </figure>
+                        <div class="media-content">
+                          <div class="content">
+                            <p>
+                                L. Di Franco, R. Perrella (a cura di),
+                                <em>Le Grotte tra Preistoria, età classica e Medioevo: Capri, la Campania, il Mediterraneo</em>,
+                                Atti del Convegno Internazionale di Studi (Capri-Anacapri, 7-9 ottobre 2021), Roma 2022
+                            </p>
+                          </div>
+                        </div>
+                    </article>
+
+                    <p class="mt-4 mb-6">
+                        Sono stati inoltre editi volumi di approfondimento sull’archeologia dell’isola di Capri e del Golfo di Napoli:
+                    </p>
+
+                    <article class="media mt-4 pb-6">
+                        <figure class="media-left">
+                          <p class="image is-128x128">
+                            <img src="img/pub/3_copertina libro Il Collezionismo.png" />
+                          </p>
+                        </figure>
+                        <div class="media-content">
+                          <div class="content">
+                            <p>
+                                L. Di Franco, G. Di Martino (a cura di), “Il collezionismo di antichità classiche a Capri tra Ottocento e primo Novecento”, Roma 2018 
+                            </p>
+                          </div>
+                        </div>
+                    </article>
+                    <article class="media mt-4 pb-6">
+                        <figure class="media-left">
+                          <p class="image is-128x128">
+                            <img src="img/pub/4_copertina la ricereca archeologica.png" />
+                          </p>
+                        </figure>
+                        <div class="media-content">
+                          <div class="content">
+                            <p>
+                                L. Di Franco (a cura di), “La ricerca archeologica a Capri in età borbonica: siti, personaggi, documenti”, Roma 2021
+                            </p>
+                          </div>
+                        </div>
+                    </article>
+                    <article class="media mt-4 pb-6">
+                        <figure class="media-left">
+                          <p class="image is-128x128">
+                            <img src="img/pub/5_copertina Maiuri.png" />
+                          </p>
+                        </figure>
+                        <div class="media-content">
+                          <div class="content">
+                            <p>
+                                L. Di Franco, R. Perrella (a cura di), Amedeo Maiuri: l'archeologia e il paesaggio storico del Golfo di Napoli, Atti della Giornata di Studi (Capri, 28 ottobre 2022), Roma 2023
+                            </p>
+                          </div>
+                        </div>
+                    </article>
+
+                    <p class="mt-4">
+                        I convegni e i volumi sono stati curati dai membri dell’Associazione Culturale Apragopolis e sono stati pubblicati con il sostegno della Direzione Generale Educazione, Ricerca e Istituti Culturali, oltre al contributo del Porto Turistico di Capri. 
+                    </p>                    
+                    <p class="mb-6">
+                        Le ricerche del CNR-ISPC sono state presentate in occasione di Convegni Internazionali di Studio, pubblicando i seguenti contributi:
+                    </p>
+
+                    <article class="media mt-4 pb-6">
+                        <figure class="media-left">
+                          <p class="image is-128x128">
+                            <img src="img/pub/6_copertina Metroarcheo.png" />
+                          </p>
+                        </figure>
+                        <div class="media-content">
+                          <div class="content">
+                            <p>
+                                G. Caratelli, C. Giorgi,
+                                <em>A metrological approach to the study of ancient architecture.
+                                The cases of the Grotta dell'Arsenale and the villas of Gradola and Damecuta in Capri</em>
+                                in <em>2023 IMEKO International Conference on Metrology for Archaeology and Cultural Heritage</em>
+                                (Roma 19-21 ottobre 2023) pp. 796-801
+                            </p>
+                          </div>
+                        </div>
+                    </article>
+                    <article class="media mt-4 pb-6">
+                        <figure class="media-left">
+                          <p class="image is-128x128">
+                            <img src="img/pub/7_copertina Akta Imeko.png" />
+                          </p>
+                        </figure>
+                        <div class="media-content">
+                          <div class="content">
+                            <p>
+                                G. Caratelli, C. Giorgi,
+                                <em>
+                                    Laser scanner surveys on the Island of Capri. The contribution of a metrological approach to the understanding of ancient architecture
+                                </em>,
+                                in <em>Acta IMEKO</em>, 13, 2 (2024), pp. 1-9
+                            </p>
+                          </div>
+                        </div>
+                    </article>
+                </section>
+                <footer class="modal-card-foot">
+                </footer>
+            </div>
+        </div>
+        <div class="modal" data-modal-target="modal" data-id="riconoscimenti">
+            <div class="modal-background" data-action="click->modal#homeClose" data-id="riconoscimenti"></div>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <h3 class="modal-card-title has-text-centered">Riconoscimenti</h3> 
+                    <button class="delete" aria-label="close" data-action="modal#homeClose" data-id="riconoscimenti"></button>
+                </header>
+                <section class="modal-card-body">
+                    <p>
+                        Il progetto della carta archeologica dell’isola di Capri è stato realizzato con il contributo dei
+                        Comuni di Capri e Anacapri, i convegni internazionali e i relativi volumi sono stati svolti e pubblicati
+                        con il sostegno della Direzione Generale Educazione, Ricerca e Istituti Culturali e del Porto Turistico di Capri.
+                    </p>
+                    <p class="has-text-centered mt-5">
+                        <img src="img/logo_anacapri.svg">
+                    </p>
+                    <p class="has-text-centered mt-5">
+                        <img src="img/logo_comune_capri.png">
+                    </p>
+                    <p class="has-text-centered mt-5">
+                        <img src="img/logo direzione generale ricerca.png">
+                    </p>
+                    <p class="has-text-centered mt-5">
+                        <img src="img/logo porto turistico.png">
+                    </p>
+                </section>
+                <footer class="modal-card-foot">
+                </footer>
+            </div>
+        </div>
+    </div>
+    <footer class="footer has-text-centered">
+        <p>&copy; <span id="c-year"></span> CNR-ISPC Tutti i diritti riservati</p>
+    </footer>
+    <script type="text/javascript" defer>
+        const year = new Date().getFullYear();
+        document.getElementById('c-year').innerText = year;
+    </script>
+    <script type="module">
+        import { Application } from '@hotwired/stimulus';
+        import ModalController from './webgis/js/controllers/modal_controller.js';
+        import Spotlight from './webgis/js/vendor/spotlight.js/src/js/spotlight.js';
+
+        window.Stimulus = Application.start();
+        Stimulus.register("modal", ModalController);
+
+        let gallery = document.querySelector('#gallery');
+
+        if (gallery) {
+            let images = [
+                {src: './img/cartografia/FIG_01_1931_MINGAZZINI.jpg'},
+                {src: './img/cartografia/FIG_02_1938_FRIEDLAENDER.jpg'},
+                {src: './img/cartografia/FIG_03_1901_GIANNOTTI.jpg'},
+                {src: './img/cartografia/FIG_04_1890_BELOCH.jpg'},
+                {src: './img/cartografia/FIG_07_1793_CARTA_LITTORALE.jpg'},
+                {src: './img/cartografia/FIG_08_1793_CARTA_LITTORALE_PARTICOLARE.jpg'},
+                {src: './img/cartografia/FIG_09_1794_HADRAWA_TAV_01.jpg'},
+                {src: './img/cartografia/FIG_10_1696_CORONELLI.jpg'},
+                {src: './img/cartografia/FIG_11_MAPPE_ARAGONESI.jpg'},
+                {src: './img/cartografia/FIG_12_1620_MAGINI.jpg'},
+                {src: './img/cartografia/FIG_13_BOUCHARD.jpg'},
+                {src: './img/cartografia/FIG_14_FABIO_GIORDANO.jpg'},
+            ];
+            gallery.addEventListener('click', () => {
+                Spotlight.show(images);
+            });
+        }
+    </script>
 </body>
 </html>

js/gis.js

@@ -1,315 +0,0 @@
-'use strict';
-
-import UI from "./ui.js";
-
-const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
-
-// Global leaflet
-/**
- * @namespace GIS
- */
-const GIS = {};
-
-GIS.CENTER_COORDS = [40.5492, 14.2317];
-GIS.INIT_ZOOM = 15;
-const optionsVincoli = {
-    color: '#222',
-    opacity: 0.8,
-    weight: 1,
-    fillColor: '#fa7861',
-    fillOpacity: 0.8
-};
-const optionsSiti = {
-    color: '#800040',
-    opacity: 1,
-    weight: 2.5,
-    fillColor: '#800040',
-    fillOpacity: 0.8
-};
-const optionsPaesistici = {
-    color: '#222',
-    opacity: 1,
-    weight: 1.5,
-    fillColor: '#88d28d',
-    fillOpacity: 0.8
-};
-const optionsFabbricati = {
-    color: '#222',
-    opacity: 1,
-    weight: 1.5,
-    fillColor: '#ff8000',
-    fillOpacity: 0.8
-};
-
-const BASE_URL = location.href;
-const API_URL = 'http://localhost:3002/gis';
-/**
- * Capitalize a text string
- * @todo Move to utils
- * @param {?string} text 
- * @returns {?string} The capitalized string or null
- */
-function capitalize(text) {
-    let capital = text;
-    if (text) {
-        let words = text.split(' ');
-        capital = '';
-
-        for (let w of words) {
-            w = w[0].toUpperCase() + w.slice(1);
-            capital += w + ' ';
-        }
-        capital.trimEnd();
-    }
-
-    return capital;
-}
-/**
- * @param {string} mapId
- * @param {number} zoomLevel
- * @returns {{map: Map, sites: Layer}}
- */
-GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
-    L.LayerGroup.include({
-        customGetLayer : function (id) {
-            for (let l in this._layers) {
-                if (this._layers[l].id === id) {
-                    return this._layers[l];
-                }
-            }
-        }
-    });
-    
-    let map = L.map(mapId, {
-        attributionControl: false,
-        minZoom: 2,
-    }).setView(this.CENTER_COORDS, zoomLevel);
-
-    map.crs = L.CRS.EPSG4326;
-
-    const {baseMap, archeo, sitesGroup} = await this.initLayers(map);
-
-    L.control.layers(
-            baseMap,
-            archeo,
-            {collapsed: false}
-        )
-        .addTo(map);
-
-    sitesGroup.eachLayer(async layer => {
-        const fromStorage = localStorage.getItem(layer.id);
-        let data = {};
-        let coords = layer.getBounds().getCenter();
-
-        if (fromStorage !== 'undefined') {
-            try {
-                data = JSON.parse(fromStorage);
-                const lat = data?.lat ?? coords[0];
-                const lon = data?.lon ?? coords[1];
-                coords = [lat, lon];
-            } catch (error) {
-                console.log(error);
-            }
-        } else {
-            data = await GIS._fetchData(layer.id);
-        }
-
-        // TODO: terrible!
-        if (!layer.id.includes('area')) {
-            const marker = L.marker(coords)
-                .addTo(map)
-                .bindTooltip(
-                    Object.keys(archeo).find(k => archeo[k] === layer)
-                        .replace(/\s\(.*$/, '')
-                )
-                .openTooltip();
-            
-            if (typeof data === 'object') {
-                marker.on('click', () => UI.openModal(data));
-            }
-        }
-    });
-
-    // TODO Horrible?
-    return {map: map, sites: sitesGroup};
-}
-/**
- * Adds layers to map and returns an object
- * with {baseMap, archeoLayers, sitesLayerGroup}
- * @param {L.Map} map 
- * @returns {{baseMap: {"OpenStreetMap": L.TileLayer}, archeo: object, sitesGroup: L.LayerGroup}}
- */
-GIS.initLayers = async function(map) {
-    let layerMater = await this.loadLayer('matermania.geojson', optionsSiti, false);
-    let layerMaterArea = await this.loadLayer('matermania_area.geojson', optionsSiti, false);
-    let layerArsenale = await this.loadLayer('arsenale.geojson', optionsSiti, false);
-    let layerArsenaleArea = await this.loadLayer('arsenale_area.geojson', optionsSiti, false);
-    let layerGradola = await this.loadLayer('gradola.geojson', optionsSiti, false);
-    let layerGradolaArea = await this.loadLayer('gradola_area.geojson', optionsSiti, false);
-    let layerMura = await this.loadLayer('mura.geojson', optionsSiti, false);
-    let layerSanMichele = await this.loadLayer('san_michele.geojson', optionsSiti, false);
-    let layerDamecuta = await this.loadLayer('damecuta.geojson', optionsSiti, false);
-    let layerTiberio = await this.loadLayer('tiberio.geojson', optionsSiti, false);
-
-    layerMater.id = 'matermania';
-    layerMaterArea.id = 'matermania_area';
-    layerGradola.id = 'gradola';
-    layerGradolaArea.id = 'gradola_area';
-    layerArsenale.id = 'arsenale';
-    layerArsenaleArea.id = 'arsenale_area';
-    layerMura.id = 'mura';
-    layerSanMichele.id = 'san_michele';
-    layerDamecuta.id = 'damecuta';
-    layerTiberio.id = 'tiberio';
-
-    let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
-    // TODO named parameters??
-    let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici);
-    let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxNativeZoom : 22,
-        maxZoom: 22,
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    });
-    let mapbox = new L.tileLayer(`https://api.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.jpg90?access_token=${MAPBOX_TOKEN}`, {
-        id : 'mapbox.satellite',
-        tileSize : 512,
-        zoomOffset : -1,
-        maxNativeZoom : 22,
-        maxZoom: 22,
-        attribution: '&copy; Mapbox'
-    });
-    let boundaries = await this.loadLayer('confini.geojson', {}, false);
-    let buildings = await this.loadLayer('fabbricati.geojson', optionsFabbricati, false);
-    let baseCatasto = new L.LayerGroup([buildings, boundaries]);
-
-    const sitesGroup = new L.LayerGroup([
-        layerMater,
-        layerMaterArea,
-        layerGradola,
-        layerGradolaArea,
-        layerArsenale,
-        layerArsenaleArea,
-        layerMura,
-        layerSanMichele,
-        layerDamecuta,
-        layerTiberio,
-    ]);
-    const baseGroup = new L.LayerGroup([osmap]);
-    baseGroup.addTo(map);
-    sitesGroup.addTo(map);
-    const baseMap = {
-        "OpenStreetMap" : osmap,
-        "Satellite" : mapbox,
-        "Cartografia catastale" : baseCatasto,
-    };
-    const archeo = {
-        "Villa di Gradola" : layerGradola,
-        "Villa di Damecuta" : layerDamecuta,
-        "Grotta di Matermania" : layerMater,
-        "Grotta dell'Arsenale" : layerArsenale,
-        "Bagni di Tiberio" : layerTiberio,
-        "Mura greche" : layerMura,
-        "Villa San Michele" : layerSanMichele,
-        "Vincoli archeologici" : layerVincoli,
-        "Vincoli paesistici" : layerPaesistici,
-    };
-
-    return {baseMap, archeo, sitesGroup};
-}
-/**
- * @todo Distinguere tipo di geojson per contenuto popup 
- * @param {string} geoJSON 
- * @param {{color, opacity, weight, fillColor, fillOpacity}} options Style options for features
- * @param {boolean} popup Should the features have a popup? 
- */
-GIS.loadLayer = async function (geoJSON, options, popup = true) {
-    const geo = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
-        .then(res => res.json())
-        .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
-    
-    const layerId = geoJSON.replace('.geojson', '');
-    
-    this.cacheDBData(layerId);
-
-    // Show data from feature in popUp?
-    const layer = new L.geoJson(geo, {
-        style: function () {
-            let style = options;
-            return style;
-        },
-        onEachFeature: function (feature, layer) {
-            if (popup) {
-                layer.bindPopup(GIS.featurePopup(geoJSON, feature));
-            }
-            else {
-                layer.on("click", async () => {
-                    const fromStorage = localStorage.getItem(layerId);
-                    let data = {};
-
-                    if (fromStorage !== 'undefined') {
-                        try {
-                            data = JSON.parse(fromStorage);
-                        } catch (error) {
-                            console.log(error);
-                        }
-                    } else {
-                        await GIS._fetchData(layerId);
-                    }
-                    
-                    if (typeof data === 'object') {
-                        UI.openModal(data);
-                    }
-                });
-            }
-        }
-    });
-
-    return layer;
-}
-/**
- * Cache data from DB in local storage
- * for a given layer
- * @param {string} layerId
- */
-GIS.cacheDBData = async function (layerId) {
-    const data = await this._fetchData(layerId);
-    localStorage.setItem(layerId, JSON.stringify(data));
-}
-/**
- * Generate proper content for features popup
- * @todo Hard-coded names!!
- * 
- * @param {string} layerName
- * @param {object} feature
- * @returns {string} The popup's content
- */
-GIS.featurePopup = function (layerName, feature) {
-    const html = `
-        <table class="table is-striped is-size-6 m-2">
-            <tr><th>Oggetto</th><td>${feature.properties.OGGETTO}</td></tr>
-            <tr><th>Anno</th><td>${feature.properties.ANNO}</td></tr>
-            <tr><th>Comune</th><td>${capitalize(feature.properties.COMUNE)}</td></tr>
-            <tr><th>Località</th><td>${capitalize(feature.properties.LOCALITA)}</td></tr>
-            <tr><th>Proprietà</th><td>${capitalize(feature.properties.PROPRIETA)}</td></tr>
-        </table>
-    `;
-    const content = {
-        'vincoli.geojson' : html,
-        'paesistici.geojson' : html,
-    };
-
-    return content[layerName];
-}
-/**
- * Fetch data from API
- * @param {string} recordId
- */
-GIS._fetchData = async function (recordId) {
-    const data = await fetch(`${API_URL}/${recordId}`)
-        .then(res => res.json())
-        .catch(err => console.log('Error fetching data from DB: ' + err));
-
-    return data;
-}
-
-export default GIS;

js/index.js

@@ -1,12 +0,0 @@
-import GIS from './gis.js';
-import UI from './ui.js';
-
-document.addEventListener('DOMContentLoaded', async () => {
-    const init = await GIS.initMap('map');
-    let {map, sites} = init;
-
-    UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
-    UI.toggleMenu('siti');
-    UI.toggleBurger('navbar-burger');
-    UI.sitesMenu('.menu-list', map, sites);
-});

js/ui.js

@@ -1,224 +0,0 @@
-'use strict';
-
-import Spotlight from './vendor/spotlight.js/src/js/spotlight.js';
-
-/**
- * @namespace UI
- */
-const UI = {};
-
-/**
- * Add a Leaflet control to center the map
- * @param {Map} map The Leaflet map object
- * @param {LatLngExpression} centerCoords The coordinates to center the map
- * @param {number} zoom Zoom level
- */
-UI.addCenterMapControl = function (map, centerCoords, zoom) {
-    L.Control.CenterControl = L.Control.extend({
-        options: {
-            position: 'topleft'
-        },
-        onAdd: function (map) {
-            let controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
-            L.DomEvent
-                .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
-                .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
-                .addListener(controlDiv, 'click', function () {
-                    map.setView(centerCoords, zoom, {animate: true});
-                }
-            );
-            let controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
-            controlUI.title = 'Centra la mappa';
-            controlUI.href = '#';
-            controlUI.innerHTML = `
-				<span class="icon is-medium">
-					<i class="fas fa-lg fa-crosshairs"></i>
-				</span>
-			`;
-            return controlDiv;
-        }
-    });
-
-    let centerCtr = new L.Control.CenterControl();
-    map.addControl(centerCtr);
-}
-/**
- * Toggle burger menu for small screens
- * @param {string} burgerClass The CSS class of the burger element
- */
-UI.toggleBurger = function(burgerClass) {
-	const burger = document.querySelector(`.${burgerClass}`);
-	burger.addEventListener('click', () => {
-		burger.classList.toggle('is-active');
-		const menuId = burger.getAttribute('data-target');
-		document.querySelector(`#${menuId}`).classList.toggle('is-active');
-	});
-}
-/**
- * Toggle side menu and rescale map container
- * @param {string} triggerId The ID of the trigger element
- */
-UI.toggleMenu = function (triggerId) {
-	const trigger = document.querySelector(`#${triggerId}`);
-	trigger.addEventListener('click', () => {
-		const menu = document.querySelector('#menu');
-		menu.classList.toggle('is-hidden');
-		menu.classList.toggle('is-2');
-		document.querySelector('#map').parentElement.classList.toggle('is-full');
-	});
-}
-/**
- * Open a modal with DB data
- * @todo Refactor! Web components??
- * @param {object} data The data retrieved from the DB to display as modal content
- */
-UI.openModal = async function (data) {
-	const modal = document.querySelector('.modal');
-	// DEBUG
-	let content = `<div class="container has-bottom-border">
-		<details>
-		<summary class="is-clickable has-text-centered p-2 is-size-5">
-			Scheda del sito
-		</summary>
-		<table class="table is-fullwidth is-striped">
-			<tr><th>Denominazione</th><td>${data.denominazione}</td></tr>
-			<tr><th>Località</th><td>${data.localita}</td></tr>
-			<tr><th>Indirizzo</th><td>${data.indirizzo}</td></tr>
-			<tr><th>Comune</th><td>${data.comune}</td></tr>
-			<tr><th>Localizzazione</th><td>${data.localizzazione}</td></tr>
-			<tr><th>Definizione</th><td>${data.definizione}</td></tr>
-			<tr><th>Periodo</th><td>${data.periodo}</td></tr>
-			<tr><th>Fase</th><td>${data.fase}</td></tr>
-			<tr><th>Cronologia</th><td>${data.cronologia}</td></tr>
-			<tr><th>Motivazione cronologia</th><td>${data.motivazione_cron}</td></tr>
-			<tr><th>Ritrovamento</th><td>${data.ritrovamento}</td></tr>
-			<tr><th>Materiali rinvenuti</th><td>${data.materiali_rinv}</td></tr>
-			<tr><th>Luogo custodia materiali</th><td>${data.luogo_custodia_mat}</td></tr>
-			<tr><th>Tutela vigente</th><td>${data.tutela_vigente}</td></tr>
-			<tr><th>Stato di conservazione</th><td>${data.stato_conserv}</td></tr>
-			<tr><th>Documenti</th><td>${data.documenti}</td></tr>
-			<tr><th>Descrizione</th><td><details><summary class="is-clickable">Leggi tutto</summary>${data.descrizione}</details></td></tr>
-		</table>
-		</details>
-	</div>`;
-	if (data.documents.length) {
-		let publications = data.documents.filter(d => d.tipo === 'pubblicazione');
-		let docs = data.documents.filter(d => d.tipo === 'documentazione');
-
-		content += `<div class="has-bottom-border"><details>
-		<summary class="is-clickable has-text-centered p-2 is-size-5">
-			Documentazione di archivio
-		</summary>
-		<div class="p-2">
-		<ol class="ml-2 pl-4">
-		`;
-		for (const doc of docs) {
-			content += `
-				<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
-			`;
-		}
-		content += '</ol></div></details></div>';
-		content += `<div class="has-bottom-border"><details>
-		<summary class="is-clickable has-text-centered p-2 is-size-5">
-			Pubblicazioni del progetto Carta Archeologica
-		</summary>
-		<div class="p-2">
-		<ol class="ml-2 pl-4">
-		`;
-		for (const doc of publications) {
-			content += `
-				<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
-			`;
-		}
-		content += '</ol></div></details></div>';
-	}
-	if (data.surveys.length) {
-		content += `<div class="has-text-centered has-bottom-border">
-			<p class="is-size-5 mt-3">Elaborazioni CNR da rilievi</p>`;
-		content += `
-			<div style="max-width: 70%; margin: 0 auto">
-				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
-				<figure class="is-relative has-text-centered is-clickable" id="gallery-1">
-					<img src="img/${data.surveys[0].filename}" width="300"/>
-					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
-						<i class="is-flex fa fa-2x fa-play-circle"></i>
-					</div>
-					<figcaption class="p-2 has-text-centered">${data.surveys[0].didascalia}</figcaption>
-				</figure>
-			</div>
-		</div>
-		`;
-	}
-	if (data.photos.length) {
-		content += `<div class="content has-text-centered">
-			<p class="is-size-5 mt-3">Fotografie</p>`;
-		content += `
-			<div style="max-width: 70%; margin: 0 auto">
-				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
-				<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
-					<img src="img/${data.photos[0].filename}" width="300"/>
-					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
-						<i class="is-flex fa fa-2x fa-play-circle"></i>
-					</div>
-					<figcaption class="p-2 has-text-centered">${data.photos[0].didascalia}</figcaption>
-				</figure>
-			</div>
-		</div>
-		`;
-	}
-
-	modal.querySelector('.modal-content').innerHTML = content;
-	modal.classList.add('is-active');
-	const closeBtn = modal.querySelector('.modal-close');
-	const modalBg = modal.querySelector('.modal-background');
-	const closeModal = () => modal.classList.remove('is-active');
-	// CLose modal when clicking either on the X button or on the background
-	closeBtn.addEventListener('click', () => closeModal());
-	modalBg.addEventListener('click', () => closeModal());
-
-	this.imageGallery('gallery-1', data.surveys);
-	this.imageGallery('gallery-2', data.photos);
-}
-/**
- * @param {string} menuListSel Menu list selector
- * @param {L.Map} map
- * @param {L.LayerGroup} sites
- */
-UI.sitesMenu = function (menuListSel, map, sites) {
-	// Close menu if arrow button is clicked...
-	this.toggleMenu('close-menu');
-
-	const menu = document.querySelector(menuListSel);
-	menu.addEventListener('click', event => {
-		if (event.target.nodeName === 'A') {
-			// zoom to layer...
-			const layer = sites.customGetLayer(event.target.id);
-			map.setView(
-				layer.getBounds().getCenter(),
-				19,
-				{animate: true, duration: 1, easeLinearity: 0.25}
-			);
-		}
-	});
-}
-/**
- * Open Spotlight gallery
- * @param {string} galleryId The id of the trigger element
- * @param {Array<Object>} images Array of image objects from DB 
- */
-UI.imageGallery = function (galleryId, images) {
-	const element = document.querySelector(`#${galleryId}`);
-
-	if (element) {
-		let gallery = [];
-		for (let img of images) {
-			gallery.push({src: `img/${img.filename}`, description: img.didascalia});
-		}
-
-		document.querySelector(`#${galleryId}`).addEventListener('click', () => {
-			Spotlight.show(gallery);
-		});
-	}
-}
-
-export default UI;

js/yarn.lock

@@ -1,23 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-bulma@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-1.0.1.tgz#e37261d6f8e1a3494c9378803d9958effb2715ce"
-  integrity sha512-+xv/BIAEQakHkR0QVz+s+RjNqfC53Mx9ZYexyaFNFo9wx5i76HXArNdwW7bccyJxa5mgV/T5DcVGqsAB19nBJQ==
-
-fontawesome-free@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.4.tgz#c7c499708dabd59eb5dedf232b590a862e05957b"
-  integrity sha512-7sX6Lbg2oQiClFFFFitJlKg20h3YTBON6rdmq3uGjNwDo8G6EjF2bfj2OjjcCUmf4OvZCgyHaXfW2JseqissLw==
-
-leaflet@^1.9.4:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
-  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
-
-spotlight.js@^0.7.8:
-  version "0.7.8"
-  resolved "https://registry.yarnpkg.com/spotlight.js/-/spotlight.js-0.7.8.tgz#0620371701508222d736e0658e8db3fbe9ddc53b"
-  integrity sha512-zq822gqhjaMHt31oZi4do211NwqBcxZ4u7Xtb+OEsbLrz37dcELhBCoQXFu/0sTiomqD6tm5g6tmqvE7S6h4ng==

webgis/geojson/lopozzo.geojson

@@ -0,0 +1,8 @@
+{
+"type": "FeatureCollection",
+"name": "lopozzo",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": 1, "denominaz": "area residenziale e complesso idraulico in località Lo Pozzo" }, "geometry": { "type": "Point", "coordinates": [ 14.213643789607119, 40.556601906452713 ] } }
+]
+}

webgis/geojson/preistorici.geojson

@@ -0,0 +1,19 @@
+{
+"type": "FeatureCollection",
+"name": "preistorici",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Valletta di Cetrella", "oggetto": "Spargimento di frammenti ceramici" }, "geometry": { "type": "Point", "coordinates": [ 14.229480619506239, 40.549096057236518 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Punta Capocchia", "oggetto": "Spargimento di frammenti ceramici" }, "geometry": { "type": "Point", "coordinates": [ 14.198744713836438, 40.554761782142606 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Punta del Miglio", "oggetto": "Spargimento di frammenti ceramici" }, "geometry": { "type": "Point", "coordinates": [ 14.198699377122848, 40.556721558105025 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Punta Campetiello", "oggetto": "Spargimento di frammenti ceramici e industria litica" }, "geometry": { "type": "Point", "coordinates": [ 14.198565753124916, 40.549317256129129 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Rio Latino-Cala di Mezzo", "oggetto": "Spargimento di frammenti ceramici" }, "geometry": { "type": "Point", "coordinates": [ 14.199252962257196, 40.54739533970816 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Pino", "oggetto": "Spargimento di frammenti ceramici" }, "geometry": { "type": "Point", "coordinates": [ 14.202236833854124, 40.546958367996154 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Grotta del Pisco", "oggetto": "Concentrazione di frammenti ceramici" }, "geometry": { "type": "Point", "coordinates": [ 14.202644864276412, 40.543834209174214 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Punta del Pino", "oggetto": "Concentrazione di frammenti ceramici" }, "geometry": { "type": "Point", "coordinates": [ 14.197557607783281, 40.541821470187763 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Capo Ruglio-Limmo", "oggetto": "Concentrazione di frammenti ceramici" }, "geometry": { "type": "Point", "coordinates": [ 14.199714680892935, 40.538709765491753 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Belvedere della Migliara", "oggetto": "Concentrazione di frammenti ceramici" }, "geometry": { "type": "Point", "coordinates": [ 14.209803292737673, 40.539939232521711 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Punta Carena-Limmo", "oggetto": "Concentrazione di frammenti ceramici" }, "geometry": { "type": "Point", "coordinates": [ 14.199528561752958, 40.536773037148208 ] } },
+{ "type": "Feature", "properties": { "id": null, "denominazione": "Anacapri località Punta dell’Arcera", "oggetto": "Affioramento materiale ceramico" }, "geometry": { "type": "Point", "coordinates": [ 14.200509266452157, 40.558637768309111 ] } }
+]
+}

webgis/geojson/scala_fenicia.geojson

@@ -0,0 +1,8 @@
+{
+"type": "FeatureCollection",
+"name": "scala_fenicia",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": 1, "denominaz": "Scala Fenicia" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.231608798900806, 40.555722778398597 ], [ 14.231459145573947, 40.555718040785727 ], [ 14.230944712262867, 40.555781998531252 ], [ 14.230600197833322, 40.555866091029607 ], [ 14.230227623404993, 40.55593952382911 ], [ 14.229842577866091, 40.556028353720876 ], [ 14.229713190093911, 40.556078098408769 ], [ 14.229619656764624, 40.556091126773303 ], [ 14.229362440109085, 40.556204828756179 ], [ 14.228997660124865, 40.556255757706715 ], [ 14.22892906901672, 40.556258126494171 ], [ 14.228779415689861, 40.556281814364112 ], [ 14.228562730143679, 40.556299580261069 ], [ 14.228363192374532, 40.556336296433159 ], [ 14.228238481268816, 40.556275892397416 ], [ 14.228219774602959, 40.556291289509744 ], [ 14.228238481268816, 40.556367090626487 ], [ 14.22822873821368, 40.556420092137607 ], [ 14.228235363491173, 40.556472797509279 ], [ 14.228226789602651, 40.556529056006312 ], [ 14.228180022938009, 40.556539419408516 ], [ 14.228162485438768, 40.556428382872987 ], [ 14.228130917940133, 40.556485233602181 ], [ 14.228081812942255, 40.556517804310708 ], [ 14.228065834331836, 40.55639966139249 ], [ 14.227878767673262, 40.556640684568357 ], [ 14.227863958229459, 40.556573766672877 ], [ 14.22789162850604, 40.556536458436632 ], [ 14.227854994618735, 40.556488194576332 ], [ 14.227744703234618, 40.556627656310773 ], [ 14.227737298512714, 40.556702568757316 ], [ 14.227706120736284, 40.556714412614703 ], [ 14.227667148515749, 40.556667925462413 ], [ 14.227678450459704, 40.556606041241444 ], [ 14.227592711574525, 40.556639796278134 ], [ 14.227571666575436, 40.556787252291592 ], [ 14.227384210194653, 40.556738988612103 ], [ 14.227303147975938, 40.556648975276417 ], [ 14.227252484089242, 40.556671478621695 ], [ 14.227135177705431, 40.556680361519057 ], [ 14.22693252215864, 40.556765933369981 ], [ 14.22690641077088, 40.556823376004402 ], [ 14.226849901051104, 40.556867494282947 ], [ 14.226776243554289, 40.556909539863625 ], [ 14.22664023050462, 40.556944479128894 ], [ 14.226406786903604, 40.556938557220818 ], [ 14.226324165796068, 40.556970831613512 ], [ 14.226159703025404, 40.557078018017101 ] ] ] } }
+]
+}