diff --git a/webgis/js/controllers/bview_controller.js b/webgis/js/controllers/bview_controller.js
new file mode 100644
index 0000000..3df62cc
--- /dev/null
+++ b/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');
+ }
+}
diff --git a/webgis/js/gis.js b/webgis/js/gis.js
index 05b3aa0..149cc7d 100644
--- a/webgis/js/gis.js
+++ b/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
diff --git a/webgis/js/index.js b/webgis/js/index.js
index 3f24261..a8af84e 100644
--- a/webgis/js/index.js
+++ b/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);
}
\ No newline at end of file
diff --git a/webgis/js/state.js b/webgis/js/state.js
index ce65349..27833cb 100644
--- a/webgis/js/state.js
+++ b/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: {},
diff --git a/webgis/js/ui.js b/webgis/js/ui.js
index 3e09475..6b670d1 100644
--- a/webgis/js/ui.js
+++ b/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`
-
- Mappa Unità Stratigrafica Muraria (USM)
+
+ Mappa Unità Stratigrafica Muraria (USM)
+ (Chiudere questo riquadro o premere ESC per uscire)
`;
document.body.appendChild(bar);