nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Update index pages + add layers

Browse Source
This commit is contained in:
Nicolò P 2024-11-22 17:36:28 +01:00
parent ff379acb13
commit 4e12789a11
8 changed files with 99 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -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>

14
webgis/geojson/grotta_azzurra.geojson Normal file
View File

File diff suppressed because one or more lines are too long

8
webgis/geojson/scala_fenicia.geojson Normal file
View File

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

60
webgis/index.html
View File

@ -14,8 +14,13 @@
<body>
<nav class="navbar mb-2" role="navigation">
<div class="navbar-brand">
<span class="navbar-item is-size-3">
WebGIS Isola di Capri
<a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
<span class="icon">
<i class="fa fa-home"></i>
</span>
</a>
<span class="navbar-item is-size-5">
Carta Archeologica dell'Isola di Capri - WebGIS
</span>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
<span aria-hidden="true"></span>
@ -25,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">
<i class="fa fa-info-circle mr-2"></i> Progetto
<button class="navbar-item button is-size-5 is-white" role="button" id="non-conserv">
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>

6
webgis/js/components/NotConservedSheet.js
View File

@ -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) {

15
webgis/js/gis.js
View File

@ -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);

1
webgis/js/index.js
View File

@ -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');
});

39
webgis/js/ui.js
View File

@ -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();
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;
images.innerHTML += surveys ? siteSurveys.render() : '';
siteSurveys.siteData = surveys[0] ?? undefined;
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