From cb39695e6c2bfb89e3e3bedaa151f69199a87ff3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P=2E?= Date: Sun, 24 May 2026 16:21:33 +0200 Subject: [PATCH] Search adjustments + building techs --- css/app.css | 5 ++++ webgis/index.html | 2 +- webgis/js/controllers/search_controller.js | 19 ++++++++++++- webgis/js/gis.js | 31 ++++++++++++++++++++++ webgis/js/icons.js | 2 ++ webgis/js/index.js | 7 ++--- webgis/js/state.js | 2 ++ webgis/js/ui.js | 20 ++++++++++++++ 8 files changed, 83 insertions(+), 5 deletions(-) diff --git a/css/app.css b/css/app.css index 05a2cf8..c424aae 100644 --- a/css/app.css +++ b/css/app.css @@ -186,4 +186,9 @@ a:visited { .marker-cluster-small span { color: #fff; +} + +/* Apply Bulma's is-danger color based on state */ +input:invalid { + border-color: #ff6685; } \ No newline at end of file diff --git a/webgis/index.html b/webgis/index.html index a47e1d3..5f3d7e1 100644 --- a/webgis/index.html +++ b/webgis/index.html @@ -90,7 +90,7 @@
- +
diff --git a/webgis/js/controllers/search_controller.js b/webgis/js/controllers/search_controller.js index 22b7fac..a5d3b2d 100644 --- a/webgis/js/controllers/search_controller.js +++ b/webgis/js/controllers/search_controller.js @@ -20,6 +20,14 @@ export default class extends Controller { event.preventDefault(); const data = new FormData(event.target); const body = {}; + const map = GisState.map; + const techs = GisState.layers.buildingTechs; + const techsMarkers = GisState.markers.buildingTechs; + + // Reset search for building techs... + for (const key of Object.keys(techsMarkers)) { + map.removeLayer(techsMarkers[key]); + } for (const entry of data.entries()) { body[entry[0]] = entry[1]; @@ -28,9 +36,18 @@ export default class extends Controller { const response = await fetch(`${GisState.apiUrl}/search?` + new URLSearchParams(body)); const results = await response.json(); + console.warn(body); + this.containerTarget.classList.remove('is-hidden'); this.#injectResults(results); - if (results.length) this.#filterMap(results); + if (results.length) { + this.#filterMap(results); + // Should technique always be shown after a search? + for (const key of Object.keys(techsMarkers)) { + if (techsMarkers[key].options.label === body.technique) + map.addLayer(techsMarkers[key]); + } + } } clearSearch() { diff --git a/webgis/js/gis.js b/webgis/js/gis.js index 8a8a0d8..a454465 100644 --- a/webgis/js/gis.js +++ b/webgis/js/gis.js @@ -74,6 +74,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) { await this.addLayerGroups(map); await this.fetchCartographyLayers(); + const buildingTechs = await this.buildingTechs(); const reprojectedWMSLayer = GIS.reprojectWMS(); const wmsLayer = new reprojectedWMSLayer( @@ -94,6 +95,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) { 'Fabbricati' : buildings, 'Vincoli archeologici' : layerVincoli, 'Vincoli archeologici indiretti' : layerPaesistici, + 'Tecniche murarie' : buildingTechs, }; L.control.layers(baseMap, cartography).addTo(map); @@ -114,6 +116,35 @@ GIS.fetchCartographyLayers = async function () { GisState.cartography.historic.push({id, label}); } } +/** + * Create building techs layer + * @returns {L.Layer} + */ +GIS.buildingTechs = async function () { + let techsData = await fetch(`${API_URL}/building_techs`) + .then(data => data.json()); + + let techs = new L.LayerGroup(); + + for (let record of techsData) { + const marker = L.marker( + record.coordinates, + {icon: Icons.techs, label: record.technique} + ) + .bindTooltip(record.technique) + .bindPopup(UI.createBuildingTechTable(record)); + + techs.addLayer(marker); + const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`; + marker.options.data = record; + marker.options.site = record.site.label; + GisState.markers.buildingTechs[markerLabel] = marker; + } + + GisState.layers.buildingTechs = techs; + + return techs; +} /** * Load georeferenced image overlays layer group * @param {Number} imageId - The API id of the georeferenced image diff --git a/webgis/js/icons.js b/webgis/js/icons.js index 81e73dc..27f6bce 100644 --- a/webgis/js/icons.js +++ b/webgis/js/icons.js @@ -59,4 +59,6 @@ Icons.reuse = L.icon( Icons.camera = L.divIcon({className: 'fa fa-camera'}); +Icons.techs = L.divIcon({className: 'fa fa-circle has-text-primary-25'}); + export default Icons; \ No newline at end of file diff --git a/webgis/js/index.js b/webgis/js/index.js index 3ebc473..3f24261 100644 --- a/webgis/js/index.js +++ b/webgis/js/index.js @@ -1,5 +1,6 @@ import GIS from './gis.js'; import UI from './ui.js'; +import { GisState } from './state.js'; import { Application } from '@hotwired/stimulus'; import MenuController from './controllers/menu_controller.js'; import ModalController from './controllers/modal_controller.js'; @@ -15,13 +16,13 @@ document.addEventListener('DOMContentLoaded', async () => { let progress = document.querySelector('progress'); const map = await GIS.initMap('map'); - progress.classList.add('is-hidden'); - - map._container.setAttribute('aria-busy', false); // Trigger Stimulus buildMenu method... const menuEvent = new Event('menu-ready'); document.dispatchEvent(menuEvent); + + progress.classList.add('is-hidden'); + map._container.setAttribute('aria-busy', false); GIS.toggleSpherical(map); diff --git a/webgis/js/state.js b/webgis/js/state.js index b9e0550..8bbe503 100644 --- a/webgis/js/state.js +++ b/webgis/js/state.js @@ -28,6 +28,7 @@ export const GisState = { prehistoric: {}, underwater: {}, reuse: {}, + buildingTechs: {}, }, layers: { sites: {}, @@ -36,6 +37,7 @@ export const GisState = { prehistoric: {}, underwater: {}, reuse: {}, + buildingTechs: {}, }, bibliography: null, apiUrl : null, diff --git a/webgis/js/ui.js b/webgis/js/ui.js index ae535e2..95c4b22 100644 --- a/webgis/js/ui.js +++ b/webgis/js/ui.js @@ -12,6 +12,8 @@ import { Underwater } from './components/Underwater.js'; import { GisState } from "./state.js"; import { Reuse } from './components/Reuse.js'; +const html = String.raw; + /** * @namespace UI */ @@ -270,5 +272,23 @@ UI.imageGallery = function (galleryId, items, video = false) { }); } } +/** + * @param {Object} record + * @returns {string} + */ +UI.createBuildingTechTable = function(record) { + return html` + + + + + + + + + +
Tecnica${record.technique}
Descrizione${record.description}
Funzione${record.function}
Materiale${record.material}
Sito${record.site.label}
Comune${record.municipality}
+ ;` +} export default UI;