Refine building view dynamics

webgis/js/controllers/bview_controller.js

@@ -1,13 +1,41 @@
 import { Controller } from "@hotwired/stimulus"
 import { GisState } from '../state.js';
+import { TECH_LAYERS } from "../map.js";
+
+const LEGEND_DEF = [
+    "puntatore",
+    "icona",
+];
 
 export default class extends Controller {
     static targets = ['bar', 'legend'];
 
     openView() {
+        const map = GisState.map;
+        // Remove all other layers first!
+        for (const key of Object.keys(GisState.layers)) {
+            if (GisState.layers[key] instanceof L.Layer && key !== 'geometries') {
+                map.removeLayer(GisState.layers[key]);
+            }
+        }
+        /**
+         * @type {string[]}
+         */
+        const currentTechs = [...TECH_LAYERS[GisState.currentBView], ...LEGEND_DEF];
         this.barTarget.classList.remove('is-hidden');
-        this.legendTarget.classList.remove('is-hidden');
-        GisState.map._container.classList.add('bview-active');
+
+        /**
+         * @type {HTMLDivElement}
+         */
+        const legend = this.legendTarget;
+        const items = legend.querySelectorAll('li');
+
+        for (let item of items) {
+            if (!currentTechs.includes(item.id)) item.classList.add('is-hidden');
+        }
+
+        legend.classList.remove('is-hidden');
+        map._container.classList.add('bview-active');
     }
 
     closeView(event) {
@@ -15,13 +43,13 @@ export default class extends Controller {
         // is not fired from the building view
         if (event instanceof KeyboardEvent && !GisState.bViewActive) return;
 
-        this.resetMap();
+        this.reset();
         this.barTarget.classList.add('is-hidden');
         this.legendTarget.classList.add('is-hidden');
         GisState.bViewActive = false;
     }
 
-    resetMap() {
+    reset() {
         // Restore previous map state before closing view
         const map = GisState.map;
         // Hard-coded...
@@ -29,6 +57,14 @@ export default class extends Controller {
 
         const walls = GisState.layers.walls;
 
+        // Re-add all layers first (except techniques)! (TODO: Should this be filtered by map state??)
+        for (const key of Object.keys(GisState.layers)) {
+            if (GisState.layers[key] instanceof L.Layer
+                && key !== 'geometries'
+                && key !== 'buildingTechs') {
+                map.addLayer(GisState.layers[key]);
+            }
+        }
         // map.removeLayer(GisState.layers.walls) doesn't work, i.e.
         // it doesn't remove the layer group (fails silently)
         walls.eachLayer(layer => map.removeLayer(layer));
@@ -41,5 +77,14 @@ export default class extends Controller {
             GisState.currentMapState.zoom
         );
         map._container.classList.remove('bview-active');
+        /**
+         * @type {HTMLDivElement}
+         */
+        const legend = this.legendTarget;
+        const items = legend.querySelectorAll('li');
+
+        for (let item of items) {
+            item.classList.remove('is-hidden');
+        }
     }
 }

webgis/js/gis.js

@@ -133,14 +133,14 @@ GIS.activateBuildingView = async function(layerId) {
     map.addLayer(GisState.baseLayers['Limiti amministrativi']);
     geometries.addTo(map);
 
-    // TODO: move to function in Map module??
+    // TODO: move to function in separate module??
     const wallLayers = [];
     // Cache!
     for (let tech of TECH_LAYERS[layerId]) {
         try {
             const wallLayer = await this.loadGeoJSON(
                 `murarie/${layerId}/${tech}.geojson`,
-                Options.walls[tech] ?? {...Options.site, weight: 3},
+                Options.walls[tech] ?? {...Options.site, weight: 2.5},
                 true
             );
 
@@ -161,9 +161,10 @@ GIS.activateBuildingView = async function(layerId) {
     );
     map.setMinZoom(this.BVIEW_MIN_ZOOM);
     map.setMaxZoom(this.BVIEW_MAX_ZOOM);
+    GisState.bViewActive = true;
+    GisState.currentBView = layerId;
     // Global event for Stimulus
     document.dispatchEvent(new Event('bview-active'));
-    GisState.bViewActive = true;
 }
 /**
  * Fetches references to cartography layers

webgis/js/layer_options.js

@@ -58,21 +58,35 @@ Options.walls = {
         fillColor: '#10ee47',
         fillOpacity: 1,
         opacity: 1,
-        weight: 3,
+        weight: 2.5
     },
     "mista" : {
-        color: '#f0280f',
-        fillColor: '#f0280f',
+        color: '#9b7fe9',
+        fillColor: '#9b7fe9',
         fillOpacity: 1,
         opacity: 1,
-        weight: 3,
+        weight: 2.5,
     },
     "incerta" : {
         color: '#133cee',
         fillColor: '#133cee',
         fillOpacity: 1,
         opacity: 1,
-        weight: 3,
+        weight: 2.5,
+    },
+    "rivestimento" : {
+        color: '#62646e',
+        fillColor: '#62646e',
+        fillOpacity: 1,
+        opacity: 1,
+        weight: 2.5,
+    },
+    "elemento" : {
+        color: '#e9d948',
+        fillColor: '#e9d948',
+        fillOpacity: 1,
+        opacity: 1,
+        weight: 2.5,
     },
 };
 Options.cluster = {

webgis/js/map.js

@@ -10,8 +10,8 @@ export const TECH_LAYERS = {
         "incerta",
         "mista",
         "reticolata",
-        "elementi",
-        "rivestimenti",
+        "elemento",
+        "rivestimento",
         "nulla",
     ],
 };

webgis/js/state.js

@@ -24,6 +24,7 @@
  * @property {{string: L.Layer}|null} baseLayers
  * @property {?MapState} currentMapState
  * @property {boolean} bViewActive
+ * @property {?string} currentBView
  * @property {MarkerLookup} markers
  * @property {LayerGroupLookup} layers
  * @property {Object|null} bibliography
@@ -37,6 +38,7 @@ export const GisState = {
     baseLayers: null,
     currentMapState: null,
     bViewActive: false,
+    currentBView: null,
     markers:  {
         sites: {},
         notConserved: {},