Update home + site docs

index.html

@@ -4,6 +4,7 @@
     <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">
     {
@@ -80,12 +81,15 @@
                         </button>
                     </div>
                 </div>
-                <div class="column card has-text-centered mb-5">
+                <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">
-                        <a href="" class="button is-link is-large mt-3 has-text-white">Cartografia storica</a>
+                        <button class="button is-link is-large mt-3 has-text-white">
+                            Cartografia storica
+                        </button>
                     </div>
                 </div>
             </div>
@@ -184,6 +188,90 @@
             </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">
@@ -290,9 +378,32 @@
     <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/js/components/SiteDocuments.js

@@ -20,6 +20,9 @@ export class SiteDocuments {
 
         let content = `
             <div class="has-bottom-border">
+                <p class="p-2 has-text-centered mt-3 mb-3">
+                    ${this._siteData.documentation}
+                </p>
                 <div class="p-2">
                     <table class="p-4 table is-fullwidth is-striped">
                         <thead>

webgis/js/ui.js

@@ -6,7 +6,6 @@ import { SiteDocuments } from './components/SiteDocuments.js';
 import { SiteSurveys } from './components/SiteSurveys.js';
 import { SiteMedia } from './components/SiteMedia.js';
 import { NotConservedSheet } from './components/NotConservedSheet.js';
-import GIS from './gis.js';
 import { Finding } from './components/Finding.js';
 
 /**