Temp search form

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="/webgis/" class="navbar-item">WebGIS</a>
-            <a href="#riconoscimenti" class="navbar-item">Riconoscimenti</a>
+            <a class="navbar-item" href="https://cultura.gov.it/" title="Ministero della Cultura">
-            <a href="#credits" class="navbar-item">Credits</a>
+                <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>
+        <h1 class="mt-6 title has-text-centered">La Carta Archeologica dell'Isola di Capri</h1>
-        <h2 class="subtitle has-text-centered">Carta archeologica</h2>
         <div class="columns">
             <div class="column"></div>
-                <div class="column is-two-thirds is-size-5">
+            <div class="column is-three-quarters is-size-5">
-                <section class="section">
+                <section class="section pb-1 has-text-centered">
-                    <a id="webgis"></a>
+                    La carta archeologica di Capri è frutto di un lavoro condiviso tra il <a href="https://ispc.cnr.it">CNR–ISPC</a>,
-                    <h3 class="has-text-centered">Il WebGIS</h3> 
+                    la <a href="https://sabapmetropolitanana.cultura.gov.it/">Soprintendenza Archeologia Belle Arti e Paesaggio per l'Area Metropolitana di Napoli</a>,
-                    <p>
+                    i Comuni di Capri e Anacapri e l’Associazione Culturale Apragopolis.
-                        Il WebGIS è una tipologia di mappa georeferenziata interattiva presentata 
+                    Il <a href="/webgis/">WebGis</a>, creato appositamente per una consultazione facile e interattiva, contiene gli elaborati dei rilievi
-                        tramite il Web, quindi fruibile attraverso un qualsiasi browser moderno.
+                    archeologici svolti, le ricerche archivistiche e bibliografiche sui beni archeologici oggi visibili e su quelli
-                    </p>
+                    non più esistenti, la raccolta della cartografia storica, contenuti multimediali e immagini storiche.
-                    <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>
                 </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>
+    <script type="text/javascript" defer>
-    const year = new Date().getFullYear();
+        const year = new Date().getFullYear();
-    document.getElementById('c-year').innerText = year;
+        document.getElementById('c-year').innerText = year;
-</script>
+    </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>
+<body data-controller="menu modal"
-    <nav class="navbar mb-2" role="navigation">
+    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">
+            <a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
-                WebGIS Isola di Capri
+                <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,370 @@
             </a>
         </div>
         <hr class="navbar-divider">
-        <div class="navbar-menu ml-3 container is-align-items-center is-justify-content-center" id="nav-menu">
+        <div class="navbar-end pb-1 pt-1" id="nav-menu">
-            <button class="navbar-item button is-size-5 is-white" role="button" id="siti">
+            <button class="navbar-item button is-size-5 is-white mr-3" role="button"
-                <i class="fa fa-list mr-2"></i> Beni archeologici
+                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">
+            <button class="navbar-item button is-size-5 is-white mr-3" role="button"
-                <i class="fa fa-info-circle mr-2"></i> Progetto
+                data-id="cartography"
+                data-action="menu#toggleMenu">
+                <span class="icon mr-2">
+                    <i class="fa fa-map"></i>
+                </span>
+                Catasto storico
+            </button>
+            <button class="button is-white mr-2 mt-1" title="Cerca"
+                data-id="search"
+                data-action="modal#open">
+                <span class="icon">
+                    <i class="fa fa-search"></i>
+                </span>
+            </button>
+            <button class="button is-outlined is-rounded mr-4 mt-1" id="howto" title="Istruzioni">
+                <span class="icon has-text-black">
+                    <i class="fas fa-question"></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">
+        <div class="column mb-0 pb-0 is-full is-relative">
-            <aside class="menu ml-4">
+            <div class="pb-0 is-relative" id="map" aria-describedby="map-progress" aria-busy="true">
-                <p class="menu-label">
+                <progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
-                    Beni archeologici
+            </div>
-                <button title="Chiudi menu" class="button is-small is-pulled-right" id="close-menu">
+        </div>
-                    <span class="icon is-small">
+        <div class="menu-overlay column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter"
-                      <i class="fa fa-chevron-left"></i>
+            data-menu-target="menu" data-controller="layer">
-                    </span>
+            <!-- Template to build menu items dynamically -->
-                </button>
+            <template id="menu-item-template">
-                </p>
-                <ul class="menu-list">
                     <li>
-                        <a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
+                    <a class="is-block button"
-                            Villa di Gradola
+                    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="reuse">
+                     <span class="icon pl-1 mr-2 is-small" data-layer-target="reuse" 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/reimpiego_menu.png"/>
+                    </span>
+                    <span role="button" data-action="click->menu#toggle" data-id="reuse">
+                        Reimpiego
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="reuse"></i>
+                        </span>
+                    </span>
+                </p>
+                <ul class="menu-list is-hidden" id="reuse-list" data-menu-target="list" data-controller="marker">
+                    <li data-list-id="reuse-capri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="reuse-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">
+                    </li>
-                            Villa di Damecuta
+                    <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">
+                    </li>
-                            Grotta di Matermania
+                    <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">
+                    </li>
-                            Grotta dell'Arsenale
+                    <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">
+                    </li>
-                            Bagni di Tiberio
+                    <li>
-                        </a>
+                        <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5649884 14.1940185">
-                        <a class="button" id="mura">
+                            Punta dell’Arcera - relitto con carico
-                            Mura greche
-                        </a>
-                        <a class="button" id="san_michele">
-                            Villa San Michele
                         </a>
                     </li>
                 </ul>
             </aside>
         </div>
-        <div class="column is-full">
+        <div class="menu-overlay column is-hidden is-3 is-3-desktop is-4-mobile is-pulled-right is-overlay has-background-white-ter"
-            <div id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;">
+            data-menu-target="cartography">
-                <progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
+            <!-- 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>
+            </aside>
+        </div>
+    <!-- Search modal -->
+    <div class="modal" id="search" data-modal-target="modal">
+        <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
+        <div class="modal-content has-background-white pt-4 mr-4 ml-4 pl-4 pr-4" style="min-height: 400px;">
+            <h1 class="is-size-4 has-text-centered">Ricerca</h1>
+            <div class="field">
+                <label class="label">Testo libero</label>
+                <div class="control is-full-width">
+                    <input class="input" type="text" placeholder="Inserire parole chiave">
+                </div>
+            </div>
+            <div class="columns mt-5 pt-3">
+                <div class="field column">
+                    <label class="label">Categoria sito</label>
+                    <div class="control">
+                        <div class="select">
+                            <select>
+                                <option default>-- Scegliere la categoria del sito --</option>
+                                <option>Sito conservato</option>
+                                <option>Sito non conservato</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="field column">
+                    <label class="label">Categoria reperto</label>
+                    <div class="control">
+                        <div class="select">
+                            <select>
+                                <option default>-- Scegliere la categoria del reperto --</option>
+                                <option>Scultura</option>
+                                <option>Epigrafe</option>
+                                <option>Elemento architettonico</option>
+                                <option>Decorazione parietale</option>
+                                <option>Pavimentazione</option>
+                                <option>Arredo</option>
+                                <option>Abbigliamento e ornamenti personali</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="field column">
+                    <label class="label">Tecnica muraria</label>
+                    <div class="control">
+                        <div class="select">
+                            <select>
+                                <option default>-- Scegliere tecnica --</option>
+                                <option>Opera poligonale</option>
+                                <option>Opera incerta</option>
+                                <option>Opera reticolata</option>
+                                <option>Opera laterizia</option>
+                                <option>Opera mista</option>
+                                <option>Opera cementizia</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="field is-grouped mt-5 has-text-right">
+                <div class="control">
+                    <button class="button is-link">
+                        <span>Cerca</span>
+                        <span class="icon is-small">
+                            <i class="fa fa-search"></i>
+                        </span>
+                    </button>
+                </div>
+                <div class="control">
+                    <button class="button is-link is-light">
+                        <span>Cancella filtri</span>
+                        <span class="icon is-small">
+                            <i class="fa fa-times"></i>
+                        </span>
+                    </button>
+                </div>
             </div>
         </div>
     </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" id="site-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
-        <div class="modal-background"></div>
+        <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
-        <div class="modal-content has-background-white" style="min-height: 95vh;">
+        <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 +417,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 +425,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 +433,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 +443,175 @@
                     </li>
                 </ul>
             </div>
-            <div class="data-tabs" id="short-sheet"></div>
+            <div class="data-tabs" id="short-sheet" data-tabs-target="content"></div>
-            <div class="data-tabs is-hidden" id="site-sheet"></div>
+            <div class="data-tabs is-hidden" id="site-sheet" data-tabs-target="content"></div>
-            <div class="data-tabs is-hidden" id="photos"></div>
+            <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
-            <div class="data-tabs is-hidden" id="documents"></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 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-underwater-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="underwater-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>
+    <!-- Reuse modal -->
+    <div class="modal" id="reuse-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-reuse-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="reuse-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>
+    <!-- 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 class="modal-content has-background-white">
-            <div id="not-conser-sheet"></div>
+            <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,80 @@
+import Utils from "./utils.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> ${Utils.parseMarkers(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>
+                ${Utils.parseMarkers(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>`;
+    }
+    /**
+     * @param {HTMLElement} imageContainer
+     * @param {Function} gallery
+     */
+    async setImages(imageContainer, gallery) {
+        if (this._data.images?.length) {
+            imageContainer.innerHTML = Utils.renderImages('finding-gallery', this._data.images);
+            gallery('finding-gallery', this._data.images);
+        } else
+            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
+    }
+    /**
+     * @param {number} recordId 
+     */
+    async biblio(recordId) {
+        let {citations, biblioElements} = await Utils.buildBibliography('finding', recordId);
+        this.biblioElements = biblioElements;
+
+        return citations;
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
+    }
+}

webgis/js/components/NotConserved.js

@@ -0,0 +1,83 @@
+import Utils from "./utils.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> ${Utils.parseMarkers(this._data.genericLocation)}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione</strong></br>
+                ${Utils.parseMarkers(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>`;
+    }
+
+    /**
+     * @param {HTMLElement} imageContainer
+     * @param {Function} gallery
+     */
+    setImages(imageContainer, gallery) {
+        if (this._data.images?.length) {
+            imageContainer.innerHTML = Utils.renderImages('not-conserved-gallery', this._data.images);
+            gallery('not-conserved-gallery', this._data.images);
+        } else
+            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
+    }
+
+    async renderDocs() {
+        return await Utils.generateDocsTable(this._data, 'not_conserved');
+    }
+
+    async biblio(recordId) {
+        let {citations, biblioElements} = await Utils.buildBibliography('not_conserved', recordId);
+        this.biblioElements = biblioElements;
+
+        return citations;
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
+    }
+}

webgis/js/components/NotConservedSheet.js

@@ -1,70 +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">
-                <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,87 @@
+import Utils from "./utils.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> ${Utils.parseMarkers(this._data.genericPlace)}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione breve</strong></br>
+                ${Utils.parseMarkers(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>
+        */
+    }
+
+    /**
+     * @param {HTMLElement} imageContainer
+     * @param {Function} gallery
+     */
+    async setImages(imageContainer, gallery) {
+        if (this._data.images?.length) {
+            imageContainer.innerHTML = Utils.renderImages('prehist-gallery', this._data.images);
+            gallery('prehist-gallery', this._data.images);
+        } else
+            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
+    }
+    /**
+     * @param {number} recordId 
+     */
+    async biblio(recordId) {
+        let {citations, biblioElements} = await Utils.buildBibliography('prehistoric', recordId);
+        this.biblioElements = biblioElements;
+
+        return citations;
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
+    }
+}

webgis/js/components/Reuse.js

@@ -0,0 +1,81 @@
+import Utils from "./utils.js";
+/**
+ * @class Reuse
+ */
+export class Reuse {
+    biblioElements = [];
+    images = null;
+    
+    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>Materia:</strong> ${this._data.material}
+            </p>
+            <p class="p-2">
+                <strong>Misure:</strong> ${this._data.measurements}
+            </p>
+            <p class="p-2">
+                <strong>Luogo di conservazione:</strong> ${this._data.conservationPlace}
+            </p>
+            <p class="p-2">
+                <strong>Stato di conservazione:</strong> ${this._data.conservationState}
+            </p>
+            <p class="p-2">
+                <strong>Luogo e anno rinvenimento:</strong> ${Utils.parseMarkers(this._data.finding)}
+            </p>
+            <p class="p-2">
+                <strong>Datazione:</strong> ${this._data.dating}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione</strong></br>
+                ${Utils.parseMarkers(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>`;
+    }
+    /**
+     * @param {HTMLElement} imageContainer
+     * @param {Function} gallery
+     */
+    async setImages(imageContainer, gallery) {
+        if (this._data.images?.length) {
+            imageContainer.innerHTML = Utils.renderImages('reuse-gallery', this._data.images);
+            gallery('reuse-gallery', this._data.images);
+        } else
+            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
+    }
+    /**
+     * @param {Number} recordId 
+     */
+    async biblio(recordId) {
+        let {citations, biblioElements} = await Utils.buildBibliography('reuse', recordId);
+        this.biblioElements = biblioElements;
+
+        return citations;
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
+    }
+}
+

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}">
+				<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>
-			`;
-		}
-		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}">
                     <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,63 @@
+/**
+ * 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>
+		`;
+    }
+
+	renderReconstructions() {
+		return `
+			<div class="content has-text-centered mb-5 pb-5">
+				<p class="is-size-5 mt-3">Ricostruzioni 3D</p>
+				<div style="max-width: 70%; margin: 0 auto">
+					<p class="is-size-6 has-text-centered">Gallery ricostruzioni 3D</p>
+					<figure class="is-relative is-clickable has-text-centered" id="gallery-3d">
+						<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>
+		`;
+	}
+}

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

@@ -1,16 +1,24 @@
+import Utils from "./utils.js";
 /**
  * Component to render data for site sheet
  * @class SiteSheet
  */
 export class SiteSheet {
+    biblioElements = [];
     /**
      * @param {object} data
      */
     set siteData(data) {
         this._siteData = data;
     }
-
+    /**
+     * @todo Refactor!
+     * @returns {string} HTML
+     */
     render() {
+        const description = Utils.parseMarkers(this._siteData.description);
+        const localization = Utils.parseMarkers(this._siteData.localization);
+
         return `<div class="container has-bottom-border">
             <table class="table is-fullwidth is-striped">
                 <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Identificazione</th></tr>
@@ -20,7 +28,7 @@ export class SiteSheet {
                 <tr><th>Comune</th><td>${this._siteData.municipality}</td></tr>
                 <tr><th>Indirizzo</th><td>${this._siteData.address}</td></tr>
                 <tr><th>Località</th><td>${this._siteData.place}</td></tr>
-                <tr><th>Localizzazione</th><td>${this._siteData.localization}</td></tr>
+                <tr><th>Localizzazione</th><td>${localization}</td></tr>
                 <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Cronologia</th></tr>
                 <tr><th>Periodo</th><td>${this._siteData.period}</td></tr>
                 <tr><th>Fase</th><td>${this._siteData.phase}</td></tr>
@@ -28,19 +36,34 @@ 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>Modalità e anno di ritrovamento</th><td>${Utils.parseMarkers(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><th>Luogo custodia materiali</th><td>${Utils.parseMarkers(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><td class="pr-6 pl-6 pt-3" colspan="2">${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() {
+        const shortDesc = Utils.parseMarkers(this._siteData.shortDescription);
+
         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>
@@ -60,8 +83,50 @@ export class SiteSheet {
                 <strong>Località generica:</strong> ${this._siteData.genericPlace}
             </p>
             <p class="mt-4 pl-2 pr-5">
-                ${this._siteData.shortDescription}
+                ${shortDesc}
+            </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">
+		return `
-			<p class="is-size-5 mt-3">Elaborazioni CNR da rilievi</p>`;
+			<div class="has-text-centered mb-5 pb-5">
-		content += `
+				<p class="is-size-5 mt-3 mb-3">Rilievi, disegni ed elaborazioni grafiche</p>
-			<div style="max-width: 70%; margin: 0 auto">
+				<div style="max-width: 70%; margin: 0 auto">
-				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
+					<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">
+					<figure class="is-relative has-text-centered is-clickable" id="gallery-1">
-					<img src="img/${this._siteData.filename}" width="300"/>
+						<img src="img/${this._siteData.filename}" width="300"/>
-					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
+						<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>
+							<i class="is-flex fa fa-2x fa-play-circle"></i>
-					</div>
+						</div>
-				</figure>
+					</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,53 @@
+import Utils from "./utils.js";
+/**
+ * @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>
+                ${Utils.parseMarkers(this._data.shortDescription)}
+            </p>
+            <p class="p-2 mb-4">
+                <strong>Autore scheda:</strong> ${this._data.author}
+            </p>
+        </div>`;
+    }
+    /**
+     * @param {HTMLElement} imageContainer
+     * @param {Function} gallery
+     */
+    setImages(imageContainer, gallery) {
+        if (this._data.images?.length) {
+            imageContainer.innerHTML = Utils.renderImages('underwater-gallery', this._data.images);
+            gallery('underwater-gallery', this._data.images);
+        } else
+            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
+    }
+
+    async renderDocs() {
+        return await Utils.generateDocsTable(this._data, 'underwater');
+    }
+}

webgis/js/components/utils.js

@@ -0,0 +1,175 @@
+import { GisState } from "../state.js";
+/**
+ * @namespace Utils
+ */
+const Utils = {};
+
+/**
+ * 
+ * @param {string} galleryId The image gallery's id
+ * @param {Object} imagesData
+ * @returns {string}
+ */
+Utils.renderImages = function (galleryId, imagesData) {
+    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="${galleryId}">
+                <img src="img/${imagesData[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 {Object} imagesData
+ * @param {HTMLElement} imageContainer
+ * @param {Function} galleryGenerator The function that creates the image gallery
+ * @param {string} galleryId The image gallery's id
+ */
+Utils.setImages = function(imagesData, imageContainer, galleryGenerator, galleryId) {
+    imageContainer.innerHTML = Utils.renderImages(galleryId);
+    galleryGenerator(galleryId, imagesData);
+}
+
+/**
+ * 
+ * @param {Object} data The component's data
+ * @param {String} resourceUri The resource URI to be used for API calls
+ * @returns {String} The table HTML
+ */
+Utils.generateDocsTable = async function(data, resourceUri) {
+    let record = await Utils.fetchData(`${GisState.apiUrl}/${resourceUri}/${data.id}`);
+
+    // TODO Horrible??
+    if (record instanceof Error) return '<p class="has-text-centered">Nessun documento disponibile.</p>';
+
+    const documentation = record.documents.filter(d => d.type === 'documentazione')
+    const 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 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 (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 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 (publications.length === 0 && documentation.length === 0) {
+        content = '<p class="has-text-centered">Nessun documento disponibile.</p>';
+    }
+
+    return content;
+}
+
+/**
+ * 
+ * @param {String} recordUri The record URI used for API calls 
+ * @param {Number} recordId This record's ID
+ * @returns {{citations:String,biblioElements:String[]}}
+ */
+Utils.buildBibliography = async function(recordUri, recordId) {
+    let record = await Utils.fetchData(`${GisState.apiUrl}/${recordUri}/${recordId}`);
+    let biblioElements = [];
+
+    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};` : ';';
+            
+            biblioElements.push(`
+                <div class="p-2 mt-2" id="ref-${record.id}">
+                    <p class="p-3">${record.reference}</p>
+                </div>
+                `
+            );
+        });
+    }
+
+    const bibliography = {
+        citations: citations.trim().slice(0, -1),
+        biblioElements
+    }
+
+    return bibliography;
+}
+
+/**
+ * Parse marker strings (pseudo-shortcodes) and convert them
+ * to Stimulus links
+ * @param {String} text - The content text from database
+ */
+Utils.parseMarkers = function(text) {
+    const regex = /(?<marker>\[marker coords=\"(?<coords>[\d\s\.]+)\"\ ?(group=\"(?<group>\w+)\")?](?<content>[\s\S]+?)\[\/marker\])/mig;
+    
+    if (!text) return text;
+
+    let matches = [...text.matchAll(regex)];
+
+    if (matches.length) {
+        matches.forEach(match => {
+            const replacement = `<a class="has-text-link" data-action="marker#go modal#close tabs#reset marker#goAndOpen" data-controller="marker"
+                data-marker-coords-value="${match.groups.coords}"
+                data-marker-group-value="${match.groups.group}">${match.groups.content.trim()}</a>`;
+            text = text.replace(match.groups.marker, replacement.trim());
+        });
+    }
+
+    return text;
+}
+
+Utils.fetchData = async function(url) {
+    return await fetch(url).then(res => res.ok ? res.json() : new Error())
+        .catch(err => console.log(err));
+}
+
+export default Utils;

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,89 @@
+import { Controller } from "@hotwired/stimulus";
+import { GisState, getMarkerByCoords } from "../state.js";
+import UI from "../ui.js";
+
+export default class extends Controller {
+    static values = {
+        'coords': String,
+        'group': String,
+        'id': String,
+    };
+    
+    uiModals = {
+        sites: '#site-data',
+        notConserved: '#not-conser-data',
+        finding: '#finding-data',
+        prehist: '#prehist-data',
+        reuse: '#reuse-data',
+    };
+
+    END_ZOOM = 19;
+
+    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();
+
+        return marker;
+    }
+    /**
+     * Go to a marker location on the map
+     * and open its modal
+     */
+    goAndOpen() {
+        const marker = this.go();
+        const selector = this.uiModals[this.groupValue];
+        const data = marker.options.data;
+
+        switch(this.groupValue) {
+            case 'sites':
+                UI.openSiteModal(data, selector);
+                break;
+            case 'notConserved':
+                UI.openNotConserModal(data, selector);
+                break;
+            case 'finding':
+                UI.openFindingModal(data, selector);
+                break;
+            case 'prehist':
+                UI.openPrehistModal(data, selector);
+                break;
+            case 'reuse':
+                UI.openReuseModal(data, selector);
+                break;
+            default:
+                console.log('Cannot open modal...');
+                break;
+        }
+    }
+    /**
+     * @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;
+    }
+}