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

Compare commits

base: nicolo:07f8dd9a8633f09513970ca378a044513c197613
Branches Tags
nicolo:master
..
compare: nicolo:4ea00e95556fc09ae6143b300ca84ef9d5892455
Branches Tags
nicolo:master

No commits in common. "07f8dd9a8633f09513970ca378a044513c197613" and "4ea00e95556fc09ae6143b300ca84ef9d5892455" have entirely different histories.
07f8dd9a86 ... 4ea00e9555

19 changed files with 141 additions and 283 deletions
Show Stats Expand all files Collapse all files

6
css/app.css
View File

@ -120,13 +120,9 @@ a:visited {
.modal {
z-index: 1000;
}
.modal-content,
.modal-card {
.modal-content {
width: 60vw;
}
.modal-card {
min-height: 95vh;
}
.has-bottom-border {
border-bottom: 1px #aaa solid;
}

BIN
img/cartografia.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
img/credits.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 48 KiB

BIN
img/logo direzione generale ricerca.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
img/logo porto turistico.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
img/logo-soprintendenza-abap-area-metropolitana-napoli-bianco-e1680166536285.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

4
img/logo-soprintendenza-abap-area-metropolitana-napoli-bianco-e1680166536285.webp:Zone.Identifier
View File

@ -1,4 +0,0 @@
[ZoneTransfer]
ZoneId=3
ReferrerUrl=https://sabapmetropolitanana.cultura.gov.it/
HostUrl=https://sabapmetropolitanana.cultura.gov.it/wp-content/uploads/2024/06/logo-soprintendenza-abap-area-metropolitana-napoli-bianco-e1680166536285.webp

BIN
img/progetto.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
img/pubblicazioni.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
img/riconoscimenti.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
img/webgis.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 49 KiB

BIN
img/webgis.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

246
index.html
View File

@ -4,15 +4,8 @@
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/app.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 data-controller="modal">
<body>
<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">
@ -30,7 +23,10 @@
</div>
<hr class="navbar-divider">
<div class="navbar-end">
<a href="/webgis/" class="navbar-item">WebGIS</a>
<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>
<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>
@ -52,82 +48,58 @@
archeologici svolti, le ricerche archivistiche e bibliografiche sui beni archeologici oggi visibili e su quelli
non più esistenti, la raccolta della cartografia storica, contenuti multimediali e immagini storiche.
</section>
</div>
<div class="column"></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">
<div class="columns mt-5 has-background-light is-fullwidth">
<div class="column has-text-centered is-one-third has-background-light">
<img class="image" src="img/progetto.jpg" />
<a href="" class="button is-link mt-3 is-large has-text-white">
Il progetto
</button>
</a>
</div>
<div class="column has-text-centered">
<a href="webgis/">
<img class="image" src="img/webgis.webp" />
</a>
<a href="webgis/" class="button is-link mt-3 is-large has-text-white">Accedi al WebGIS</a>
</div>
<div class="column card has-text-centered is-clickable"
data-id="webgis" data-action="click->modal#homeOpen">
<div class="column card">
<div class="card-image">
<img src="img/webgis.jpg" />
<img class="image" src="" />
</div>
<div class="card-content">
<button class="button is-link mt-3 is-large has-text-white">
Il WebGIS
</button>
<div class="card-content has-text-centered">
<a href="" class="button is-link is-large has-text-white">Cartografia storica</a>
</div>
</div>
<div class="column card has-text-centered mb-5">
</div>
<div class="columns">
<div class="column is-one-third card">
<div class="card-image">
<img src="img/cartografia.jpg" />
<img class="image" src="" />
</div>
<div class="card-content">
<a href="" class="button is-link is-large mt-3 has-text-white">Cartografia storica</a>
<div class="card-content has-text-centered">
<a href="" class="button is-link is-large has-text-white">Pubblicazioni</a>
</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">
<div class="column card">
<div class="card-image">
<img src="img/pubblicazioni.jpg" />
<img class="image" src="img/credits.webp" />
</div>
<div class="card-content">
<a href="" class="button is-link is-large mt-3 has-text-white">Pubblicazioni</a>
<div class="card-content has-text-centered">
<a href="" class="button is-link is-large has-text-white">Credits</a>
</div>
</div>
<div class="column card has-text-centered is-clickable"
data-id="credits" data-action="click->modal#homeOpen">
<div class="column card">
<div class="card-image">
<img src="img/credits.jpg" />
<img class="image" src="img/riconoscimenti.webp" />
</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 class="card-content has-text-centered">
<a href="" class="button is-link is-large has-text-white">Riconoscimenti</a>
</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">
<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>
@ -144,18 +116,9 @@
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">
<section class="section">
<a id="webgis"></a>
<h3 class="has-text-centered">Il WebGIS</h3>
<p>
Il WebGIS è una tipologia di mappa georeferenziata interattiva presentata
tramite il Web, quindi fruibile attraverso un qualsiasi browser moderno.
@ -169,113 +132,39 @@
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
<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>
<p class="has-text-centered">
<a href="webgis/" class="button mt-6 is-link is-large has-text-white">Accedi al WebGIS</a>
</p>
</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
<div class="card mt-6">
<a href="webgis/">
<img class="image" src="img/webgis.webp" />
</a>
</strong>
<br />
Direzione scientifica
</p>
<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>
</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>
<br />
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>
<br />
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="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 direzione generale ricerca.png">
</p>
<p class="has-text-centered mt-5">
<img src="img/logo porto turistico.png">
</p>
<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>
<footer class="modal-card-foot">
</footer>
<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>
@ -286,12 +175,5 @@
const year = new Date().getFullYear();
document.getElementById('c-year').innerText = year;
</script>
<script type="module">
import { Application } from '@hotwired/stimulus';
import ModalController from './webgis/js/controllers/modal_controller.js';
window.Stimulus = Application.start();
Stimulus.register("modal", ModalController);
</script>
</body>
</html>

BIN
webgis/img/icons/non_cons_menu.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
webgis/img/icons/non_conserv.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 27 KiB

2
webgis/js/controllers/marker_controller.js
View File

@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ['coords'];
END_ZOOM = 19;
END_ZOOM = 20;
mapAnimate = {
animate: true,
duration: 1,

18
webgis/js/controllers/modal_controller.js
View File

@ -3,24 +3,6 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ['close', 'modal'];
current(id) {
return this.modalTargets.find(m => m.getAttribute('data-id') === id);
}
homeOpen(event) {
const id = event.currentTarget.getAttribute('data-id');
const current = this.current(id);
current.classList.add('is-active');
}
homeClose(event) {
const id = event.currentTarget.getAttribute('data-id');
const current = this.current(id);
current.classList.remove('is-active');
}
open() {
this.modalTarget.classList.add('is-active');
}

21
webgis/js/gis.js
View File

@ -100,7 +100,7 @@ function capitalize(text) {
/**
* @param {string} mapId
* @param {number} zoomLevel
* @returns {Map}
* @returns {{map: Map, sites: Layer}}
*/
GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
L.LayerGroup.include({
@ -115,7 +115,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
let map = L.map(mapId, {
//attributionControl: false,
minZoom: 11,
minZoom: 2,
}).setView(this.CENTER_COORDS, zoomLevel);
map.crs = L.CRS.EPSG4326;
@ -146,12 +146,16 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
notConservedGroup.addTo(map);
findingsGroup.addTo(map);
L.control.layers(baseMap, archeo).addTo(map);
L.control.layers(
baseMap,
archeo,
).addTo(map);
// TEMP!! Remove point for Lo Pozzo...
map.removeLayer(sitesGroup.customGetLayer('lopozzo'));
return map;
// TODO Horrible?
return {map: map, sites: sitesGroup};
}
/**
* Create markers for sites
@ -160,8 +164,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
*/
GIS.sitesMarkers = async function (sitesGroup) {
let sitesMarkers = L.markerClusterGroup({
showCoverageOnHover: false,
disableClusteringAtZoom: 19,
showCoverageOnHover: false
});
for (let id in MARKER_NAMES.sites) {
@ -204,8 +207,7 @@ GIS.notConserved = async function () {
.then(data => data.json());
let notConserved = L.markerClusterGroup({
showCoverageOnHover: false,
disableClusteringAtZoom: 19,
showCoverageOnHover: false
});
for (let record of notConserData.records) {
@ -231,8 +233,7 @@ GIS.findings = async function () {
.then(data => data.json());
let findings = L.markerClusterGroup({
showCoverageOnHover: false,
disableClusteringAtZoom: 19,
showCoverageOnHover: false
});
for (let record of findingsData) {

3
webgis/js/index.js
View File

@ -12,8 +12,9 @@ document.addEventListener('DOMContentLoaded', async () => {
initStimulus();
let progress = document.querySelector('progress');
const map = await GIS.initMap('map');
const init = await GIS.initMap('map');
progress.classList.add('is-hidden');
let {map, sites} = init;
map._container.setAttribute('aria-busy', false);