wms: layer added to map with control

TODO: refactor bibliography UI logic...

.gitignore

@@ -5,9 +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

@@ -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,7 +147,8 @@ a:visited {
 }
 /* Leaflef map container */
 #map {
-    height: calc(100vh - 107px);
+    /*height: calc(100vh - 107px);*/
+    height: 100%;
 }
 
 #map-progress {
@@ -141,8 +157,33 @@ a:visited {
     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

@@ -3,9 +3,18 @@
 <head>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="css/app.css" />
+    <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
+    <link rel="stylesheet" href="webgis/js/vendor/spotlight.js/dist/css/spotlight.min.css" />
     <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 p-3 has-bottom-border" role="navigation">
         <div class="navbar-brand">
             <a class="navbar-item" href="https://ispc.cnr.it" title="CNR-ISPC">
@@ -23,81 +32,544 @@
         </div>
         <hr class="navbar-divider">
         <div class="navbar-end">
-            <a href="#webgis" class="navbar-item">Il WebGIS</a>
-            <a href="#riconoscimenti" class="navbar-item">Riconoscimenti</a>
-            <a href="#credits" class="navbar-item">Credits</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.jpg" style="min-height: 88px;" />
+                <img class="image" src="img/logo_comune_capri.png" style="min-height: 88px;" />
             </a>
         </div>
     </nav>
     <div class="main content mt-5">
-        <h1 class="mt-6 title has-text-centered">Isola di Capri</h1>
-        <h2 class="subtitle has-text-centered">Carta archeologica</h2>
+        <h1 class="mt-6 title has-text-centered">La Carta Archeologica dell'Isola di Capri</h1>
         <div class="columns">
             <div class="column"></div>
-                <div class="column is-two-thirds is-size-5">
-                <section class="section">
-                    <a id="webgis"></a>
-                    <h3 class="has-text-centered">Il WebGIS</h3> 
-                    <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>
-                    <div class="card mt-6">
-                        <a href="webgis/">
-                            <img class="image" src="img/webgis.webp" />
-                        </a>
-                        <div class="card-content has-text-centered">
-                            <a href="webgis/" class="button is-link is-large has-text-white">Accedi al WebGIS</a>
-                        </div>
-                    </div>
-                </section>
-                <section class="section">
-                    <a id="riconoscimenti"></a>
-                    <h2 class="m-4 has-text-centered">Riconoscimenti</h2> 
-                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et sed quidem atque? Delectus, blanditiis sint. Numquam tempora nemo perferendis ea modi. Pariatur voluptatibus ut consequatur? Sit reprehenderit in accusantium delectus.</p>
-                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et sed quidem atque? Delectus, blanditiis sint. Numquam tempora nemo perferendis ea modi. Pariatur voluptatibus ut consequatur? Sit reprehenderit in accusantium delectus.</p>
-                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et sed quidem atque? Delectus, blanditiis sint. Numquam tempora nemo perferendis ea modi. Pariatur voluptatibus ut consequatur? Sit reprehenderit in accusantium delectus.</p>
-                </section>
-                <section class="section has-text-centered">
-                    <a id="credits"></a>
-                    <h2 class="m-2">Credits</h2> 
-                    <h3 class="is-size-3">CNR ISPC</h3>
-                    <p>Cecilia Giorgi</p>
-                    <p>Giovanni Caratelli</p>
-                    <p>Nicolò Paraciani</p>
-                    <h3 class="is-size-3">Soprintendenza ecc...</h3>
-                    <p>Giancarlo Di Martino</p>
+            <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="column"></div>
         </div>
-       </div>
+        <div class="level is-fullwidth mb-0 has-background-light">
+            <div class="columns mt-5 is-8" style="width: 80vw; margin-left: auto; margin-right: auto">
+                <div class="column card has-text-centered is-one-third"
+                    data-id="progetto" data-action="click->modal#homeOpen">
+                    <div class="card-image">
+                        <img src="img/progetto.jpg" />
+                    </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>
+                <p class="p-2 mt-2 mb-2">
+                    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.
+                </p>
+                <p class="p-2 mt-2 mb-2">
+                    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.
+                </p>
+                <p class="p-2 mt-2 mb-2">
+                    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.
+                </p>
+                <p class="p-2 mt-2 mb-2">
+                    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.
+                </p>
+            </section>
+            <footer class="modal-card-foot">
+            </footer>
+            </div>
+        </div>
+        <div class="modal" data-modal-target="modal" data-id="webgis">
+            <div class="modal-background" data-action="click->modal#homeClose" data-id="webgis"></div>
+            <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>
+        </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>Copyright &copy; <span id="c-year"></span> Progetto Carta Archeologica di Capri</p>
+        <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="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>

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 ] ] ] } }
+]
+}

webgis/index.html

@@ -3,19 +3,40 @@
 <head>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
+    <link rel="stylesheet" href="js/vendor/leaflet.markercluster/dist/MarkerCluster.css" />
+    <link rel="stylesheet" href="js/vendor/leaflet.markercluster/dist/MarkerCluster.Default.css" />
     <link rel="stylesheet" href="../css/app.css" />
     <link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
     <link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
-    <script src="js/vendor/leaflet/dist/leaflet.js"></script>
+    <link rel="stylesheet" href="js/vendor/@photo-sphere-viewer/core/index.css" />
+    <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "./js/vendor/three/build/three.module.js",
+            "@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js",
+            "@hotwired/stimulus": "./js/vendor/@hotwired/stimulus/dist/stimulus.js"
+        }
+    }
+    </script>
+    <script src="./js/vendor/proj4/dist/proj4.js"></script>
+    <script src="js/vendor/leaflet/dist/leaflet-src.js"></script>
+    <script src="js/vendor/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
     <script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
     <script src="js/index.js" type="module"></script>
     <title>WebGIS Isola di Capri</title>
 </head>
-<body>
-    <nav class="navbar mb-2" role="navigation">
+<body data-controller="menu"
+    data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu">
+    <nav class="navbar mb-0" role="navigation">
         <div class="navbar-brand">
-            <span class="navbar-item is-size-3">
-                WebGIS Isola di Capri
+            <a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
+                <span class="icon">
+                    <i class="fa fa-home"></i>
+                </span>
+            </a>
+            <span class="navbar-item is-size-5">
+                Carta Archeologica dell'Isola di Capri - WebGIS
             </span>
             <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
                 <span aria-hidden="true"></span>
@@ -25,73 +46,275 @@
             </a>
         </div>
         <hr class="navbar-divider">
-        <div class="navbar-menu ml-3 container is-align-items-center is-justify-content-center" 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> Beni archeologici
+        <div class="navbar-end pb-1 pt-1" id="nav-menu">
+            <button class="navbar-item button is-size-5 is-white mr-3" role="button"
+                data-id="main"
+                data-action="menu#toggleMenu">
+                <span class="icon mr-2">
+                    <i class="fa fa-list"></i>
+                </span>
+                Elenco beni
             </button>
-            <button class="navbar-item is-size-5 is-white" title="Informazioni sul progetto" id="progetto">
-                <i class="fa fa-info-circle mr-2"></i> Progetto
+            <button class="navbar-item button is-size-5 is-white mr-3" role="button"
+                data-id="cartography"
+                data-action="menu#toggleMenu">
+                <span class="icon mr-2">
+                    <i class="fa fa-map"></i>
+                </span>
+                Cartografia
+            </button>
+            <button class="button is-outlined is-rounded is-link mr-4 mt-1" id="howto" title="Istruzioni">
+                <span class="icon is-large has-text-link">
+                    <i class="fas fa-question fa-lg"></i>
+                </span>
             </button>
-        </div>
-        <div class="navbar-end">
         </div>
     </nav>
-    <!-- TODO Loader -->
     <div class="wait-lg text-center is-hidden" style="clear: both;">
         <p>Loading...</p>
         <div class="loading loading-lg"></div>
     </div>
     <div class="main columns">
-        <div class="column is-hidden" id="menu">
-            <aside class="menu ml-4">
-                <p class="menu-label">
-                    Beni archeologici
-                <button title="Chiudi menu" class="button is-small is-pulled-right" id="close-menu">
-                    <span class="icon is-small">
-                      <i class="fa fa-chevron-left"></i>
-                    </span>
-                </button>
-                </p>
-                <ul class="menu-list">
+        <div class="column mb-0 pb-0 is-full is-relative">
+            <div class="pb-0 is-relative" id="map" aria-describedby="map-progress" aria-busy="true">
+                <progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
+            </div>
+        </div>
+        <div class="menu-overlay column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter"
+            data-menu-target="menu" data-controller="layer">
+            <!-- Template to build menu items dynamically -->
+            <template id="menu-item-template">
                     <li>
-                        <a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
-                            Villa di Gradola
+                    <a class="is-block button"
+                    data-controller="marker"
+                    data-action="marker#go"
+                    data-marker-coords-value=""
+                    data-marker-group-value="">
+                    </a>
+                </li>
+            </template>
+            <aside class="menu ml-4 mt-3">
+                <button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#close"></button>
+                <p class="menu-label is-size-5 mt-2 is-clickable" data-id="sites">
+                     <span role="button" class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="sites" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
+                        <img class="image" src="img/icons/siti_menu.png"/>
+                    </span>
+                    <span role="button" data-action="click->menu#toggle" data-id="sites">
+                        Beni archeologici
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="sites"></i>
+                        </span>
+                    </span>
+                </p>
+                <ul class="menu-list is-hidden" id="sites-list" data-menu-target="list" data-controller="marker">
+                    <li data-list-id="sites-anacapri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="sites-anacapri-sub">
+                            Anacapri
+                            <span class="icon ml-2">
+                                <i class="fa fa-chevron-right" data-menu-target="icon"></i>
+                            </span>
+                        </span>
+                    </li>
+                    <li class="mt-3" data-list-id="sites-capri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="sites-capri-sub">
+                            Capri
+                            <span class="icon ml-2">
+                                <i class="fa fa-chevron-right" data-menu-target="icon"></i>
+                            </span>
+                        </span>
+                    </li>
+                </ul>
+                <p class="menu-label is-size-5 is-clickable" data-id="notConserved">
+                     <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="notConserved"
+                        data-action="click->layer#toggle" style="max-height: 10px">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
+                        <img class="image" src="img/icons/non_cons_menu.png"/>
+                    </span>
+                    <span role="button" data-action="click->menu#toggle" data-id="notConserved">
+                        Beni non conservati
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="notConserved"></i>
+                        </span>
+                    </span>
+                </p>
+                <ul class="menu-list is-hidden" id="notConserved-list" data-menu-target="list" data-controller="marker">
+                    <li data-list-id="notConserved-anacapri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="notConserved-anacapri-sub">
+                            Anacapri
+                            <span class="icon ml-2 is-small" data-list-id="notConserved-anacapri-sub">
+                                <i class="fa fa-chevron-right"></i>
+                            </span>
+                        </span>
+                    </li>
+                    <li class="mt-3" data-list-id="notConserved-capri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="notConserved-capri-sub">
+                            Capri
+                            <span class="icon ml-2 is-small" data-list-id="notConserved-capri-sub">
+                                <i class="fa fa-chevron-right"></i>
+                            </span>
+                        </span>
+                    </li>
+                </ul>
+                <p class="menu-label is-size-5 is-clickable" data-id="findings">
+                     <span class="icon pl-1 mr-2 is-small" data-layer-target="findings" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
+                        <img class="image" src="img/icons/rinv_menu.png"/>
+                    </span>
+                    <span role="button" data-action="click->menu#toggle" data-id="findings">
+                        Reperti
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="findings"></i>
+                        </span>
+                    </span>
+                </p>
+                <ul class="menu-list is-hidden" id="findings-list" data-menu-target="list" data-controller="marker">
+                    <li data-list-id="findings-anacapri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="findings-anacapri-sub">
+                            Anacapri
+                            <span class="icon ml-2">
+                                <i class="fa fa-chevron-right" data-menu-target="icon"></i>
+                            </span>
+                        </span>
+                    </li>
+                    <li class="mt-3" data-list-id="findings-capri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="findings-capri-sub">
+                            Capri
+                            <span class="icon ml-2">
+                                <i class="fa fa-chevron-right" data-menu-target="icon"></i>
+                            </span>
+                        </span>
+                    </li>
+                </ul>
+                <p class="menu-label is-size-5 is-clickable" data-id="prehistoric">
+                     <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="prehistoric" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
+                        <img class="image" src="img/icons/preistorici.png"/>
+                    </span>
+                    <span role="button" data-action="click->menu#toggle" data-id="prehistoric">
+                        Aree di affioramento
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="prehistoric"></i>
+                        </span>
+                    </span>
+                </p>
+                <ul class="menu-list is-hidden" id="prehistoric-list" data-menu-target="list" data-controller="marker">
+                    <li data-list-id="prehistoric-anacapri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="prehistoric-anacapri-sub">
+                            Anacapri
+                            <span class="icon ml-2 is-small" data-list-id="prehistoric-anacapri-sub">
+                                <i class="fa fa-chevron-right"></i>
+                            </span>
+                        </span>
+                    </li>
+                    <li class="mt-3" data-list-id="prehistoric-capri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="prehistoric-capri-sub">
+                            Capri
+                            <span class="icon ml-2 is-small" data-list-id="prehistoric-capri-sub">
+                                <i class="fa fa-chevron-right"></i>
+                            </span>
+                        </span>
+                    </li>
+                </ul>
+                <p class="menu-label is-size-5 is-clickable" data-id="underwater">
+                     <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="underwater" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
+                        <img class="image" src="img/icons/subacquei_menu.png"/>
+                    </span>
+                    <span role="button" data-action="click->menu#toggle" data-id="underwater">
+                        Giacimenti subacquei
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="underwater"></i>
+                        </span>
+                    </span>
+                </p>
+                <ul class="menu-list is-hidden" id="underwater-list" data-menu-target="list" data-controller="marker">
+                    <li>
+                        <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5511022 14.1910274">
+                            Bocca Grande - relitto con carico
                         </a>
-                        <a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
-                            Villa di Damecuta
+                    </li>
+                    <li>
+                        <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5870549 14.2887986">
+                            Bocca Piccola - relitto con carico
                         </a>
-                        <a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
-                            Grotta di Matermania
+                    </li>
+                    <li>
+                        <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5579004 14.2363139">
+                            Marina Grande - strutture portuali
                         </a>
-                        <a class="button" id="arsenale">
-                            Grotta dell'Arsenale
+                    </li>
+                    <li>
+                        <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.54468634 14.23392751">
+                            Marina Piccola, Scoglio delle Sirene - strutture portuali, approdo
                         </a>
-                        <a class="button" id="tiberio">
-                            Bagni di Tiberio
-                        </a>
-                        <a class="button" id="mura">
-                            Mura greche
-                        </a>
-                        <a class="button" id="san_michele">
-                            Villa San Michele
+                    </li>
+                    <li>
+                        <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5649884 14.1940185">
+                            Punta dell’Arcera - relitto con carico
                         </a>
                     </li>
                 </ul>
             </aside>
         </div>
-        <div class="column is-full">
-            <div id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;">
-                <progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
-            </div>
+        <div class="menu-overlay column is-hidden is-3 is-3-desktop is-4-mobile is-pulled-right is-overlay has-background-white-ter"
+            data-menu-target="cartography">
+            <!-- Template to build menu items dynamically -->
+            <template id="cartography-item-template">
+                <li>
+                    <label class="checkbox">
+                        <input type="checkbox"
+                            data-controller="layer"
+                            data-action="layer#toggleCartography"
+                            data-layer-id-value=""
+                            data-layer-type-value=""
+                        />
+                    </label>
+                </li>
+            </template>
+            <aside class="menu ml-4 mt-3" data-id="cartography-aside">
+                <button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#closeCartography"></button>
+                <ul class="menu-list">
+                    <li>
+                        <input type="checkbox" data-controller="layer" data-action="layer#toggleCadastral" />
+                        Catasto Agenzia delle Entrate (particelle e fabbricati)
+                    </li>
+                </ul>
+                <p class="menu-label is-size-5 mt-4 is-clickable" data-id="historic">
+                    <span role="button" data-action="click->menu#toggle" data-id="historic">
+                        Catasto storico
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="historic"></i>
+                        </span>
+                    </span>
+                </p>
+            </aside>
         </div>
     </div>
+    <!-- Bibliography citations template -->
+    <template id="biblio-item-template">
+        <span class="is-clickable has-text-link"
+            data-action="click->biblio#open">
+        </span>
+    </template>
     <!-- Sites data modal -->
-    <div class="modal" id="site-data">
-        <div class="modal-background"></div>
-        <div class="modal-content has-background-white" style="min-height: 95vh;">
+    <div class="modal" id="site-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
+        <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
+        <div class="modal-content has-background-white">
             <div class="tabs is-centered">
                 <ul>
-                    <li class="is-active" id="for-short-sheet">
+                    <li class="is-active" id="for-short-sheet"
+                        data-tabs-target="tab active" data-action="click->tabs#activate">
                         <a>
                           <span class="icon is-small"
                             ><i class="fas fa-info-circle" aria-hidden="true"></i
@@ -99,7 +322,7 @@
                           <span>Scheda sintetica</span>
                         </a>
                     </li>
-                    <li id="for-site-sheet">
+                    <li id="for-site-sheet" data-tabs-target="tab" data-action="click->tabs#activate">
                         <a>
                           <span class="icon is-small"
                             ><i class="fas fa-info-circle" aria-hidden="true"></i
@@ -107,7 +330,7 @@
                           <span>Scheda dettagliata</span>
                         </a>
                     </li>
-                    <li id="for-photos">
+                    <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
                       <a>
                         <span class="icon is-small"
                           ><i class="fas fa-image" aria-hidden="true"></i
@@ -115,7 +338,7 @@
                         <span>Disegni e fotografie</span>
                       </a>
                     </li>
-                    <li id="for-documents">
+                    <li id="for-documents" data-tabs-target="tab" data-action="click->tabs#activate">
                       <a>
                         <span class="icon is-small"
                           ><i class="far fa-file-alt" aria-hidden="true"></i
@@ -125,52 +348,124 @@
                     </li>
                 </ul>
             </div>
-            <div class="data-tabs" id="short-sheet"></div>
-            <div class="data-tabs is-hidden" id="site-sheet"></div>
-            <div class="data-tabs is-hidden" id="photos"></div>
-            <div class="data-tabs is-hidden" id="documents"></div>
+            <div class="data-tabs" id="short-sheet" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="site-sheet" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="documents" data-tabs-target="content"></div>
         </div>
-        <button class="modal-close is-large" aria-label="close"></button>
+        <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
     </div>
     <!-- Not conserved modal -->
-    <div class="modal" id="not-conser-data">
+    <div class="modal" id="not-conser-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
+        <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
+        <div class="modal-content has-background-white">
+            <div class="tabs is-centered">
+                <ul>
+                    <li class="is-active" id="for-not-conserved-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
+                        <a>
+                          <span class="icon is-small"
+                            ><i class="fas fa-info-circle" aria-hidden="true"></i
+                          ></span>
+                          <span>Scheda</span>
+                        </a>
+                    </li>
+                    <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
+                      <a>
+                        <span class="icon is-small"
+                          ><i class="fas fa-image" aria-hidden="true"></i
+                        ></span>
+                        <span>Immagini</span>
+                      </a>
+                    </li>
+                    <li id="for-documents" data-tabs-target="tab" data-action="click->tabs#activate">
+                      <a>
+                        <span class="icon is-small"
+                          ><i class="fas fa-book" aria-hidden="true"></i
+                        ></span>
+                        <span>Documenti</span>
+                      </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="data-tabs" id="not-conserved-sheet" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="documents" data-tabs-target="content"></div>
+        </div>
+        <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
+    </div>
+    <!-- Finding modal -->
+    <div class="modal" id="finding-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
+        <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
+        <div class="modal-content has-background-white">
+            <div class="tabs is-centered">
+                <ul>
+                    <li class="is-active" id="for-finding-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
+                        <a>
+                          <span class="icon is-small"
+                            ><i class="fas fa-info-circle" aria-hidden="true"></i
+                          ></span>
+                          <span>Scheda</span>
+                        </a>
+                    </li>
+                    <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
+                      <a>
+                        <span class="icon is-small"
+                          ><i class="fas fa-image" aria-hidden="true"></i
+                        ></span>
+                        <span>Immagini</span>
+                      </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="data-tabs" id="finding-sheet" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
+        </div>
+        <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
+    </div>
+    <!-- Prehistoric modal -->
+    <div class="modal" id="prehist-data" data-controller="modal biblio marker tabs" data-modal-target="modal">
+        <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
+        <div class="modal-content has-background-white">
+            <div class="tabs is-centered">
+                <ul>
+                    <li class="is-active" id="for-prehist-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
+                        <a>
+                          <span class="icon is-small"
+                            ><i class="fas fa-info-circle" aria-hidden="true"></i
+                          ></span>
+                          <span>Scheda</span>
+                        </a>
+                    </li>
+                    <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
+                      <a>
+                        <span class="icon is-small"
+                          ><i class="fas fa-image" aria-hidden="true"></i
+                        ></span>
+                        <span>Immagini</span>
+                      </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="data-tabs" id="prehist-sheet" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
+        </div>
+        <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
+    </div>
+    <!-- Underwater modal -->
+    <div class="modal" id="underwater-data" data-controller="modal biblio marker" data-modal-target="modal">
+        <div class="modal-background" data-action="click->modal#close"></div>
+        <div class="modal-content has-background-white">
+            <div id="underwater-sheet"></div>
+        </div>
+        <button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
+    </div>
+    <!-- Spherical photo modal -->
+    <div class="modal" id="spherical-modal">
         <div class="modal-background"></div>
-        <div class="modal-content has-background-white" style="min-height: 95vh;">
-            <div id="not-conser-sheet"></div>
+        <div class="modal-content has-background-white">
+            <div id="pano-viewer"></div>
         </div>
         <button class="modal-close is-large" aria-label="close"></button>
     </div>
-    <!-- Project info modal -->
-    <div class="modal" id="project-info">
-        <div class="modal-background"></div>
-        <div class="modal-card content has-background-white panel" style="width: 70vw;">
-            <header class="modal-card-head p-5">
-                <h1 class="modal-card-title has-text-centered mb-0"><i class="fa fa-info-circle mr-2"></i> Il progetto</h1>
-                <button class="delete" aria-label="close"></button>
-            </header>
-            <section class="modal-card-body is-size-5">
-                <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>
-                <p class="p-2 mt-2 mb-2">
-                    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.
-                </p>
-                <p class="p-2 mt-2 mb-2">
-                    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.
-                </p>
-                <p class="p-2 mt-2 mb-2">
-                    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.
-                </p>
-                <p class="p-2 mt-2 mb-2">
-                    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.
-                </p>
-            </section>
-            <footer class="modal-card-foot">
-                <div class="buttons">
-                    <button class="button">Chiudi</button>
-                </div>
-            </footer>
-        </div>
-    </div>
 </body>
 </html>

webgis/js/components/Finding.js

@@ -0,0 +1,123 @@
+import { GisState } from "../state.js";
+/**
+ * @class Finding
+ */
+export class Finding {
+    biblioElements = [];
+    images = null;
+    
+    set data(data) {
+        this._data = data;
+    }
+
+    async render() {
+        return `
+        <div class="container px-4 pt-4">
+            <p class="p-2">
+                <strong>Oggetto:</strong> ${this._data.object}
+            </p>
+            <p class="p-2">
+                <strong>Materia:</strong> ${this._data.material}
+            </p>
+            <p class="p-2">
+                <strong>Misure:</strong> ${this._data.measurements}
+            </p>
+            <p class="p-2">
+                <strong>Luogo e anno rinvenimento:</strong> ${this._data.place}. ${this._data.year}
+            </p>
+            <p class="p-2">
+                <strong>Datazione:</strong> ${this._data.dating}
+            </p>
+            <p class="p-2">
+                <strong>Stato di conservazione:</strong> ${this._data.conservationState}
+            </p>
+            <p class="p-2">
+                <strong>Luogo di conservazione:</strong> ${this._data.conservationPlace}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione</strong></br>
+                ${this._data.description}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <span class="icon has-text-link">
+                    <i class="fa fa-book"></i>
+                </span>
+                <strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
+            </p>
+            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" data-biblio-target="biblio"></div>
+            <p class="p-2 mb-4">
+                <strong>Autore scheda:</strong> ${this._data.author}
+            </p>
+        </div>`;
+    }
+
+    renderImages() {
+		let content = `<div class="content has-text-centered">
+			<p class="is-size-5 mt-3">Immagini</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="finding-gallery">
+					<img src="img/${this.images[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>
+				</figure>
+			</div>
+		</div>`;
+
+        return content;
+    }
+    /**
+     * @param {HTMLElement} imageContainer
+     * @param {Function} gallery
+     */
+    async setImages(imageContainer, gallery) {
+        let record = await this.fetchData(`${GisState.apiUrl}/finding/${this._data.id}`)
+
+        if (record.images.length) {
+            this.images = record.images;
+            imageContainer.innerHTML = this.renderImages();
+            gallery('finding-gallery', this.images);
+        }
+    }
+    /**
+     * @param {number} recordId 
+     */
+    async biblio(recordId) {
+        let finding = await this.fetchData(`${GisState.apiUrl}/finding/${recordId}`);
+
+        let citations = '';
+
+        if (finding.bibliography.length) {
+            finding.bibliography.forEach(record => {
+                citations += `
+                    <span class="is-clickable has-text-link"
+                        data-action="click->biblio#open"
+                        id="cit-${record.id}">
+                        ${record.citation}</span>`;
+
+                citations += record.pages?.length ? `, ${record.pages};` : ';';
+
+                this.biblioElements.push(`
+                    <div class="p-2 mt-2" id="ref-${record.id}">
+                        <p class="p-3">${record.reference}</p>
+                    </div>
+                `);
+            });
+        }
+
+        return citations.trim().slice(0, -1);
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
+    }
+
+    async fetchData(url) {
+        return await fetch(url).then(res => res.json());
+    }
+}

webgis/js/components/NotConserved.js

@@ -0,0 +1,176 @@
+import { GisState } from "../state.js";
+
+/**
+ * Component to render data for not conserved assets
+ * @class NotConserved
+ */
+export class NotConserved {
+    biblioElements = [];
+    /**
+     * @param {object} data
+     */
+    set data(data) {
+        this._data = data;
+    }
+
+    async render() {
+        return `
+        <div class="container px-4 pt-4">
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-tag"></i>
+                </span>
+                <strong>Denominazione:</strong> ${this._data.denomination}
+            </p>
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-hourglass"></i>
+                </span>
+                <strong>Periodo:</strong> ${this._data.period}
+            </p>
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-map"></i>
+                </span>
+                <strong>Località generica:</strong> ${this._data.genericLocation}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione</strong></br>
+                ${this._data.shortDescription}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <span class="icon has-text-link">
+                    <i class="fa fa-book"></i>
+                </span>
+                <strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
+            </p>
+            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" data-biblio-target="biblio"></div>
+            <p class="p-2 mb-4">
+                <strong>Autore scheda:</strong> ${this._data.author}
+            </p>
+        </div>`;
+    }
+
+    renderImages() {
+		let content = `<div class="content has-text-centered">
+			<p class="is-size-5 mt-3">Immagini</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="not-conserved-gallery">
+					<img src="img/${this.images[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>
+				</figure>
+			</div>
+		</div>`;
+
+        return content;
+    }
+    /**
+     * @param {HTMLElement} imageContainer
+     * @param {Function} gallery
+     */
+    async setImages(imageContainer, gallery) {
+        if (this._data.images.length) {
+            this.images = this._data.images;
+            imageContainer.innerHTML = this.renderImages();
+            gallery('not-conserved-gallery', this.images);
+        } else
+            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
+    }
+
+    async renderDocs() {
+        let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${this._data.id}`);
+
+        this.documentation = record.documents.filter(d => d.type === 'documentazione')
+        this.publications = record.documents.filter(d => d.type === 'pubblicazione');
+
+        let content = `
+            <div class="has-bottom-border">
+                <div class="p-2">
+                    <table class="p-4 table is-fullwidth is-striped">
+                        <thead>
+                            <tr><th colspan=3 class="p-2 has-text-centered is-size-5">Documentazione di archivio</th>
+                            <tr><th>Titolo</th><th>Luogo di conservazione</th><th>Download</th></tr>
+                        </thead>
+                        <tbody>
+            `;
+
+		for (const doc of this.documentation) {
+			content += `
+				<tr><td>${doc.title}</td><td>${doc.conservationPlace}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
+                    <i class="fa fa-download mr-2"></i> PDF
+                </a></td></tr>
+			`;
+		}
+        if (this.publications.length) {
+            content += `
+                    </tbody>
+                    <thead>
+                        <tr><th colspan=3 class="p-2 has-text-centered is-size-5">Pubblicazioni del progetto Carta Archeologica</th>
+                        <tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
+                    </thead>
+                    <tbody>
+            `;
+            for (const doc of this.publications) {
+                content += `
+                    <tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
+                        <i class="fa fa-download mr-2"></i> PDF
+                    </a></td></tr>
+                `;
+            }
+        }
+		content += `
+                </tbody>
+                </table>
+                </div>
+            </div>
+        `;
+
+        if (!this.publications.length && !this.documentation.length) {
+            content = '<p class="has-text-centered">Nessun documento disponibile.</p>';
+        }
+
+        return content;
+    }
+
+    async biblio(recordId) {
+        let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${recordId}`);
+
+        let citations = '';
+
+        if (record.bibliography.length) {
+            record.bibliography.forEach(record => {
+                citations += `
+                    <span class="is-clickable has-text-link"
+                        data-action="click->biblio#open"
+                        id="cit-${record.id}">
+                        ${record.citation.trim()}</span>`;
+
+                citations += record.pages?.length ? `, ${record.pages};` : ';';
+                
+                this.biblioElements.push(`
+                    <div class="p-2 mt-2" id="ref-${record.id}">
+                        <p class="p-3">${record.reference}</p>
+                    </div>
+                    `
+                );
+            });
+        }
+
+        return citations.trim().slice(0, -1);
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
+    }
+
+    async fetchData(url) {
+        return await fetch(url).then(res => res.json());
+    }
+}

webgis/js/components/NotConservedSheet.js

@@ -1,73 +0,0 @@
-/**
- * Component to render data for not conserved assets sheet
- * @class NotConservedSheet
- */
-export class NotConservedSheet {
-    /**
-     * @param {object} data
-     */
-    set siteData(data) {
-        this._data = data;
-    }
-
-    async render() {
-        return `
-        <div class="container ml-3">
-            <p class="p-2">
-                <span class="icon has-text-link">
-                    <i class="fa fa-tag"></i>
-                </span>
-                <strong>Denominazione:</strong> ${this._data.denomination}
-            </p>
-            <p class="p-2">
-                <span class="icon has-text-link">
-                    <i class="fa fa-hourglass"></i>
-                </span>
-                <strong>Periodo:</strong> ${this._data.period}
-            </p>
-            <p class="p-2">
-                <span class="icon has-text-link">
-                    <i class="fa fa-map"></i>
-                </span>
-                <strong>Località generica:</strong> ${this._data.genericLocation}
-            </p>
-            <p class="mt-4 pl-2 pr-5">
-                <strong class="pb-3">Descrizione</strong></br>
-                ${this._data.shortDescription}
-            </p>
-            <p class="mt-4 pl-2 pr-5">
-                <span class="icon has-text-link">
-                    <i class="fa fa-book"></i>
-                </span>
-                <strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
-            </p>
-            <p class="p-2">
-                <span class="icon has-text-link">
-                    <i class="fa fa-map"></i>
-                </span>
-                <strong>Autore scheda:</strong> ${this._data.author}
-            </p>
-        </div>`;
-    }
-
-    async biblio(recordId) {
-        let record = await this.fetchData(`${window.API_URL}/not_conserved/${recordId}`);
-
-        let biblio = '';
-
-        if (record.bibliography.length) {
-            record.bibliography.forEach(record => {
-                biblio += `
-                    <span class="is-capitalized">${record.citation.toLowerCase()}</span>,
-                    ${record.pages};
-                `;
-            });
-        }
-
-        return biblio.trim().slice(0, -1);
-    }
-
-    async fetchData(url) {
-        return await fetch(url).then(res => res.json());
-    }
-}

webgis/js/components/Prehistoric.js

@@ -0,0 +1,129 @@
+import { GisState } from "../state.js";
+/**
+ * @class Prehistoric
+ */
+export class Prehistoric {
+    biblioElements = [];
+    
+    set data(data) {
+        this._data = data;
+    }
+    /**
+     * 
+     * @todo Biblio
+     * @returns {string} The HTML
+     */
+    async render() {
+        return `
+        <div class="container px-4 pt-4">
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-tag"></i>
+                </span>
+                <strong>Denominazione:</strong> ${this._data.denomination}
+            </p>
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-hourglass"></i>
+                </span>
+                <strong>Periodo:</strong> ${this._data.period}
+            </p>
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-map"></i>
+                </span>
+                <strong>Località generica:</strong> ${this._data.genericPlace}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione breve</strong></br>
+                ${this._data.description}
+            </p>
+            <p class="p-2">
+                <strong>Conservazione:</strong> ${this._data.conservation}
+            </p>
+            <p class="p-2 mb-4">
+                <strong>Autore scheda:</strong> ${this._data.author}
+            </p>
+        </div>`;
+
+        /*
+
+            <p class="mt-4 pl-2 pr-5">
+                <span class="icon has-text-link">
+                    <i class="fa fa-book"></i>
+                </span>
+                <strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
+            </p>
+            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" data-biblio-target="biblio"></div>
+        */
+    }
+
+    renderImages() {
+		let content = `<div class="content has-text-centered">
+			<p class="is-size-5 mt-3">Immagini</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="prehist-gallery">
+					<img src="img/${this.images[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>
+				</figure>
+			</div>
+		</div>`;
+
+        return content;
+    }
+    /**
+     * @param {HTMLElement} imageContainer
+     * @param {Function} gallery
+     */
+    async setImages(imageContainer, gallery) {
+        if (this._data.images.length) {
+            this.images = this._data.images;
+            imageContainer.innerHTML = this.renderImages();
+            gallery('prehist-gallery', this.images);
+        } else
+            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
+    }
+    /**
+     * @param {number} recordId 
+     */
+    async biblio(recordId) {
+        let finding = await this.fetchData(`${GisState.apiUrl}/prehistoric/${recordId}`);
+
+        let citations = '';
+
+        if (finding.bibliography.length) {
+            finding.bibliography.forEach(record => {
+                citations += `
+                    <span class="is-clickable has-text-link"
+                        data-action="click->biblio#open"
+                        id="cit-${record.id}">
+                        ${record.citation}</span>`;
+
+                citations += record.pages?.length ? `, ${record.pages};` : ';';
+
+                this.biblioElements.push(`
+                    <div class="p-2 mt-2" id="ref-${record.id}">
+                        <p class="p-3">${record.reference}</p>
+                    </div>
+                `);
+            });
+        }
+
+        return citations.trim().slice(0, -1);
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
+    }
+
+    async fetchData(url) {
+        return await fetch(url).then(res => res.json());
+    }
+}

webgis/js/components/SiteDocuments.js

@@ -3,6 +3,8 @@
  * @class SiteDocuments
  */
 export class SiteDocuments {
+    documentation = [];
+    publications = [];
     /**
      * @param {object} data
      */
@@ -11,38 +13,53 @@ export class SiteDocuments {
     }
 
     render() {
+        if (this._siteData.documents.length === 0) {
+            return `
+                <p class="p-2 has-text-centered mt-3 mb-3">
+                    Nessuna documentazione disponibile.
+                </p>
+            `;
+        }
+
+        this.documentation = this._siteData.documents
+            .filter(d => d.type === 'documentazione')
+        
+        this.publications = this._siteData.documents.filter(d => d.type === 'pubblicazione');
+
         let content = `
             <div class="has-bottom-border">
                 <div class="p-2">
                     <table class="p-4 table is-fullwidth is-striped">
                         <thead>
                             <tr><th colspan=3 class="p-2 has-text-centered is-size-5">Documentazione di archivio</th>
-                            <tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
+                            <tr><th>Titolo</th><th>Luogo di conservazione</th><th>Download</th></tr>
                         </thead>
                         <tbody>
             `;
-		for (const doc of this._siteData.documents.filter(d => d.type === 'documentazione')) {
+		for (const doc of this.documentation) {
 			content += `
-				<tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
-                    <i class="fa fa-download mr-2"></i> PDF
-                </a></td></tr>
-			`;
-		}
-		content += `
-                </tbody>
-                <thead>
-                    <tr><th colspan=3 class="p-2 has-text-centered is-size-5">Pubblicazioni del progetto Carta Archeologica</th>
-                    <tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
-                </thead>
-                <tbody>
-        `;
-		for (const doc of this._siteData.documents.filter(d => d.type === 'pubblicazione')) {
-			content += `
-				<tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
+				<tr><td>${doc.title}</td><td>${doc.conservationPlace}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
                     <i class="fa fa-download mr-2"></i> PDF
                 </a></td></tr>
 			`;
 		}
+        if (this.publications.length) {
+            content += `
+                    </tbody>
+                    <thead>
+                        <tr><th colspan=3 class="p-2 has-text-centered is-size-5">Pubblicazioni del progetto Carta Archeologica</th>
+                        <tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
+                    </thead>
+                    <tbody>
+            `;
+            for (const doc of this.publications) {
+                content += `
+                    <tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
+                        <i class="fa fa-download mr-2"></i> PDF
+                    </a></td></tr>
+                `;
+            }
+        }
 		content += `
                 </tbody>
                 </table>

webgis/js/components/SiteMedia.js

@@ -0,0 +1,46 @@
+/**
+ * Component to render data for site media (photos and videos)
+ * @class SiteMedia
+ */
+export class SiteMedia {
+    /**
+     * @param {object} data
+     */
+    set siteData(data) {
+        this._siteData = data;
+    }
+
+    renderPhotos() {
+		return `
+			<div class="content has-text-centered mb-5 pb-5">
+				<p class="is-size-5 mt-3">Fotografie</p>
+				<div style="max-width: 70%; margin: 0 auto">
+					<p class="is-size-6">Cliccare sull'immagine per aprire la gallery</p>
+					<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
+						<img src="img/${this._siteData.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>
+					</figure>
+				</div>
+			</div>
+		`;
+    }
+
+    renderVideos() {
+		return `
+			<div class="content has-text-centered mb-5 pb-5">
+				<p class="is-size-5 mt-3">Video</p>
+				<div style="max-width: 70%; margin: 0 auto">
+					<p class="is-size-6 has-text-centered">Gallery video</p>
+					<figure class="is-relative is-clickable has-text-centered" id="gallery-video">
+						<img src="video/${this._siteData.filename.replace('mp4', 'png')}" 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>
+					</figure>
+				</div>
+			</div>
+		`;
+    }
+}

webgis/js/components/SitePhotos.js

@@ -1,31 +0,0 @@
-/**
- * Component to render data for site photos
- * @class SitePhotos
- */
-export class SitePhotos {
-    /**
-     * @param {object} data
-     */
-    set siteData(data) {
-        this._siteData = data;
-    }
-
-    render() {
-		let 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/${this._siteData.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>
-				</figure>
-			</div>
-		</div>
-		`;
-
-        return content;
-    }
-}

webgis/js/components/SiteSheet.js

@@ -3,13 +3,21 @@
  * @class SiteSheet
  */
 export class SiteSheet {
+    biblioElements = [];
+    /*
+    constructor(data) {
+        this._siteData = data;
+    }
+    */
     /**
      * @param {object} data
      */
     set siteData(data) {
         this._siteData = data;
     }
-
+    /**
+     * @returns {string} HTML
+     */
     render() {
         return `<div class="container has-bottom-border">
             <table class="table is-fullwidth is-striped">
@@ -28,19 +36,32 @@ export class SiteSheet {
                 <tr><th>Motivazione cronologia</th><td>${this._siteData.motivation}</td></tr>
                 <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Conservazione e condizione giuridica</th></tr>
                 <tr><th>Stato di conservazione</th><td>${this._siteData.conservationState}</td></tr>
+                <tr><th>Tecniche edilizie impiegate:</th><td>${this._siteData.techniques}</td></tr>
                 <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Ritrovamento e materiali</th></tr>
                 <tr><th>Anno di ritrovamento</th><td>${this._siteData.finding}</td></tr>
                 <tr><th>Materiali rinvenuti</th><td>${this._siteData.materials}</td></tr>
                 <tr><th>Luogo custodia materiali</th><td>${this._siteData.conservationPlace}</td></tr>
+                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Rilievi</th></tr>
+                <tr><td colspan=2>${this._siteData.surveys ?? 'Nessun rilievo'}</td></tr>
                 <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Descrizione</th></tr>
                 <tr><td class="pr-6 pl-6 pt-3" colspan="2">${this._siteData.description}</td></tr>
+                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Bibliografia</th></tr>
+                <tr>
+                    <td colspan=2>
+                        ${this.biblio()}
+                        <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" id="biblio-detail" data-biblio-target="biblio"></div>
+                    </td>
+                </tr>
             </table>
+            <p class="pl-4 mb-4">
+                <strong>Autore scheda:</strong> ${this._siteData.author}
+            </p>
         </div>`;
     }
 
     renderShort() {
         return `
-        <div class="container ml-3">
+        <div class="container p-3">
             <p class="p-2">
                 <span class="icon has-text-link">
                     <i class="fa fa-tag"></i>
@@ -62,6 +83,48 @@ export class SiteSheet {
             <p class="mt-4 pl-2 pr-5">
                 ${this._siteData.shortDescription}
             </p>
+            <p class="mt-4 pl-2 pr-5">
+                <span class="icon has-text-link">
+                    <i class="fa fa-book"></i>
+                </span>
+                <strong>Bibliografia:</strong> ${this.biblio()}
+            </p>
+            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" data-biblio-target="biblio"></div>
+            <p class="p-2">
+                <strong>Autore scheda:</strong> ${this._siteData.author}
+            </p>
         </div>`;
     }
-}
+
+    biblio() {
+        let citations = '';
+
+        if (this._siteData.bibliography.length) {
+            this._siteData.bibliography.forEach(record => {
+                citations += `
+                    <span class="is-clickable has-text-link"
+                        data-action="click->biblio#open"
+                        id="cit-${record.id}">
+                        ${record.citation.trim()}</span>`;
+
+                citations += record.pages?.length ? `, ${record.pages};` : ';';
+
+                this.biblioElements.push(`
+                    <div class="p-2 mt-2" id="ref-${record.id}">
+                        <p class="p-3">${record.reference}</p>
+                    </div>
+                    `
+                );
+            });
+        }
+
+        return citations.trim().slice(0, -1);
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
+    }
+}

webgis/js/components/SiteSurveys.js

@@ -11,21 +11,19 @@ export class SiteSurveys {
     }
 
     render() {
-		let content = `<div class="has-text-centered has-bottom-border mb-5 pb-5">
-			<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/${this._siteData.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>
-				</figure>
+		return `
+			<div class="has-text-centered mb-5 pb-5">
+				<p class="is-size-5 mt-3 mb-3">Rilievi, disegni ed elaborazioni grafiche</p>
+				<div style="max-width: 70%; margin: 0 auto">
+					<p class="is-size-6 mb-2">Cliccare sull'immagine per aprire la gallery</p>
+					<figure class="is-relative has-text-centered is-clickable" id="gallery-1">
+						<img src="img/${this._siteData.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>
+					</figure>
+				</div>
 			</div>
-		</div>
 		`;
-
-        return content;
     }
 }

webgis/js/components/SphericalPhoto.js

@@ -0,0 +1,18 @@
+import { Viewer } from '@photo-sphere-viewer/core';
+/**
+ * @class SphericalPhoto
+ */
+export class SphericalPhoto {
+    basePath = '/webgis/img/spherical';
+
+    /**
+     * @param {string} filename Name of the spherical image 
+     */
+    setViewer(filename) {
+        new Viewer({
+            container: document.querySelector('#pano-viewer'),
+            panorama: `${this.basePath}/${filename}`,
+            defaultZoomLvl: 0,
+        });
+    }
+}

webgis/js/components/Underwater.js

@@ -0,0 +1,41 @@
+/**
+ * @class Underwater
+ */
+export class Underwater {
+    
+    /**
+     * @param {object} data
+     */
+    set data(data) {
+        this._data = data;
+    }
+
+    async render() {
+        return `
+        <div class="container px-4 pt-4">
+            <p class="p-2">
+                <strong>Denominazione:</strong> ${this._data.denomination}
+            </p>
+            <p class="p-2">
+                <strong>Località generica:</strong> ${this._data.genericPlace}
+            </p>
+            <p class="p-2">
+                <strong>Periodo:</strong> ${this._data.period}
+            </p>
+            <p class="p-2">
+                <strong>Stato di conservazione:</strong> ${this._data.conservationState}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione breve</strong></br>
+                ${this._data.shortDescription}
+            </p>
+            <p class="p-2 mb-4">
+                <strong>Autore scheda:</strong> ${this._data.author}
+            </p>
+        </div>`;
+    }
+
+    async fetchData(url) {
+        return await fetch(url).then(res => res.json());
+    }
+}

webgis/js/controllers/biblio_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+import { GisState } from "../state.js";
+
+export default class extends Controller {
+    static targets = ['biblio', 'cit', 'ref', 'close'];
+
+    open(event) {
+        const biblio = GisState.bibliography;
+        this.trigger = event.currentTarget;
+        const id = this.trigger.id.replace('cit-', '');
+        this.ref = this.biblioTarget;
+
+        if (this.trigger.parentElement.nodeName === 'TD') {
+            this.ref = this.biblioTargets.find(t => t.id === 'biblio-detail');
+        }
+
+		this.ref.innerHTML = '<button class="delete" data-action="click->biblio#hideBiblio"></button>';
+        this.ref.innerHTML += biblio.getReference(id);
+
+        this.showBiblio();
+    }
+
+    close() {
+        this.modalTarget.classList.remove('is-active');
+    }
+
+    showBiblio() {
+        this.ref.classList.remove('is-hidden');
+		this.ref.scrollIntoView({behavior: 'smooth'});
+    }
+
+    hideBiblio() {
+		this.ref.classList.add('is-hidden');
+		this.trigger.parentElement.scrollIntoView({behavior: 'smooth'});
+    }
+}

webgis/js/controllers/layer_controller.js

@@ -0,0 +1,77 @@
+import { Controller } from "@hotwired/stimulus";
+import { GisState } from "../state.js";
+import GIS from "../gis.js";
+
+export default class extends Controller {
+    static targets = [
+        'sites',
+        'findings',
+        'notconserved',
+        'prehist',
+    ];
+
+    static values = {
+        'id': Number,
+        'type': String,
+    };
+
+    async toggleCartography() {
+        const map = GisState.map;
+        const id = this.idValue;
+
+        let currentLayer = await GIS.getImageOverlay(id);
+        let hasLayer = false;
+
+        map.eachLayer(function (layer) {
+            if (layer.options.label === currentLayer.options.label) {
+                hasLayer |= true;
+                currentLayer = layer;
+            }
+        });
+
+        if (!hasLayer) currentLayer.addTo(map);
+        else map.removeLayer(currentLayer);
+    }
+
+    toggleCadastral() {
+        const map = GisState.map;
+        const wms = GisState.cartography.cadastral;
+
+        if (!map.hasLayer(wms)) map.addLayer(wms);
+        else map.removeLayer(wms);
+    }
+
+    /**
+     * @todo Use Stimulus values?
+     * @param {Event} event 
+     */
+    toggle(event) {
+        let map = GisState.map;
+        let target = event.currentTarget;
+        const id = target.parentElement.getAttribute('data-id');
+        this.toggleIcon(event.currentTarget);
+
+        let group = GisState.layers[id];
+
+        if (map.hasLayer(group)) {
+            map.removeLayer(group);
+            target.title = "Mostra";
+        }
+        else {
+            map.addLayer(group);
+            target.title = "Nascondi";
+        }
+    }
+    /**
+     * Toggle visibility icon...
+     * @param {HTMLElement} target
+     */
+    toggleIcon(target) {
+        const icon = target.firstElementChild;
+        const className = icon.className;
+        icon.className = className.includes('slash') ?
+            className.replace('-slash', '') :
+            className.replace('eye', 'eye-slash');
+    }
+}
+

webgis/js/controllers/marker_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus";
+import { GisState, getMarkerByCoords } from "../state.js";
+
+export default class extends Controller {
+    static values = {
+        'coords': String,
+        'group': String,
+        'id': String,
+    };
+
+    END_ZOOM = 19;
+    // Animation breaks automatic tooltip opening...
+    mapAnimate = {
+        animate: true,
+        duration: 1,
+        easeLinearity: 0.25
+    };
+
+    /**
+     * @param {Event} event 
+     */
+    go() {
+        let map = GisState.map;
+        const coords = this.coordsValue.split(' ');
+
+        map.setView(
+            coords,
+            this.END_ZOOM,
+            {animate: false}
+        );
+
+        let marker = this.getMarker(map, coords);
+        // DEBUG for sites
+        if (this.groupValue) marker = getMarkerByCoords(coords, this.groupValue);
+        marker?.openTooltip();
+    }
+    /**
+     * @param {L.Map} map
+     * @param {Array<String>} coords
+     * @returns {L.Marker}
+     */
+    getMarker(map, coords) {
+        let marker;
+        map.eachLayer(layer => {
+            if (layer instanceof L.Marker) {
+                const latLng = layer.getLatLng();
+                const {lat, lng} = latLng;
+                if (lat === Number(coords[0]) && lng === Number(coords[1])) {
+                    marker = layer;
+                    return;
+                }
+            }
+        });
+
+        return marker;
+    }
+}

webgis/js/controllers/menu_controller.js

@@ -0,0 +1,150 @@
+import { Controller } from "@hotwired/stimulus"
+import { GisState } from '../state.js';
+
+export default class extends Controller {
+    static targets = [
+        'list',
+        'menu',
+        'cartography',
+        'icon'
+    ];
+
+    static values = {
+        'cartography' : String,
+        'main' : String,
+    };
+
+    buildMenu() {
+        const groups = Object.keys(GisState.markers);
+        const municipalities = ['Anacapri', 'Capri'];
+
+        // TODO refactor with Stimulus values?
+        for (let group of groups) {
+            for (let municipality of municipalities) {
+                let ul = this.renderMenuItems(group, municipality);
+                document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
+                    ?.appendChild(ul);
+            }
+        }
+    }
+    /**
+     * 
+     * @param {String} group 
+     * @param {String} municipality 
+     */
+    renderMenuItems(group, municipality) {
+        const ul = document.createElement('ul');
+        ul.className = 'is-hidden';
+        ul.id = `${group}-${municipality.toLowerCase()}-sub`;
+
+        const template = document.getElementById('menu-item-template');
+
+        for (let key in GisState.markers[group]) {
+            const marker = GisState.markers[group][key];
+            if (marker.options.municipality === municipality) {
+                const clone = template.content.cloneNode(true);
+                const link = clone.querySelector('a');
+
+                link.dataset.markerCoordsValue = key;
+                link.dataset.markerGroupValue = group;
+                link.textContent = marker.options.label;
+
+                ul.appendChild(clone);
+            }
+        }
+
+        return ul;
+    }
+
+    buildCartographyMenu() {
+        const historicCadastre = GisState.cartography.historic;
+        const template = document.getElementById('cartography-item-template');
+        const ul = document.createElement('ul');
+        ul.className = 'menu-list';
+        ul.id = 'historic-sub';
+
+        const aside = document.querySelector('[data-id="cartography-aside"]');
+
+        for (let geoImage of historicCadastre) {
+            const clone = template.content.cloneNode(true);
+            const label = clone.querySelector('label');
+            const checkbox = clone.querySelector('input[type="checkbox"]');
+
+            checkbox.dataset.layerIdValue = geoImage.id;
+            checkbox.dataset.layerTypeValue = 'historic';
+            const span = document.createElement('span');
+            span.className = 'pl-3';
+            span.textContent = geoImage.label;
+            label.appendChild(span);
+
+            ul.appendChild(clone);
+        }
+
+        aside.appendChild(ul);
+    }
+
+    toggleMenu(event) {
+        const menuId = event.target.dataset.id;
+
+        // Stupid...
+        if (menuId === 'main') {
+            this.menuTarget.classList.toggle('is-hidden');
+            if (!this.cartographyTarget.classList.contains('is-hidden')) {
+                this.cartographyTarget.classList.add('is-hidden');
+            }
+        }
+
+        if (menuId === 'cartography') {
+            this.cartographyTarget.classList.toggle('is-hidden');
+            if (!this.menuTarget.classList.contains('is-hidden')) {
+                this.menuTarget.classList.add('is-hidden');
+            }
+        }
+    }
+
+    close() {
+        this.menuTarget.classList.add('is-hidden');
+    }
+
+    closeCartography() {
+        this.cartographyTarget.classList.add('is-hidden');
+    }
+
+    toggleList(id) {
+        document.querySelector(`#${id}`).classList.toggle('is-hidden');
+    }
+
+    openSubList(event) {
+        const target = event.currentTarget;
+        const targetIcon = target.querySelector('.fa');
+        const id = target.getAttribute('data-list-id');
+        this.toggleList(id);
+        this.toggleIcon(targetIcon);
+    }
+
+    toggle(event) {
+        const target = event.currentTarget; 
+        const targetIcon = target.querySelector('.fa');
+        const id = target.getAttribute('data-id');
+        const listId = `${id}-list`;
+        const list = this.listTargets.find(t => t.id === listId);
+
+        if (list) {
+            list.classList.toggle('is-hidden');
+        }
+
+        this.toggleIcon(targetIcon);
+    }
+
+    toggleIcon(icon) {
+        if (icon.classList.contains('fa-chevron-right')) {
+            icon.classList.remove('fa-chevron-right');
+            icon.classList.add('fa-chevron-down');
+        } else {
+            icon.classList.add('fa-chevron-right');
+            icon.classList.remove('fa-chevron-down');
+        }
+
+        return icon;
+    }
+}

webgis/js/controllers/modal_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['close', 'modal'];
+
+    current(id) {
+        return this.modalTargets.find(m => m.getAttribute('data-id') === id);
+    }
+
+    homeOpen(event) {
+        const id = event.currentTarget.getAttribute('data-id');
+        const current = this.current(id);
+
+        current.classList.add('is-active');
+    }
+
+    homeClose(event) {
+        const id = event.currentTarget.getAttribute('data-id');
+        const current = this.current(id);
+
+        current.classList.remove('is-active');
+    }
+
+    open() {
+        this.modalTarget.classList.add('is-active');
+    }
+
+    close() {
+        this.modalTarget.classList.remove('is-active');
+    }
+}

webgis/js/controllers/tabs_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['active', 'tab', 'content'];
+
+    activate(event) {
+        this.deactivate();
+        const activeId = event.currentTarget.id;
+
+        event.currentTarget.classList.add('is-active');
+        this.contentTargets.find(c => c.id === activeId.replace('for-', ''))
+            .classList.remove('is-hidden');
+    }
+
+    reset() {
+        this.deactivate();
+        const activeId = this.activeTarget.id;
+
+        this.activeTarget.classList.add('is-active');
+        this.contentTargets.find(c => c.id === activeId.replace('for-', ''))
+            .classList.remove('is-hidden');
+    }
+
+    deactivate() {
+        this.tabTargets.forEach(tab => {
+            tab.classList.remove('is-active');
+        });
+
+        this.contentTargets.forEach(content => {
+            content.classList.add('is-hidden');
+        });
+    }
+}
+

webgis/js/gis.js

@@ -2,20 +2,22 @@
 
 import UI from "./ui.js";
 import API_CONFIG from "./config.js";
+import Icons from "./icons.js";
+import { SphericalPhoto } from "./components/SphericalPhoto.js";
+import { GisState } from "./state.js";
 
 const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
 const BASE_URL = location.href;
 
-let API_URL = '';
-if (BASE_URL.includes('localhost')) {
+let API_URL = API_CONFIG.prod;
+
+if (!BASE_URL.includes('cnr.it')) {
     API_URL = API_CONFIG.dev;
-} else {
-    API_URL = API_CONFIG.prod;
 }
 
-window.API_URL = API_URL;
+GisState.apiUrl = API_URL;
 
-// Global leaflet
+// Global leaflet and proj4
 /**
  * @namespace GIS
  */
@@ -23,6 +25,9 @@ const GIS = {};
 
 GIS.CENTER_COORDS = [40.5492, 14.2317];
 GIS.INIT_ZOOM = 14;
+GIS.MIN_ZOOM = 11;
+GIS.MAX_ZOOM = 24;
+
 const optionsVincoli = {
     color: '#222',
     opacity: 0.8,
@@ -37,6 +42,13 @@ const optionsSiti = {
     fillColor: '#800040',
     fillOpacity: 0.8
 };
+const optionsGrotta = {
+    color: '#205dac',
+    opacity: 1,
+    weight: 1.5,
+    fillColor: '#205dac',
+    fillOpacity: 0.8
+}
 const optionsPaesistici = {
     color: '#222',
     opacity: 1,
@@ -51,17 +63,10 @@ const optionsFabbricati = {
     fillColor: '#5b5d5f',
     fillOpacity: 0.8
 };
-
-const MARKER_NAMES = {
-    sites: {
-        'gradola' : 'Villa di Gradola',
-        'damecuta' : 'Villa di Damecuta',
-        'matermania' : 'Grotta di Matermania',
-        'arsenale' : 'Grotta dell\'Arsenale',
-        'tiberio' : 'Bagni di Tiberio',
-        'mura' : 'Mura greche',
-        'san_michele' : 'Villa San Michele',
-    },
+const clusterOptions = {
+    spiderfyOnMaxZoom: false,
+    showCoverageOnHover: false,
+    disableClusteringAtZoom: 19,
 };
 
 /**
@@ -88,213 +93,306 @@ function capitalize(text) {
 /**
  * @param {string} mapId
  * @param {number} zoomLevel
- * @returns {{map: Map, sites: Layer}}
+ * @returns {L.Map}
  */
 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,
+        //attributionControl: false,
+        minZoom: GIS.MIN_ZOOM,
     }).setView(this.CENTER_COORDS, zoomLevel);
 
     map.crs = L.CRS.EPSG4326;
 
-    const {baseMap, sitesGroup} = await this.initLayers(map);
-
-    let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
-    let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici);
-    let notConserData = await fetch(`${API_URL}/not_conserved`)
-        .then(data => data.json());
-
+    const baseMap = await this.initLayers(map);
     // Add scale and ruler controls
     L.control.scale({imperial: false}).addTo(map);
     L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);
 
-    let sitesMarkers = [];
-    let siteIcon = L.icon(
-        {
-            iconUrl: 'img/icons/siti.png',
-            iconSize: [24, 36],
-            iconAnchor: [12, 32],
-            tooltipAnchor: [0, -26],
-        }
-    );
-    let notConserIcon = L.icon(
-        {
-            iconUrl: 'img/icons/non_conserv.png',
-            iconSize: [24, 36],
-            iconAnchor: [12, 32],
-            tooltipAnchor: [0, -26],
-        }
-    );
+    let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli);
+    let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
 
-    let notConserved = [];
-
-    for (let record of notConserData.records) {
-        notConserved.push(L.marker(
-                record.coordinates,
-                {icon: notConserIcon}
-            ).bindTooltip(record.denomination)
-            .on(
-                'click',
-                () => UI.openNotConserModal(record, '#not-conser-data')
-            )
-        );
-    }
-
-    for (let id in MARKER_NAMES.sites) {
-        let layer = sitesGroup.customGetLayer(id);
-        let coords = layer.getBounds().getCenter();
-        const fromStorage = localStorage.getItem(id);
-        let data = {};
-
-        if (fromStorage !== 'undefined') {
-            try {
-                data = JSON.parse(fromStorage);
-                const lat = data?.coordinates[0] ?? coords.lat;
-                const lon = data?.coordinates[1] ?? coords.lng;
-                coords = [lat, lon];
-            } catch (error) {
-                console.log(error);
-            }
-        } else {
-            data = await GIS._fetchData('site/' + id);
-        }
-
-        const marker = L.marker(coords, { icon: siteIcon })
-            .bindTooltip(MARKER_NAMES.sites[id])
-            .openTooltip();
-        
-        marker.on('click', () => UI.openSiteModal(data, '#site-data'));
-
-        sitesMarkers.push(marker);
-    }
-
-    let markersGroup = L.layerGroup(sitesMarkers);
-    let notConservedGroup = L.layerGroup(notConserved);
+    await this.addLayerGroups(map);
+    await this.fetchCartographyLayers();
 
     const archeo = {
-        'Beni archeologici (punti)' : markersGroup,
-        'Beni archeologici (strutture)' : sitesGroup,
-        'Beni non conservati' : notConservedGroup,
         'Vincoli archeologici' : layerVincoli,
         'Vincoli paesistici' : layerPaesistici,
+        //'Catasto storico' : historicCadastre,
     };
+    L.control.layers(baseMap, archeo).addTo(map);
 
-    markersGroup.addTo(map);
-    sitesGroup.addTo(map);
-    notConservedGroup.addTo(map);
+    GisState.map = map;
 
-    L.control.layers(
-        baseMap,
-        archeo,
-    ).addTo(map);
-
-    // TODO Horrible?
-    return {map: map, sites: sitesGroup};
-}
-/*
-GIS._prepareLayers = async function(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);
+    const reprojectedWMSLayer = GIS.reprojectWMS();
+    const wmsLayer = new reprojectedWMSLayer(
+        'https://wms.cartografia.agenziaentrate.gov.it/inspire/wms/ows01.php?',
+        {
+            layers: 'CP.CadastralParcel,fabbricati',
+            transparent: true,
+            format: 'image/png',
+            version: '1.1.1',
+            minZoom: 15,
+            maxZoom: this.MAX_ZOOM,
+            tileSize: 1024,
+            opacity: 0.6,
         }
-    } 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\(.*$/, '')
+    GisState.cartography.cadastral = wmsLayer;
+
+    return map;
+}
+/**
+ * Fetches references to cartography layers
+ * and updates GisState
+ */
+GIS.fetchCartographyLayers = async function () {
+    const data = await this._fetchData('geoimages/menu')
+        .catch(error => console.error(`Could not fetch data for geo images: ${error}`));
+
+    for (let item of data) {
+        let {id, label} = item;
+        GisState.cartography.historic.push({id, label});
+    }
+}
+/**
+ * Load georeferenced image overlays layer group
+ * @param {Number} imageId - The API id of the georeferenced image
+ * @returns {L.ImageOverlay}
+ */
+GIS.getImageOverlay = async function (imageId) {
+    const imageData = await this._fetchData(`geoimages/${imageId}`)
+        .catch(error => console.error(`Could not fetch data for geo image ${imageId}: ${error}`));
+
+    let polygonCoords = JSON.parse(imageData.polygon).coordinates[0];
+    // Image rectangle bounds are SE and NW coordinates from the PostGIS polygon
+    // with long/lat swapped...
+    const se = [polygonCoords[0][1], polygonCoords[0][0]];
+    const nw = [polygonCoords[2][1], polygonCoords[2][0]];
+    const bounds = [se, nw];
+
+    const imageOverlay = L.imageOverlay(
+        `/webgis/img/geo/${imageData.filename}`,
+        bounds,
+        {
+            opacity: 0.6,
+            alt: `Immagine georeferita (${imageData.label})`,
+            label: `geoimage:${imageData.id}:${imageData.label}`,
+        }
+    );
+
+    return imageOverlay;
+}
+/**
+ * Add layer groups to map
+ */
+GIS.addLayerGroups = async function (map) {
+    // Can be included in Promise.all
+    // if it returns only one group...
+    const sites = await this.sites();
+    sites.markers.addTo(map);
+    sites.geom.addTo(map);
+
+    const groups = await Promise.all(
+        [
+            this.notConserved(),
+            this.findings(),
+            this.prehistoric(),
+            this.underwater(),
+        ]
+    );
+    groups.forEach(group => group.addTo(map));
+}
+/**
+ * Create markers for sites
+ * @returns {{markers: L.markerClusterGroup, geom: L.LayerGroup}}
+ */
+GIS.sites = async function () {
+    let sitesData = await fetch(`${API_URL}/sites`)
+        .then(data => data.json());
+
+    let sites = L.markerClusterGroup(clusterOptions);
+    let geom = [];
+
+    for (let record of sitesData) {
+        if (record.geojson) {
+            const options = record.gisId === 'grotta_azzurra' ?
+                optionsGrotta : optionsSiti;
+            geom.push(await this.loadSiteLayer(record, options));
+        }
+
+        const marker = L.marker(
+                record.coordinates,
+                {icon: Icons.site, label: record.label}
             )
-            .openTooltip();
-        
-        if (typeof data === 'object') {
-            marker.on('click', () => UI.openModal(data, '#site-data'));
-        }
+            .bindTooltip(record.label)
+            .on(
+                'click',
+                () => UI.openSiteModal(record, '#site-data')
+            );
+
+        sites.addLayer(marker);
+        // Populate app state for reuse and avoid window.Sites etc.
+        // Municipality (Capri, Anacapri) added for reuse in dynamic menu
+        marker.options.municipality = record.municipality;
+        const markerIndex = `${record.coordinates[0]} ${record.coordinates[1]}`;
+        GisState.markers.sites[markerIndex] = marker;
     }
+
+    GisState.layers.sites = sites;
+
+    return {markers: sites, geom: L.layerGroup(geom)};
+}
+/**
+ * Create not conserved group
+ * @returns {L.MarkerClusterGroup}
+ */
+GIS.notConserved = async function () {
+    let notConserData = await fetch(`${API_URL}/not_conserved`)
+        .then(data => data.json());
+
+    let notConserved = L.markerClusterGroup(clusterOptions);
+
+    for (let record of notConserData.records) {
+        const marker = L.marker(
+                record.coordinates,
+                {icon: Icons.notConserved, label: record.label}
+            )
+            .bindTooltip(record.label)
+            .on('click', () => UI.openNotConserModal(record, '#not-conser-data'));
+        
+        notConserved.addLayer(marker);
+        // Populate app state for reuse and avoid window.Sites etc.
+        const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+        marker.options.municipality = record.municipality;
+        GisState.markers.notConserved[markerLabel] = marker;
+    }
+
+    GisState.layers.notConserved = notConserved;
+
+    return notConserved;
+}
+/**
+ * Create findings group
+ * @returns {L.MarkerClusterGroup}
+ */
+GIS.findings = async function () {
+    let findingsData = await fetch(`${API_URL}/finding`)
+        .then(data => data.json());
+
+    let findings = L.markerClusterGroup(
+        clusterOptions
+    );
+
+    for (let record of findingsData) {
+        const marker = L.marker(
+                record.coordinates,
+                {icon: Icons.finding, label: record.label}
+            ).bindTooltip(record.label)
+            .on(
+                'click',
+                () => UI.openFindingModal(record, '#finding-data')
+            );
+
+        findings.addLayer(marker);
+        const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+        marker.options.municipality = record.municipality;
+        GisState.markers.findings[markerLabel] = marker;
+    }
+
+    GisState.layers.findings = findings;
+
+    return findings;
+}
+/**
+ * Create group for prehistoric sites
+ * 
+ */
+GIS.prehistoric = async function () {
+    let data = await fetch(`${API_URL}/prehistoric`)
+        .then(data => data.json());
+
+    let prehistoric = L.markerClusterGroup(
+        clusterOptions
+    );
+
+    for (let record of data.records) {
+        const marker = L.marker(
+                record.coordinates,
+                {icon: Icons.prehistoric, label: record.label}
+            ).bindTooltip(record.label)
+            .on(
+                'click',
+                () => UI.openPrehistModal(record, '#prehist-data')
+            );
+
+        const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+        marker.options.municipality = record.municipality;
+        GisState.markers.prehistoric[markerLabel] = marker;
+
+        prehistoric.addLayer(marker);
+    }
+
+    GisState.layers.prehistoric = prehistoric;
+
+    return prehistoric;
+}
+/**
+ * Create underwater sites group
+ * @returns {L.MarkerClusterGroup}
+ */
+GIS.underwater = async function () {
+    let underwaterData = await fetch(`${API_URL}/underwater`)
+        .then(data => data.json());
+
+    let underwater = L.markerClusterGroup(clusterOptions);
+
+    for (let record of underwaterData.records) {
+        const marker = L.marker(
+                record.coordinates,
+                {icon: Icons.underwater}
+            ).bindTooltip(record.label)
+            .on(
+                'click',
+                () => UI.openUnderwaterModal(record, '#underwater-data')
+            );
+
+        const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+        GisState.markers.prehistoric[markerLabel] = marker;
+
+        underwater.addLayer(marker);
+    }
+
+    GisState.layers.underwater = underwater;
+
+    return underwater;
 }
-*/
 /**
  * Adds layers to map and returns an object
  * with {baseMap, archeoLayers, sitesLayerGroup}
+ * @todo Load areas for sites that have them!!
  * @param {L.Map} map 
- * @returns {{baseMap: {"OpenStreetMap": L.TileLayer}, archeo: object, sitesGroup: L.LayerGroup}}
+ * @returns {{baseMap: {"OpenStreetMap": L.TileLayer}}}
  */
 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 osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxNativeZoom : 22,
-        maxZoom: 22,
+        maxNativeZoom : GIS.MAX_ZOOM,
+        maxZoom: GIS.MAX_ZOOM,
         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,
+        maxNativeZoom : GIS.MAX_ZOOM,
+        maxZoom: GIS.MAX_ZOOM,
         attribution: '&copy; Mapbox'
     });
-    let boundaries = await this.loadLayer('confini.geojson', {}, false);
-    let buildings = await this.loadLayer('fabbricati.geojson', optionsFabbricati, false);
+    let boundaries = await this.loadGeoJSON('confini.geojson', {}, false);
+    let buildings = await this.loadGeoJSON('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);
     const baseMap = {
@@ -303,22 +401,91 @@ GIS.initLayers = async function(map) {
         "Cartografia catastale" : baseCatasto,
     };
 
-    return {baseMap, sitesGroup};
+    return baseMap;
 }
 /**
- * @todo Distinguere tipo di geojson per contenuto popup 
- * @param {string} geoJSON 
+ * Toggle spherical photos on the map
+ * based on zoom level
+ */
+GIS.toggleSpherical = async function(map) {
+    // TODO Create points layer
+    const spherical = await this._fetchData('spherical');
+    let sphereMarkers = [];
+    const sPhoto = new SphericalPhoto();
+
+    if (spherical) {
+        for (let pano of spherical) {
+            let marker = L.marker(pano.coordinates, {
+                icon: Icons.camera,
+            });
+
+            marker.bindTooltip('Apri foto sferica');
+            marker.on('click', () => {
+                let modal = document.querySelector('#spherical-modal');
+                let viewer = document.querySelector('#pano-viewer');
+                viewer.innerHTML = '';
+                modal.classList.add('is-active');
+                modal.querySelector('.modal-background').addEventListener('click', () => {
+                    modal.classList.remove('is-active');
+                });
+                modal.querySelector('.modal-close').addEventListener('click', () => {
+                    modal.classList.remove('is-active');
+                })
+                sPhoto.setViewer(pano.filename);
+            });
+
+            sphereMarkers.push(marker);
+        }
+    }
+
+    let group = L.layerGroup(sphereMarkers);
+
+    map.on('zoomend', () => {
+        if (map.getZoom() >= 19) {
+            group.addTo(map);
+        } else {
+            group.remove();
+        }
+    });
+}
+/**
+ * @param {string} geoJSON geoJSON filename
  * @param {{color, opacity, weight, fillColor, fillOpacity}} options Style options for features
  * @param {boolean} popup Should the features have a popup? 
+ * @returns {L.Layer}
  */
-GIS.loadLayer = async function (geoJSON, options, popup = true) {
+GIS.loadGeoJSON = 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', '');
+    // Show data from feature in popUp?
+    const layer = new L.geoJson(geo, {
+        style: function () {
+            return options;
+        },
+        onEachFeature: function (feature, layer) {
+            if (popup) {
+                layer.bindPopup(GIS.featurePopup(geoJSON, feature));
+            }
+        }
+    });
+
+    return layer;
+}
+/**
+ * @param {object} site Site record from DB
+ * @param {{color, opacity, weight, fillColor, fillOpacity}} options Style options for features
+ * @param {boolean} popup Should the features have a popup? 
+ * @returns {L.Layer}
+ */
+GIS.loadSiteLayer = async function (site, options, popup = true) {
+    const geoJSON = `${site.gisId}.geojson`;
+    const geo = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
+        .then(res => res.json())
+        .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
     
-    this.cacheDBData(layerId);
+    this.cacheDBData(site.gisId, site.id);
 
     // Show data from feature in popUp?
     const layer = new L.geoJson(geo, {
@@ -331,7 +498,7 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
             }
             else {
                 layer.on("click", async () => {
-                    let data = GIS.layerData(layerId);
+                    let data = GIS.layerData(site.gisId, site.id);
                     
                     if (typeof data === 'object') {
                         UI.openSiteModal(data);
@@ -346,9 +513,10 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
 /**
  * Retrieves data for a given layer
  * @param {string} layerId 
+ * @param {string} dbId 
  * @returns {object} Data for this layer from DB or cache
  */
-GIS.layerData = async function (layerId) {
+GIS.layerData = async function (layerId, dbId) {
     const fromStorage = localStorage.getItem(layerId);
     let data = {};
 
@@ -359,18 +527,26 @@ GIS.layerData = async function (layerId) {
             console.log(error);
         }
     } else {
-        data = await GIS._fetchData('site/' + layerId);
+        data = await GIS._fetchData('sites/' + dbId);
     }
 
     return data;
 }
+/**
+ * Get spherical photos for a site
+ * @param {int} siteId
+ */
+GIS.getSpherical = async function (siteId) {
+    const data = await this._fetchData('spherical/' + siteId);
+}
+
 /**
  * Cache data from DB in local storage
  * for a given layer
  * @param {string} layerId
  */
-GIS.cacheDBData = async function (layerId) {
-    const data = await this._fetchData('site/' + layerId);
+GIS.cacheDBData = async function (layerId, dbId) {
+    const data = await this._fetchData('sites/' + dbId);
     localStorage.setItem(layerId, JSON.stringify(data));
 }
 /**
@@ -399,11 +575,56 @@ GIS.featurePopup = function (layerName, feature) {
     return content[layerName];
 }
 /**
- * Fetch data from API
- * @param {string} recordId
+ * Reproject WMS layer to map's CRS
+ * @todo Parametrize CRS?
+ * @returns {L.TileLayer.WMS}
  */
-GIS._fetchData = async function (recordId) {
-    const data = await fetch(`${API_URL}/${recordId}`)
+GIS.reprojectWMS = function (crs = 'EPSG:4258') {
+    // Define EPSG:4258
+    proj4.defs('EPSG:4258', "+proj=longlat +ellps=GRS80 +no_defs +type=crs");
+
+    const reprojectedWMSLayer =  L.TileLayer.WMS.extend({
+        getTileUrl(tilePoint) {
+            const map = GisState.map;
+            //const crs = map.options.crs;
+            const tileSize = this.getTileSize();
+
+            //const geoPoint = L.point(tilePoint.x, tilePoint.y);
+            const nwPoint = L.point(
+                tilePoint.x * tileSize.x,
+                tilePoint.y * tileSize.y,
+            )
+            const sePoint = nwPoint.add(L.point(tileSize));
+
+            const nw = map.unproject(nwPoint, tilePoint.z);
+            const se = map.unproject(sePoint, tilePoint.z);
+
+            const [minX, minY] = proj4('EPSG:4326', 'EPSG:4258', [nw.lng, se.lat]);
+            const [maxX, maxY] = proj4('EPSG:4326', 'EPSG:4258', [se.lng, nw.lat]);
+
+            const bbox = [minX, minY, maxX, maxY].join(',');
+
+            return this._url + L.Util.getParamString({
+                    ...this.wmsParams,
+                    bbox,
+                    width: tileSize.x,
+                    height: tileSize.y,
+                    srs: 'EPSG:4258'
+                },
+                this._url,
+                true
+            );
+        }
+    });
+
+    return reprojectedWMSLayer;
+}
+/**
+ * Fetch data from API
+ * @param {string} recordUri The URI to be appendend to the API's base URL
+ */
+GIS._fetchData = async function (recordUri) {
+    const data = await fetch(`${API_URL}/${recordUri}`)
         .then(res => res.json())
         .catch(err => console.log('Error fetching data from DB: ' + err));
 

webgis/js/icons.js

@@ -0,0 +1,53 @@
+// Global leaflet
+/**
+ * @namespace Icons
+ */
+const Icons = {};
+
+Icons.site = L.icon(
+    {
+        iconUrl: 'img/icons/siti.png',
+        iconSize: [18, 27],
+        iconAnchor: [10, 24],
+        tooltipAnchor: [0, -22],
+    }
+);
+Icons.notConserved = L.icon(
+    {
+        iconUrl: 'img/icons/non_conserv.png',
+        iconSize: [18, 27],
+        iconAnchor: [10, 24],
+        tooltipAnchor: [0, -22],
+    }
+);
+
+Icons.finding = L.icon(
+    {
+        iconUrl: 'img/icons/rinvenimenti.png',
+        iconSize: [18, 27],
+        iconAnchor: [10, 24],
+        tooltipAnchor: [0, -22],
+    }
+);
+
+Icons.prehistoric = L.icon(
+    {
+        iconUrl: 'img/icons/preistorici.png',
+        iconSize: [18, 27],
+        iconAnchor: [10, 24],
+        tooltipAnchor: [0, -22],
+    }
+);
+
+Icons.underwater = L.icon(
+    {
+        iconUrl: 'img/icons/subacquei.png',
+        iconSize: [18, 27],
+        iconAnchor: [10, 24],
+        tooltipAnchor: [0, -22],
+    }
+);
+
+Icons.camera = L.divIcon({className: 'fa fa-camera'});
+
+export default Icons;

webgis/js/index.js

@@ -1,17 +1,39 @@
 import GIS from './gis.js';
 import UI from './ui.js';
+import { Application } from '@hotwired/stimulus';
+import MenuController from './controllers/menu_controller.js';
+import ModalController from './controllers/modal_controller.js';
+import MarkerController from './controllers/marker_controller.js';
+import BiblioController from './controllers/biblio_controller.js';
+import TabsController from './controllers/tabs_controller.js';
+import LayerController from './controllers/layer_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
+    // Register Stimulus controllers
+    initStimulus();
+
     let progress = document.querySelector('progress');
-    const init = await GIS.initMap('map');
+    const map = await GIS.initMap('map');
     progress.classList.add('is-hidden');
-    let {map, sites} = init;
 
     map._container.setAttribute('aria-busy', false);
 
+    // Trigger Stimulus buildMenu method...
+    const menuEvent = new Event('menu-ready');
+    document.dispatchEvent(menuEvent);
+    
+    GIS.toggleSpherical(map);
+
     UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
-    UI.toggleMenu('siti');
     UI.toggleBurger('navbar-burger');
-    UI.sitesMenu('.menu-list', map, sites);
-    UI.projectInfo('#project-info');
 });
+
+function initStimulus() {
+    window.Stimulus = Application.start();
+    Stimulus.register("menu", MenuController);
+    Stimulus.register("modal", ModalController);
+    Stimulus.register("marker", MarkerController);
+    Stimulus.register("biblio", BiblioController);
+    Stimulus.register("tabs", TabsController);
+    Stimulus.register("layer", LayerController);
+}

webgis/js/package.json

@@ -5,10 +5,14 @@
   "author": "Nicolò P.",
   "license": "GPLv3",
   "dependencies": {
+    "@hotwired/stimulus": "^3.2.2",
     "@kalisio/leaflet-graphicscale": "^1.0.0",
+    "@photo-sphere-viewer/core": "^5.11.1",
     "bulma": "^1.0.1",
     "fontawesome-free": "^1.0.4",
     "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3",
+    "proj4": "^2.9.4",
     "spotlight.js": "^0.7.8"
   },
   "devDependencies": {}