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

Findings (WIP) + change some UI behaviour

Browse Source
This commit is contained in:
Nicolò P 2024-11-25 12:22:35 +01:00
parent bda52fc665
commit 08711db11a
8 changed files with 131 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -5,8 +5,8 @@
*.shp* *.shp*
*.log *.log
*.zip *.zip
*.pdf
vendor/ vendor/
docs/
progetto_QGIS/ progetto_QGIS/
conf.json conf.json
shapefile shapefile

0
webgis/docs/.keep Normal file
View File

BIN
webgis/img/icons/rinvenimenti.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

17
webgis/index.html
View File

@ -21,7 +21,7 @@
<title>WebGIS Isola di Capri</title> <title>WebGIS Isola di Capri</title>
</head> </head>
<body> <body>
<nav class="navbar mb-2" role="navigation"> <nav class="navbar mb-0" role="navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page"> <a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
<span class="icon"> <span class="icon">
@ -39,7 +39,7 @@
</a> </a>
</div> </div>
<hr class="navbar-divider"> <hr class="navbar-divider">
<div class="navbar-end" id="nav-menu"> <div class="navbar-end pb-1 pt-1" id="nav-menu">
<button class="navbar-item button is-size-5 is-white" role="button" id="siti"> <button class="navbar-item button is-size-5 is-white" role="button" id="siti">
Beni archeologici Beni archeologici
</button> </button>
@ -56,7 +56,6 @@
</button> </button>
</div> </div>
</nav> </nav>
<!-- TODO Loader -->
<div class="wait-lg text-center is-hidden" style="clear: both;"> <div class="wait-lg text-center is-hidden" style="clear: both;">
<p>Loading...</p> <p>Loading...</p>
<div class="loading loading-lg"></div> <div class="loading loading-lg"></div>
@ -109,8 +108,8 @@
<ul class="menu-list" id="not-conserved"></ul> <ul class="menu-list" id="not-conserved"></ul>
</aside> </aside>
</div> </div>
<div class="column is-full is-relative"> <div class="column mb-0 pb-0 is-full is-relative">
<div id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;"> <div class="pb-0" id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;">
<progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." /> <progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
</div> </div>
</div> </div>
@ -170,6 +169,14 @@
</div> </div>
<button class="modal-close is-large" aria-label="close"></button> <button class="modal-close is-large" aria-label="close"></button>
</div> </div>
<!-- Not conserved modal -->
<div class="modal" id="finding-data">
<div class="modal-background"></div>
<div class="modal-content has-background-white" style="min-height: 95vh;">
<div id="finding-sheet"></div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Spherical photo modal --> <!-- Spherical photo modal -->
<div class="modal" id="spherical-modal"> <div class="modal" id="spherical-modal">
<div class="modal-background"></div> <div class="modal-background"></div>

48
webgis/js/components/Finding.js Normal file
View File

@ -0,0 +1,48 @@
/**
* @class Finding
*/
export class Finding {
set data(data) {
this._data = data;
}
render() {
return `
<div class="container px-4 pt-4">
<p class="p-2">
<strong>Oggetto:</strong> ${this._data.object}
</p>
<p class="p-2">
<strong>Materia:</strong> ${this._data.material}
</p>
<p class="p-2">
<strong>Misure</strong> ${this._data.measurements}
</p>
<p class="p-2">
<strong>Inventario</strong> ${this._data.inventory}
</p>
<p class="p-2">
<strong>Luogo rinvenimento</strong> ${this._data.place}
</p>
<p class="p-2">
<strong>Anno rinvenimento</strong> ${this._data.year}
</p>
<p class="p-2">
<strong>Datazione</strong> ${this._data.dating}
</p>
<p class="p-2">
<strong>Stato di conservazione</strong> ${this._data.conservationState}
</p>
<p class="p-2">
<strong>Luogo di conservazione</strong> ${this._data.conservationPlace}
</p>
<p class="mt-4 pl-2 pr-5">
<strong class="pb-3">Descrizione</strong></br>
${this._data.description}
</p>
<p class="p-2 mb-4">
<strong>Autore scheda:</strong> ${this._data.author}
</p>
</div>`;
}
}

33
webgis/js/gis.js
View File

@ -129,11 +129,13 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
let markersGroup = await this.sitesMarkers(sitesGroup); let markersGroup = await this.sitesMarkers(sitesGroup);
let notConservedGroup = await this.notConserved(); let notConservedGroup = await this.notConserved();
let findingsGroup = await this.findings();
const archeo = { const archeo = {
'Beni archeologici (punti)' : markersGroup, 'Beni archeologici (punti)' : markersGroup,
'Beni archeologici (strutture)' : sitesGroup, 'Beni archeologici (strutture)' : sitesGroup,
'Beni non conservati' : notConservedGroup, 'Beni non conservati' : notConservedGroup,
'Rinvenimenti' : findingsGroup,
'Vincoli archeologici' : layerVincoli, 'Vincoli archeologici' : layerVincoli,
'Vincoli paesistici' : layerPaesistici, 'Vincoli paesistici' : layerPaesistici,
}; };
@ -141,6 +143,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
markersGroup.addTo(map); markersGroup.addTo(map);
sitesGroup.addTo(map); sitesGroup.addTo(map);
notConservedGroup.addTo(map); notConservedGroup.addTo(map);
findingsGroup.addTo(map);
L.control.layers( L.control.layers(
baseMap, baseMap,
@ -178,8 +181,9 @@ GIS.sitesMarkers = async function (sitesGroup) {
} }
const marker = L.marker(coords, { icon: Icons.site }) const marker = L.marker(coords, { icon: Icons.site })
.bindTooltip(MARKER_NAMES.sites[id]) .bindTooltip(MARKER_NAMES.sites[id] + '<br>(Clicca per aprire scheda)');
.openTooltip();
marker.id = id;
marker.on('click', () => UI.openSiteModal(data, '#site-data')); marker.on('click', () => UI.openSiteModal(data, '#site-data'));
@ -212,6 +216,30 @@ GIS.notConserved = async function () {
return L.layerGroup(notConserved); return L.layerGroup(notConserved);
} }
/**
* Create findings group
* @returns {L.LayerGroup}
*/
GIS.findings = async function () {
let findingsData = await fetch(`${API_URL}/finding`)
.then(data => data.json());
let findings = [];
for (let record of findingsData) {
findings.push(L.marker(
record.coordinates,
{icon: Icons.finding}
).bindTooltip(record.object)
.on(
'click',
() => UI.openFindingModal(record, '#finding-data')
)
);
}
return L.layerGroup(findings);
}
/* /*
GIS._prepareLayers = async function(layer) { GIS._prepareLayers = async function(layer) {
const fromStorage = localStorage.getItem(layer.id); const fromStorage = localStorage.getItem(layer.id);
@ -254,6 +282,7 @@ GIS._prepareLayers = async function(layer) {
* @returns {{baseMap: {"OpenStreetMap": L.TileLayer}, archeo: object, sitesGroup: L.LayerGroup}} * @returns {{baseMap: {"OpenStreetMap": L.TileLayer}, archeo: object, sitesGroup: L.LayerGroup}}
*/ */
GIS.initLayers = async function(map) { GIS.initLayers = async function(map) {
// TODO Move all this to separate array / object!
let layerMater = await this.loadLayer('matermania.geojson', optionsSiti, false); let layerMater = await this.loadLayer('matermania.geojson', optionsSiti, false);
let layerMaterArea = await this.loadLayer('matermania_area.geojson', optionsSiti, false); let layerMaterArea = await this.loadLayer('matermania_area.geojson', optionsSiti, false);
let layerArsenale = await this.loadLayer('arsenale.geojson', optionsSiti, false); let layerArsenale = await this.loadLayer('arsenale.geojson', optionsSiti, false);

9
webgis/js/icons.js
View File

@ -21,6 +21,15 @@ Icons.notConserved = L.icon(
} }
); );
Icons.finding = L.icon(
{
iconUrl: 'img/icons/rinvenimenti.png',
iconSize: [24, 36],
iconAnchor: [12, 32],
tooltipAnchor: [0, -26],
}
);
Icons.camera = L.divIcon({className: 'fa fa-2x fa-camera'}); Icons.camera = L.divIcon({className: 'fa fa-2x fa-camera'});
export default Icons; export default Icons;

35
webgis/js/ui.js
View File

@ -7,6 +7,7 @@ import { SiteSurveys } from './components/SiteSurveys.js';
import { SitePhotos } from './components/SitePhotos.js'; import { SitePhotos } from './components/SitePhotos.js';
import { NotConservedSheet } from './components/NotConservedSheet.js'; import { NotConservedSheet } from './components/NotConservedSheet.js';
import GIS from './gis.js'; import GIS from './gis.js';
import { Finding } from './components/Finding.js';
/** /**
* @namespace UI * @namespace UI
@ -194,6 +195,24 @@ UI.openNotConserModal = async function (data, selector) {
modalBg.addEventListener('click', () => closeModal()); modalBg.addEventListener('click', () => closeModal());
} }
/**
* @param {object} data The data retrieved from the DB to display as modal content
* @param {string} selector The modal selector
*/
UI.openFindingModal = async function (data, selector) {
const modal = document.querySelector(selector);
let sheet = new Finding();
sheet.data = data;
modal.querySelector('#finding-sheet').innerHTML = await sheet.render();
modal.classList.add('is-active');
const closeBtn = modal.querySelector('.modal-close');
const modalBg = modal.querySelector('.modal-background');
const closeModal = () => modal.classList.remove('is-active');
// CLose modal when clicking either on the X button or on the background
closeBtn.addEventListener('click', () => closeModal());
modalBg.addEventListener('click', () => closeModal());
}
/** /**
* @param {string} menuListSel Menu list selector * @param {string} menuListSel Menu list selector
* @param {L.Map} map * @param {L.Map} map
@ -202,23 +221,29 @@ UI.openNotConserModal = async function (data, selector) {
UI.sitesMenu = function (menuListSel, map, sites) { UI.sitesMenu = function (menuListSel, map, sites) {
// Close menu if arrow button is clicked... // Close menu if arrow button is clicked...
this.toggleMenu('close-menu'); this.toggleMenu('close-menu');
let markers = [];
map.eachLayer(layer => {
if (layer instanceof L.Marker) {
markers.push(layer);
}
})
const menu = document.querySelector(menuListSel); const menu = document.querySelector(menuListSel);
menu.addEventListener('click', async event => { menu.addEventListener('click', async event => {
if (event.target.nodeName === 'A') { if (event.target.nodeName === 'A') {
const layerId = event.target.id; const layerId = event.target.id;
const marker = markers.filter(m => m.id === layerId)[0];
// zoom to layer... // zoom to layer...
const layer = sites.customGetLayer(layerId); const layer = sites.customGetLayer(layerId);
const data = await GIS.layerData(layerId);
map.setView( map.setView(
layer.getBounds().getCenter(), layer.getBounds().getCenter(),
19, 19,
{animate: true, duration: 1, easeLinearity: 0.25} {animate: true, duration: 1, easeLinearity: 0.25}
); );
setTimeout(
() => this.openSiteModal(data, '#site-data'), marker.openTooltip();
1200
);
} }
}); });
} }