diff --git a/img/icons/non_conserv.png b/img/icons/non_conserv.png new file mode 100644 index 0000000..13b2c80 Binary files /dev/null and b/img/icons/non_conserv.png differ diff --git a/js/components/SiteSheet.js b/js/components/SiteSheet.js index 404d59d..c6cbac4 100644 --- a/js/components/SiteSheet.js +++ b/js/components/SiteSheet.js @@ -14,27 +14,26 @@ export class SiteSheet { return `
- - + + - - - - + + + + - - - - + + + + - - + - - - + + + - +
Identificazione
Denominazione${this._siteData.denominazione}
Definizione${this._siteData.definizione}
Denominazione${this._siteData.denomination}
Definizione${this._siteData.definition}
Localizzazione geografico-amministrativa
Comune${this._siteData.comune}
Indirizzo${this._siteData.indirizzo}
Località${this._siteData.localita}
Localizzazione${this._siteData.localizzazione}
Comune${this._siteData.municipality}
Indirizzo${this._siteData.address}
Località${this._siteData.place}
Localizzazione${this._siteData.localization}
Cronologia
Periodo${this._siteData.periodo}
Fase${this._siteData.fase}
Cronologia${this._siteData.cronologia}
Motivazione cronologia${this._siteData.motivazione_cron}
Periodo${this._siteData.period}
Fase${this._siteData.phase}
Cronologia${this._siteData.chronology}
Motivazione cronologia${this._siteData.motivation}
Conservazione e condizione giuridica
Stato di conservazione${this._siteData.stato_conserv}
Tutela vigente${this._siteData.tutela_vigente}
Stato di conservazione${this._siteData.conservationState}
Ritrovamento e materiali
Anno di ritrovamento${this._siteData.ritrovamento}
Materiali rinvenuti${this._siteData.materiali_rinv}
Luogo custodia materiali${this._siteData.luogo_custodia_mat}
Anno di ritrovamento${this._siteData.finding}
Materiali rinvenuti${this._siteData.materials}
Luogo custodia materiali${this._siteData.conservationPlace}
Descrizione
${this._siteData.descrizione}
${this._siteData.description}
`; } @@ -46,22 +45,22 @@ export class SiteSheet { - Denominazione: ${this._siteData.denominazione} + Denominazione: ${this._siteData.denomination}

- Periodo: ${this._siteData.periodo} + Periodo: ${this._siteData.period}

- Località generica: ${this._siteData.loc_generica} + Località generica: ${this._siteData.genericPlace}

- ${this._siteData.desc_breve} + ${this._siteData.shortDescription}

`; } diff --git a/js/gis.js b/js/gis.js index a6bdca7..6fe06e6 100644 --- a/js/gis.js +++ b/js/gis.js @@ -4,7 +4,8 @@ import UI from "./ui.js"; const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw'; const BASE_URL = location.href; -const API_URL = 'https://testaec.electricmandarine.cloud/gisdb/gis'; +//const API_URL = 'https://testaec.electricmandarine.cloud/gisdb/gis'; +const API_URL = 'https://localhost:8001'; // Global leaflet /** @@ -39,7 +40,7 @@ const optionsFabbricati = { color: '#222', opacity: 1, weight: 1.5, - fillColor: '#ff8000', + fillColor: '#5b5d5f', fillOpacity: 0.8 }; @@ -102,8 +103,9 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) { const {baseMap, sitesGroup} = await this.initLayers(map); let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli); - // TODO named parameters?? let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici); + let notConserData = await fetch(`${API_URL}/not_conserved`) + .then(data => data.json()); // Add scale and ruler controls L.control.scale({imperial: false}).addTo(map); @@ -118,6 +120,24 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) { tooltipAnchor: [0, -26], } ); + let notConserIcon = L.icon( + { + iconUrl: 'img/icons/non_conserv.png', + iconSize: [24, 36], + iconAnchor: [12, 32], + tooltipAnchor: [0, -26], + } + ); + + let notConserved = []; + + for (let record of notConserData.records) { + notConserved.push(L.marker( + record.coordinates, + {icon: notConserIcon} + ).bindTooltip(record.denomination) + ); + } for (let id in MARKER_NAMES.sites) { let layer = sitesGroup.customGetLayer(id); @@ -128,14 +148,14 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) { if (fromStorage !== 'undefined') { try { data = JSON.parse(fromStorage); - const lat = data?.lat ?? coords.lat; - const lon = data?.lon ?? coords.lng; + const lat = data?.coordinates[0] ?? coords.lat; + const lon = data?.coordinates[1] ?? coords.lng; coords = [lat, lon]; } catch (error) { console.log(error); } } else { - data = await GIS._fetchData(id); + data = await GIS._fetchData('site/' + id); } const marker = L.marker(coords, { icon: siteIcon }) @@ -148,16 +168,19 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) { } let markersGroup = L.layerGroup(sitesMarkers); + let notConservedGroup = L.layerGroup(notConserved); const archeo = { 'Beni archeologici (punti)' : markersGroup, 'Beni archeologici (strutture)' : sitesGroup, + 'Beni non conservati' : notConservedGroup, 'Vincoli archeologici' : layerVincoli, 'Vincoli paesistici' : layerPaesistici, }; markersGroup.addTo(map); sitesGroup.addTo(map); + notConservedGroup.addTo(map); L.control.layers( baseMap, @@ -324,7 +347,7 @@ GIS.layerData = async function (layerId) { console.log(error); } } else { - data = await GIS._fetchData(layerId); + data = await GIS._fetchData('site/' + layerId); } return data; @@ -335,7 +358,7 @@ GIS.layerData = async function (layerId) { * @param {string} layerId */ GIS.cacheDBData = async function (layerId) { - const data = await this._fetchData(layerId); + const data = await this._fetchData('site/' + layerId); localStorage.setItem(layerId, JSON.stringify(data)); } /** diff --git a/js/ui.js b/js/ui.js index f8a00b7..7949431 100644 --- a/js/ui.js +++ b/js/ui.js @@ -87,22 +87,25 @@ UI.openModal = async function (data, selector) { modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort(); modal.querySelector('#site-sheet').innerHTML = siteSheet.render(); - let photos = modal.querySelector('#photos'); + let images = modal.querySelector('#photos'); - if (data.documents.length) { + if (data.documents?.length) { let siteDocs = new SiteDocuments; siteDocs.siteData = data; modal.querySelector('#documents').innerHTML = siteDocs.render(); } - if (photos.innerHTML.length === 0) { + let surveys = data.images.filter(i => i.type === 'Survey'); + let photos = data.images.filter(i => i.type === 'Photo'); + + if (images.innerHTML.length === 0) { let siteSurveys = new SiteSurveys; - siteSurveys.siteData = data.surveys[0] ?? undefined; - photos.innerHTML += data.surveys[0] ? siteSurveys.render() : ''; + siteSurveys.siteData = surveys.length !== 0 ? surveys[0] : undefined; + images.innerHTML += surveys ? siteSurveys.render() : ''; let sitePhotos = new SitePhotos; - sitePhotos.siteData = data.photos[0] ?? undefined; - photos.innerHTML += data.photos[0] ? sitePhotos.render() : ''; + sitePhotos.siteData = photos[0] ?? undefined; + images.innerHTML += photos[0] ? sitePhotos.render() : ''; } let dataTabs = modal.querySelectorAll('.data-tabs'); @@ -136,8 +139,8 @@ UI.openModal = async function (data, selector) { closeBtn.addEventListener('click', () => closeModal()); modalBg.addEventListener('click', () => closeModal()); - this.imageGallery('gallery-1', data.surveys); - this.imageGallery('gallery-2', data.photos); + this.imageGallery('gallery-1', surveys); + this.imageGallery('gallery-2', photos); } /** * Open a modal with project info @@ -194,7 +197,7 @@ UI.imageGallery = function (galleryId, images) { if (element) { let gallery = []; for (let img of images) { - gallery.push({src: `img/${img.filename}`, description: img.didascalia}); + gallery.push({src: `img/${img.filename}`, description: img.caption}); } document.querySelector(`#${galleryId}`).addEventListener('click', () => {