nicolo/caprigis
1
1
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

WIP: exit from building view (buggy)

Browse Source
This commit is contained in:
nicolo
2026-09-15 11:38:53 +02:00
parent ace42261cf
commit 91b1764913
7 changed files with 83 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+1 -1
View File
@@ -214,7 +214,7 @@ input:invalid {
/* Building view top bar */ /* Building view top bar */
.bview-bar { .bview-bar {
position: absolute; position: absolute;
top: 4.5rem; top: 4rem;
width: 450px; width: 450px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
webgis/index.html
+2 -2
View File
@@ -26,8 +26,8 @@
<script src="js/index.js" type="module"></script> <script src="js/index.js" type="module"></script>
<title>WebGIS Isola di Capri</title> <title>WebGIS Isola di Capri</title>
</head> </head>
<body data-controller="menu modal" <body data-controller="menu modal bview"
data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu"> data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu keydown.esc->bview#closeView">
<nav class="navbar mb-0" role="navigation"> <nav class="navbar mb-0" role="navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page"> <a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
webgis/js/controllers/bview_controller.js
+32
View File
@@ -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
+23 -6
View File
@@ -117,14 +117,27 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
*/ */
GIS.activateBuildingView = async function(layerId) { GIS.activateBuildingView = async function(layerId) {
const map = GisState.map; const map = GisState.map;
map.setMinZoom(19); let currentBase = {};
map.setMaxZoom(25); 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 * @type {L.GeoJSON} currentGeometry
*/ */
let currentGeometry = {}; let currentGeometry = {};
map.removeLayer(GisState.baseLayers['OpenStreetMap']); map.removeLayer(currentBase);
// Remove site layers then re-add it so vector lines // Remove site layers then re-add it so vector lines
// are placed correctly above the new base map // are placed correctly above the new base map
GisState.layers.geometries.removeFrom(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? // TODO: Use DB to handle these?
const wallTechniques = [ const wallTechniques = [
'reticolata', 'reticolata',
@@ -151,19 +162,25 @@ GIS.activateBuildingView = async function(layerId) {
'poligonale', 'poligonale',
]; ];
// TODO: create color lookup table...
const wallLayer = await this.loadGeoJSON( const wallLayer = await this.loadGeoJSON(
`murarie/${layerId}/reticolata.geojson`, `murarie/${layerId}/reticolata.geojson`,
// TODO: create color lookup table...
Options.walls, Options.walls,
true true
); );
wallLayer.addTo(map); wallLayer.addTo(map);
// The group of all added walls...
GisState.layers.walls = L.layerGroup([wallLayer]);
map.setView(wallLayer.getBounds().getCenter(), 20); map.setView(wallLayer.getBounds().getCenter(), 20);
map.setMinZoom(19);
map.setMaxZoom(25);
// This is terrible... // This is terrible...
UI.addBuildingViewBar(); UI.addBuildingViewBar();
map._container.classList.add('bview-border'); map._container.classList.add('bview-border');
GisState.bViewActive = true;
} }
/** /**
* Fetches references to cartography layers * Fetches references to cartography layers
webgis/js/index.js
+2
View File
@@ -9,6 +9,7 @@ import BiblioController from './controllers/biblio_controller.js';
import TabsController from './controllers/tabs_controller.js'; import TabsController from './controllers/tabs_controller.js';
import LayerController from './controllers/layer_controller.js'; import LayerController from './controllers/layer_controller.js';
import SearchController from './controllers/search_controller.js'; import SearchController from './controllers/search_controller.js';
import BViewController from './controllers/bview_controller.js';
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
// Register Stimulus controllers // Register Stimulus controllers
@@ -39,4 +40,5 @@ function initStimulus() {
Stimulus.register("tabs", TabsController); Stimulus.register("tabs", TabsController);
Stimulus.register("layer", LayerController); Stimulus.register("layer", LayerController);
Stimulus.register("search", SearchController); Stimulus.register("search", SearchController);
Stimulus.register("bview", BViewController);
} }
webgis/js/state.js
+18
View File
@@ -8,10 +8,22 @@
* A lookup table of Leaflet layer groups by category * 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 * @typedef {Object} GisStateType
* @property {L.Map|null} map * @property {L.Map|null} map
* @property {{string: L.Layer}|null} baseLayers * @property {{string: L.Layer}|null} baseLayers
* @property {?MapState} currentMapState
* @property {boolean} bViewActive
* @property {MarkerLookup} markers * @property {MarkerLookup} markers
* @property {LayerGroupLookup} layers * @property {LayerGroupLookup} layers
* @property {Object|null} bibliography * @property {Object|null} bibliography
@@ -23,6 +35,8 @@
export const GisState = { export const GisState = {
map: null, map: null,
baseLayers: null, baseLayers: null,
currentMapState: null,
bViewActive: false,
markers: { markers: {
sites: {}, sites: {},
notConserved: {}, notConserved: {},
@@ -34,6 +48,10 @@ export const GisState = {
}, },
layers: { layers: {
geometries: {}, geometries: {},
/**
* @type {L.LayerGroup}
*/
walls: {},
sites: {}, sites: {},
notConserved: {}, notConserved: {},
findings: {}, findings: {},
webgis/js/ui.js
+5 -5
View File
@@ -62,13 +62,13 @@ UI.addCenterMapControl = function (map, centerCoords, zoom) {
UI.addBuildingViewBar = function() { UI.addBuildingViewBar = function() {
const bar = document.createElement('div'); const bar = document.createElement('div');
bar.className = 'container bview-bar has-background-primary-90 p-4'; bar.className = 'container bview-bar has-background-primary-90 p-3';
bar.setAttribute('data-controller', 'menu'); bar.setAttribute('data-bview-target', 'bar');
bar.setAttribute('data-menu-target', 'element');
bar.innerHTML = html` bar.innerHTML = html`
<button title="Esci da mappa USM" class="delete is-pulled-right" data-action="menu#removeElement"></button> <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-4 is-fullwidth p-3">Mappa Unità Stratigrafica Muraria (USM)</p> <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); document.body.appendChild(bar);