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 */
.bview-bar {
position: absolute;
top: 4.5rem;
top: 4rem;
width: 450px;
left: 50%;
transform: translateX(-50%);
webgis/index.html
+2 -2
View File
@@ -26,8 +26,8 @@
<script src="js/index.js" type="module"></script>
<title>WebGIS Isola di Capri</title>
</head>
<body data-controller="menu modal"
data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu">
<body data-controller="menu modal bview"
data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu keydown.esc->bview#closeView">
<nav class="navbar mb-0" role="navigation">
<div class="navbar-brand">
<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) {
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
+2
View File
@@ -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
+18
View File
@@ -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
+5 -5
View File
@@ -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);