Search adjustments + building techs

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;
 }

webgis/index.html

@@ -90,7 +90,7 @@
                 <div class="field">
                     <label class="label">Testo libero</label>
                     <div class="control is-full-width">
-                        <input class="input" type="text" name="text" placeholder="Inserire parole chiave" />
+                        <input class="input" type="text" minlength="3" name="text" placeholder="Inserire parole chiave" />
                     </div>
                 </div>
                     <div class="field">

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() {

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

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;

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);
 

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,

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`
+		<table class="table is-striped is-size-6 m-2">
+			<tbody>
+				<tr><th>Tecnica</th><td>${record.technique}</td></tr>
+				<tr><th>Descrizione</th><td>${record.description}</td></tr>
+				<tr><th>Funzione</th><td>${record.function}</td></tr>
+				<tr><th>Materiale</th><td>${record.material}</td></tr>
+				<tr><th>Sito</th><td>${record.site.label}</td></tr>
+				<tr><th>Comune</th><td>${record.municipality}</td></tr>
+			</tbody>
+		</table>
+	;`
+}
 
 export default UI;