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;