Building tech points colour

css/app.css

@@ -191,4 +191,23 @@ a:visited {
 /* Apply Bulma's is-danger color based on state */
 input:invalid {
     border-color: #ff6685;
+}
+/* Building tech colors */
+.cement-tech {
+    color: #efe91b;
+}
+.polygon-tech {
+    color: #ec973c;
+}
+.uncertain-tech {
+    color: #133cee;
+}
+.reticul-tech {
+    color: #10ee47;
+}
+.later-tech {
+    color: #dd11ef;
+}
+.mixed-tech {
+    color: #f0280f;
 }

webgis/js/gis.js

@@ -130,12 +130,12 @@ GIS.buildingTechs = async function () {
     let techs = new L.LayerGroup();
 
     for (let record of techsData) {
-        const marker = L.marker(
+        const marker = L.marker(record.coordinates, {
-                record.coordinates,
+            icon: Icons.techIcon(record.technique),
-                {icon: Icons.techs, label: record.technique}
+            label: record.technique
-            )
+        });
-            .bindTooltip(record.technique)
+        marker.bindTooltip(record.technique);
-            .bindPopup(UI.createBuildingTechTable(record));
+        marker.bindPopup(UI.createBuildingTechTable(record));
 
         techs.addLayer(marker);
         const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;

webgis/js/icons.js

@@ -1,4 +1,14 @@
 // Global leaflet
+
+// See app.css - Building tech colors
+const buildingTechColors = {
+    "Opera cementizia" : "cement-tech",
+    "Opera poligonale" : "polygon-tech",
+    "Opera incerta" : "uncertain-tech",
+    "Opera reticolata" : "reticul-tech",
+    "Opera laterizia" : "later-tech",
+    "Opera mista" : "mixed-tech",
+};
 /**
  * @namespace Icons
  */
@@ -59,6 +69,14 @@ Icons.reuse = L.icon(
 
 Icons.camera = L.divIcon({className: 'fa fa-camera'});
 
-Icons.techs = L.divIcon({className: 'fa fa-circle has-text-link-45'});
+/**
+ * Assigns a different color to the icon
+ * based on building tech type
+ * @param {string} techType The type (name) of the building tech
+ */
+Icons.techIcon = (techType) => {
+    const colorClass = buildingTechColors[techType] ?? "has-text-link-45";
+    return L.divIcon({className: `fa fa-circle ${colorClass}`});
+}  
 
 export default Icons;

webgis/js/ui.js

@@ -284,7 +284,7 @@ UI.createBuildingTechTable = function(record) {
 				<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>
-	;`
+	`;
 
 	if (record.site) {
 		table += html`