Update index pages + add layers
This commit is contained in:
parent
ff379acb13
commit
4e12789a11
20
index.html
20
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>
|
||||
|
||||
14
webgis/geojson/grotta_azzurra.geojson
Normal file
14
webgis/geojson/grotta_azzurra.geojson
Normal file
File diff suppressed because one or more lines are too long
8
webgis/geojson/scala_fenicia.geojson
Normal file
8
webgis/geojson/scala_fenicia.geojson
Normal 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 ] ] ] } }
|
||||
]
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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');
|
||||
});
|
||||
|
||||
@ -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;
|
||||
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user