Compare commits

...

2 Commits

Author SHA1 Message Date
07f8dd9a86 Update home page + icons 2024-11-29 17:47:03 +01:00
1a0c5c1766 Zoom levels for clusters 2024-11-29 17:30:07 +01:00
19 changed files with 283 additions and 141 deletions

View File

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

BIN
img/cartografia.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

BIN
img/credits.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -0,0 +1,4 @@
[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 Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

BIN
img/pubblicazioni.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

BIN
img/riconoscimenti.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

BIN
img/webgis.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

View File

@ -4,8 +4,15 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="css/app.css" /> <link rel="stylesheet" href="css/app.css" />
<title>Carta Archeologica Isola di Capri</title> <title>Carta Archeologica Isola di Capri</title>
<script type="importmap">
{
"imports": {
"@hotwired/stimulus": "./webgis/js/vendor/@hotwired/stimulus/dist/stimulus.js"
}
}
</script>
</head> </head>
<body> <body data-controller="modal">
<nav class="navbar mb-2 p-3 has-bottom-border" role="navigation"> <nav class="navbar mb-2 p-3 has-bottom-border" role="navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="https://ispc.cnr.it" title="CNR-ISPC"> <a class="navbar-item" href="https://ispc.cnr.it" title="CNR-ISPC">
@ -23,10 +30,7 @@
</div> </div>
<hr class="navbar-divider"> <hr class="navbar-divider">
<div class="navbar-end"> <div class="navbar-end">
<a href="#progetto" class="navbar-item">Il progetto</a> <a href="/webgis/" class="navbar-item">WebGIS</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"> <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;" /> <img class="image" src="img/logo_anacapri.svg" style="min-height: 88px;" />
</a> </a>
@ -39,7 +43,7 @@
<h1 class="mt-6 title has-text-centered">La Carta Archeologica dell'Isola di Capri</h1> <h1 class="mt-6 title has-text-centered">La Carta Archeologica dell'Isola di Capri</h1>
<div class="columns"> <div class="columns">
<div class="column"></div> <div class="column"></div>
<div class="column is-three-quarters is-size-5"> <div class="column is-three-quarters is-size-5">
<section class="section pb-1 has-text-centered"> <section class="section pb-1 has-text-centered">
La carta archeologica di Capri è frutto di un lavoro condiviso tra il <a href="https://ispc.cnr.it">CNRISPC</a>, La carta archeologica di Capri è frutto di un lavoro condiviso tra il <a href="https://ispc.cnr.it">CNRISPC</a>,
la <a href="https://sabapmetropolitanana.cultura.gov.it/">Soprintendenza Archeologia Belle Arti e Paesaggio per l'Area Metropolitana di Napoli</a>, la <a href="https://sabapmetropolitanana.cultura.gov.it/">Soprintendenza Archeologia Belle Arti e Paesaggio per l'Area Metropolitana di Napoli</a>,
@ -48,132 +52,246 @@
archeologici svolti, le ricerche archivistiche e bibliografiche sui beni archeologici oggi visibili e su quelli 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. non più esistenti, la raccolta della cartografia storica, contenuti multimediali e immagini storiche.
</section> </section>
<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
</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">
<div class="card-image">
<img class="image" src="" />
</div>
<div class="card-content has-text-centered">
<a href="" class="button is-link is-large has-text-white">Cartografia storica</a>
</div>
</div>
</div>
<div class="columns">
<div class="column is-one-third card">
<div class="card-image">
<img class="image" src="" />
</div>
<div class="card-content has-text-centered">
<a href="" class="button is-link is-large has-text-white">Pubblicazioni</a>
</div>
</div>
<div class="column card">
<div class="card-image">
<img class="image" src="img/credits.webp" />
</div>
<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">
<div class="card-image">
<img class="image" src="img/riconoscimenti.webp" />
</div>
<div class="card-content has-text-centered">
<a href="" class="button is-link is-large has-text-white">Riconoscimenti</a>
</div>
</div>
</div>
<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 dellisola di Capri vede coinvolti, tramite appositi accordi di collaborazione e sotto la direzione scientifica della Soprintendenza Archeologia Belle Arti e Paesaggio per lArea Metropolitana di Napoli, i Comuni di Capri e di Anacapri, lIstituto di Scienze del Patrimonio Culturale (ISPC) del CNR e lAssociazione Culturale Apragopolis.
</p>
<p class="p-2 mt-2 mb-2">
Lobiettivo principale consiste nellacquisire conoscenze sulleffettiva estensione dei beni archeologici presenti sullisola, localizzarne i resti e approfondirne le funzioni e dimensioni originarie. La creazione di una mappa archeologica dellisola 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 dellevoluzione territoriale. Questa comprensione è un presupposto fondamentale per ricostruire gli eventi storici dellarea e guidare la pianificazione territoriale.
</p>
<p class="p-2 mt-2 mb-2">
Il progetto sperimenta lutilizzo di metodi innovativi di rappresentazione dei monumenti per produrre nuovi contenuti scientifici e una documentazione grafica dettagliata utile allanalisi 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">
LAssociazione Culturale Apragopolis ha condotto attività di digitalizzazione e analisi della documentazione darchivio storico e corrente (documenti amministrativi, documentazione di scavo, disegni storici, planimetrie e fotografie), unitamente a ricognizioni sul campo con il coinvolgimento di esperti per lavvio 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>
<p>
Il WebGIS è una tipologia di mappa georeferenziata interattiva presentata
tramite il Web, quindi fruibile attraverso un qualsiasi browser moderno.
</p>
<p>
Il WebGIS relativo alla Carta Archeologica dell'Isola di Capri è stato realizzato
utilizzando esclusivamente tecnologie open-source, principalmente la libreria JavaScript
<a href="https://leafletjs.com">Leaflet</a> per il rendering della mappa con
i layer (livelli) georeferenziati contenenti i punti geografici e le strutture rilevate
dal progetto, e il framework PHP <a href="https://symfony.com">Symfony</a> per lo
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
<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>
<div class="card mt-6">
<a href="webgis/">
<img class="image" src="img/webgis.webp" />
</a>
<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>
</section>
<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>
<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>
<div class="column"></div> <div class="column"></div>
</div> </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">
Il progetto
</button>
</div>
</div>
<div class="column card has-text-centered is-clickable"
data-id="webgis" data-action="click->modal#homeOpen">
<div class="card-image">
<img src="img/webgis.jpg" />
</div>
<div class="card-content">
<button class="button is-link mt-3 is-large has-text-white">
Il WebGIS
</button>
</div>
</div>
<div class="column card has-text-centered mb-5">
<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>
</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="card-image">
<img src="img/pubblicazioni.jpg" />
</div>
<div class="card-content">
<a href="" class="button is-link is-large mt-3 has-text-white">Pubblicazioni</a>
</div>
</div>
<div class="column card has-text-centered is-clickable"
data-id="credits" data-action="click->modal#homeOpen">
<div class="card-image">
<img src="img/credits.jpg" />
</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>
</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">
<p class="p-2 mt-2 mb-2">
Il progetto per la realizzazione della carta archeologica dellisola di Capri vede coinvolti, tramite appositi accordi di collaborazione e sotto la direzione scientifica della Soprintendenza Archeologia Belle Arti e Paesaggio per lArea Metropolitana di Napoli, i Comuni di Capri e di Anacapri, lIstituto di Scienze del Patrimonio Culturale (ISPC) del CNR e lAssociazione Culturale Apragopolis.
</p>
<p class="p-2 mt-2 mb-2">
Lobiettivo principale consiste nellacquisire conoscenze sulleffettiva estensione dei beni archeologici presenti sullisola, localizzarne i resti e approfondirne le funzioni e dimensioni originarie. La creazione di una mappa archeologica dellisola 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 dellevoluzione territoriale. Questa comprensione è un presupposto fondamentale per ricostruire gli eventi storici dellarea e guidare la pianificazione territoriale.
</p>
<p class="p-2 mt-2 mb-2">
Il progetto sperimenta lutilizzo di metodi innovativi di rappresentazione dei monumenti per produrre nuovi contenuti scientifici e una documentazione grafica dettagliata utile allanalisi 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">
LAssociazione Culturale Apragopolis ha condotto attività di digitalizzazione e analisi della documentazione darchivio storico e corrente (documenti amministrativi, documentazione di scavo, disegni storici, planimetrie e fotografie), unitamente a ricognizioni sul campo con il coinvolgimento di esperti per lavvio 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">
<p>
Il WebGIS è una tipologia di mappa georeferenziata interattiva presentata
tramite il Web, quindi fruibile attraverso un qualsiasi browser moderno.
</p>
<p>
Il WebGIS relativo alla Carta Archeologica dell'Isola di Capri è stato realizzato
utilizzando esclusivamente tecnologie open-source, principalmente la libreria JavaScript
<a href="https://leafletjs.com">Leaflet</a> per il rendering della mappa con
i layer (livelli) georeferenziati contenenti i punti geografici e le strutture rilevate
dal progetto, e il framework PHP <a href="https://symfony.com">Symfony</a> per lo
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
<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
</a>
</strong>
<br />
Direzione scientifica
</p>
</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 dellisola.
</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 dellisola 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>
<footer class="modal-card-foot">
</footer>
</div>
</div>
</div> </div>
<footer class="footer has-text-centered"> <footer class="footer has-text-centered">
<p>&copy; <span id="c-year"></span> CNR-ISPC Tutti i diritti riservati</p> <p>&copy; <span id="c-year"></span> CNR-ISPC Tutti i diritti riservati</p>
</footer> </footer>
<script type="text/javascript" defer> <script type="text/javascript" defer>
const year = new Date().getFullYear(); const year = new Date().getFullYear();
document.getElementById('c-year').innerText = year; document.getElementById('c-year').innerText = year;
</script> </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> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

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

View File

@ -3,6 +3,24 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller { export default class extends Controller {
static targets = ['close', 'modal']; 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() { open() {
this.modalTarget.classList.add('is-active'); this.modalTarget.classList.add('is-active');
} }

View File

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

View File

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