WIP: exit from building view (buggy)

webgis/js/controllers/bview_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+import { GisState } from '../state.js';
+
+export default class extends Controller {
+    static targets = ['bar'];
+
+    closeView(event) {
+        // Don't do anything if ESC keyboard event
+        //  is not fired from the building view
+        if (event instanceof KeyboardEvent && !GisState.bViewActive) return;
+
+        this.resetMap();
+        this.barTarget.remove();
+        GisState.bViewActive = false;
+    }
+
+    resetMap() {
+        // Restore previous map state before closing view
+        const map = GisState.map;
+        map.removeLayer(GisState.baseLayers['Limiti amministrativi']);
+        map.removeLayer(GisState.cartography.buildings);
+        GisState.layers.walls.removeFrom(map);
+        map.addLayer(GisState.currentMapState.baseLayer);
+        map.setMinZoom(GisState.currentMapState.minZoom);
+        map.setMaxZoom(GisState.currentMapState.maxZoom);
+        map.setView(
+            GisState.currentMapState.center,
+            GisState.currentMapState.zoom
+        );
+        map._container.classList.remove('bview-border');
+    }
+}

webgis/js/gis.js

@@ -117,14 +117,27 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
  */
 GIS.activateBuildingView = async function(layerId) {
     const map = GisState.map;
-    map.setMinZoom(19);
-    map.setMaxZoom(25);
+    let currentBase = {};
+    for (let key of Object.keys(GisState.baseLayers)) {
+        if (map.hasLayer(GisState.baseLayers[key])) {
+            currentBase = GisState.baseLayers[key];
+            break;
+        }
+    }
+    GisState.currentMapState = {
+        baseLayer: currentBase,
+        zoom: map.getZoom(),
+        center: map.getCenter(),
+        minZoom: map.getMinZoom(),
+        maxZoom: map.getMaxZoom(),
+    }
+
     /**
      * @type {L.GeoJSON} currentGeometry
      */
     let currentGeometry = {};
 
-    map.removeLayer(GisState.baseLayers['OpenStreetMap']);
+    map.removeLayer(currentBase);
     // Remove site layers then re-add it so vector lines
     // are placed correctly above the new base map
     GisState.layers.geometries.removeFrom(map);
@@ -139,8 +152,6 @@ GIS.activateBuildingView = async function(layerId) {
         }
     });
 
-    const center = currentGeometry.getBounds().getCenter();
-
     // TODO: Use DB to handle these?
     const wallTechniques = [
         'reticolata',
@@ -151,19 +162,25 @@ GIS.activateBuildingView = async function(layerId) {
         'poligonale',
     ];
 
-    // TODO: create color lookup table...
     const wallLayer = await this.loadGeoJSON(
         `murarie/${layerId}/reticolata.geojson`,
+        // TODO: create color lookup table...
         Options.walls,
         true
     );
 
     wallLayer.addTo(map);
 
+    // The group of all added walls...
+    GisState.layers.walls = L.layerGroup([wallLayer]);
+
     map.setView(wallLayer.getBounds().getCenter(), 20);
+    map.setMinZoom(19);
+    map.setMaxZoom(25);
     // This is terrible...
     UI.addBuildingViewBar();
     map._container.classList.add('bview-border');
+    GisState.bViewActive = true;
 }
 /**
  * Fetches references to cartography layers

webgis/js/index.js

@@ -9,6 +9,7 @@ import BiblioController from './controllers/biblio_controller.js';
 import TabsController from './controllers/tabs_controller.js';
 import LayerController from './controllers/layer_controller.js';
 import SearchController from './controllers/search_controller.js';
+import BViewController from './controllers/bview_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Register Stimulus controllers
@@ -39,4 +40,5 @@ function initStimulus() {
     Stimulus.register("tabs", TabsController);
     Stimulus.register("layer", LayerController);
     Stimulus.register("search", SearchController);
+    Stimulus.register("bview", BViewController);
 }

webgis/js/state.js

@@ -8,10 +8,22 @@
  * A lookup table of Leaflet layer groups by category
  */
 
+/**
+ * @typedef {Object} MapState
+ * @property {L.Layer} baseLayer
+ * @property {number} zoom
+ * @property {L.LatLngExpression} center
+ * @property {number} minZoom
+ * @property {number} maxZoom
+ * A representation of the (current) Leaflet map state
+ */
+
 /**
  * @typedef {Object} GisStateType
  * @property {L.Map|null} map
  * @property {{string: L.Layer}|null} baseLayers
+ * @property {?MapState} currentMapState
+ * @property {boolean} bViewActive
  * @property {MarkerLookup} markers
  * @property {LayerGroupLookup} layers
  * @property {Object|null} bibliography
@@ -23,6 +35,8 @@
 export const GisState = {
     map: null,
     baseLayers: null,
+    currentMapState: null,
+    bViewActive: false,
     markers:  {
         sites: {},
         notConserved: {},
@@ -34,6 +48,10 @@ export const GisState = {
     },
     layers: {
         geometries: {},
+        /**
+         * @type {L.LayerGroup}
+         */
+        walls: {},
         sites: {},
         notConserved: {},
         findings: {},

webgis/js/ui.js

@@ -62,13 +62,13 @@ UI.addCenterMapControl = function (map, centerCoords, zoom) {
 
 UI.addBuildingViewBar = function() {
 	const bar = document.createElement('div');
-	bar.className = 'container bview-bar has-background-primary-90 p-4';
-	bar.setAttribute('data-controller', 'menu');
-	bar.setAttribute('data-menu-target', 'element');
+	bar.className = 'container bview-bar has-background-primary-90 p-3';
+	bar.setAttribute('data-bview-target', 'bar');
 
 	bar.innerHTML = html`
-		<button title="Esci da mappa USM" class="delete is-pulled-right" data-action="menu#removeElement"></button>
-		<p class="has-text-centered has-text-weight-semibold is-size-4 is-fullwidth p-3">Mappa Unità Stratigrafica Muraria (USM)</p>
+		<button title="Esci da mappa USM" class="delete is-pulled-right" data-action="bview#closeView"></button>
+		<p class="has-text-centered has-text-weight-semibold is-size-5 p-2">Mappa Unità Stratigrafica Muraria (USM)</p>
+		<p class="has-text-centered is-size-6 mt-0 pt-0">(Chiudere questo riquadro o premere ESC per uscire)</p>
 	`;
 
 	document.body.appendChild(bar);