Update index pages + add layers

index.html

@@ -23,6 +23,7 @@
         </div>
         <hr class="navbar-divider">
         <div class="navbar-end">
+            <a href="#progetto" class="navbar-item">Il progetto</a>
             <a href="#webgis" class="navbar-item">Il WebGIS</a>
             <a href="#riconoscimenti" class="navbar-item">Riconoscimenti</a>
             <a href="#credits" class="navbar-item">Credits</a>
@@ -40,6 +41,25 @@
         <div class="columns">
             <div class="column"></div>
                 <div class="column is-two-thirds is-size-5">
+                <section class="section pb-1">
+                    <a id="progetto"></a>
+                    <h3 class="has-text-centered">Il progetto</h3> 
+                    <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>
                 <section class="section">
                     <a id="webgis"></a>
                     <h3 class="has-text-centered">Il WebGIS</h3> 

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

@@ -14,8 +14,13 @@
 <body>
     <nav class="navbar mb-2" 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,15 +30,16 @@
             </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" id="nav-menu">
             <button class="navbar-item button is-size-5 is-white" role="button" id="siti">
-                <i class="fa fa-list mr-2"></i> Beni archeologici
+                Beni archeologici
             </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" role="button" id="non-conserv">
-                <i class="fa fa-info-circle mr-2"></i> Progetto
+                Beni non conservati
+            </button>
+            <button class="navbar-item button is-size-5 is-white" role="button" id="rinvenimenti">
+                Rinvenimenti
             </button>
-        </div>
-        <div class="navbar-end">
         </div>
     </nav>
     <!-- TODO Loader -->
@@ -57,6 +63,9 @@
                         <a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
                             Villa di Gradola
                         </a>
+                        <a class="is-block button" title="Vai al sito Villa di Gradola" id="grotta_azzurra">
+                            Grotta Azzurra
+                        </a>
                         <a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
                             Villa di Damecuta
                         </a>
@@ -75,6 +84,9 @@
                         <a class="button" id="san_michele">
                             Villa San Michele
                         </a>
+                        <a class="button" id="scala_fenicia">
+                            Scala Fenicia
+                        </a>
                     </li>
                 </ul>
                 <p class="menu-label">
@@ -144,37 +156,5 @@
         </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/NotConservedSheet.js

@@ -66,7 +66,6 @@ export class NotConservedSheet {
 
                 this.biblioElements.push(`
                     <div class="p-2" id="ref-${record.id}">
-                        <p><strong>Riferimento</strong></p>
                         <p>${record.reference}</p>
                     </div>
                     `
@@ -78,7 +77,10 @@ export class NotConservedSheet {
     }
 
     getReference(id) {
-        return this.biblioElements.find(ref => ref.includes(`ref-${id}`));
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
     }
 
     async fetchData(url) {

webgis/js/gis.js

@@ -37,6 +37,13 @@ const optionsSiti = {
     fillColor: '#800040',
     fillOpacity: 0.8
 };
+const optionsGrotta = {
+    color: '#205dac',
+    opacity: 1,
+    weight: 1.5,
+    fillColor: '#205dac',
+    fillOpacity: 0.8
+}
 const optionsPaesistici = {
     color: '#222',
     opacity: 1,
@@ -61,6 +68,8 @@ const MARKER_NAMES = {
         'tiberio' : 'Bagni di Tiberio',
         'mura' : 'Mura greche',
         'san_michele' : 'Villa San Michele',
+        'scala_fenicia' : 'Scala Fenicia',
+        'grotta_azzurra' : 'Grotta Azzurra',
     },
 };
 
@@ -254,6 +263,8 @@ GIS.initLayers = async function(map) {
     let layerSanMichele = await this.loadLayer('san_michele.geojson', optionsSiti, false);
     let layerDamecuta = await this.loadLayer('damecuta.geojson', optionsSiti, false);
     let layerTiberio = await this.loadLayer('tiberio.geojson', optionsSiti, false);
+    let layerScala = await this.loadLayer('scala_fenicia.geojson', optionsSiti, false);
+    let layerGrotta = await this.loadLayer('grotta_azzurra.geojson', optionsGrotta, false);
 
     layerMater.id = 'matermania';
     layerMaterArea.id = 'matermania_area';
@@ -265,6 +276,8 @@ GIS.initLayers = async function(map) {
     layerSanMichele.id = 'san_michele';
     layerDamecuta.id = 'damecuta';
     layerTiberio.id = 'tiberio';
+    layerScala.id = 'scala_fenicia';
+    layerGrotta.id = 'grotta_azzurra';
 
     let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxNativeZoom : 22,
@@ -294,6 +307,8 @@ GIS.initLayers = async function(map) {
         layerSanMichele,
         layerDamecuta,
         layerTiberio,
+        layerScala,
+        layerGrotta,
     ]);
     const baseGroup = new L.LayerGroup([osmap]);
     baseGroup.addTo(map);

webgis/js/index.js

@@ -13,5 +13,4 @@ document.addEventListener('DOMContentLoaded', async () => {
     UI.toggleMenu('siti');
     UI.toggleBurger('navbar-burger');
     UI.sitesMenu('.menu-list', map, sites);
-    UI.projectInfo('#project-info');
 });

webgis/js/ui.js

@@ -82,11 +82,21 @@ UI.toggleMenu = function (triggerId) {
 UI.openSiteModal = async function (data, selector) {
 	const modal = document.querySelector(selector);
 	const tabs = modal.querySelector('.tabs > ul');
+	let dataTabs = modal.querySelectorAll('.data-tabs');
+	
+	// Reset data tabs content
+	for (let tab of dataTabs) {
+		tab.innerHTML = '';
+	}
+	//tabs.classList.remove('is-hidden');
 
 	let siteSheet = new SiteSheet();
 	siteSheet.siteData = data;
+
 	modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort();
-	modal.querySelector('#site-sheet').innerHTML = siteSheet.render();
+	if (data.description) {
+		modal.querySelector('#site-sheet').innerHTML = siteSheet.render();
+	}
 
 	let images = modal.querySelector('#photos');
 
@@ -101,8 +111,8 @@ UI.openSiteModal = async function (data, selector) {
 
 	if (images.innerHTML.length === 0) {
 		let siteSurveys = new SiteSurveys;
-		siteSurveys.siteData = surveys.length !== 0 ? surveys[0] : undefined;
+		siteSurveys.siteData = surveys[0] ?? undefined;
-		images.innerHTML += surveys ? siteSurveys.render() : '';
+		images.innerHTML += surveys[0] ? siteSurveys.render() : '';
 
 		let sitePhotos = new SitePhotos;
 		sitePhotos.siteData = photos[0] ?? undefined;
@@ -110,7 +120,6 @@ UI.openSiteModal = async function (data, selector) {
 	}
 
 	// Move to Stimulus?
-	let dataTabs = modal.querySelectorAll('.data-tabs');
 	// TODO Awful!!!
 	tabs.childNodes.forEach(node => {
 		if (node.nodeName === 'LI') {
@@ -157,7 +166,12 @@ UI.openNotConserModal = async function (data, selector) {
 	modal.addEventListener('click', event => {
 		const biblio = document.querySelector('#biblio');
 		if (event.target.id.includes('cit')) {
+
+			// DEBUG
+			console.log(event.target.id);
+
 			const id = event.target.id.replace('cit-','');
+
 			biblio.innerHTML = '<button class="delete"></button>';
 			biblio.innerHTML += sheet.getReference(id);
 			biblio.classList.remove('is-hidden');
@@ -178,25 +192,6 @@ UI.openNotConserModal = async function (data, selector) {
 	modalBg.addEventListener('click', () => closeModal());
 
 }
-/**
- * Open a modal with project info
- * @param {string} selector The modal selector to open project info
- */
-UI.projectInfo = function (selector) {
-	const modal = document.querySelector(selector);
-
-	document.querySelector('#progetto').addEventListener('click', () => {
-		modal.classList.add('is-active');
-		const closeIcon = modal.querySelector('.delete');
-		const modalBg = modal.querySelector('.modal-background');
-		const closeBtn = modal.querySelector('.buttons > .button');
-		const closeModal = () => modal.classList.remove('is-active');
-		// Close modal when clicking either on the X button or on the background
-		closeBtn.addEventListener('click', () => closeModal());
-		closeIcon.addEventListener('click', () => closeModal());
-		modalBg.addEventListener('click', () => closeModal());
-	});
-}
 /**
  * @param {string} menuListSel Menu list selector
  * @param {L.Map} map