Refactor bview to Stimulus (mostly)

css/app.css

@@ -225,4 +225,13 @@ input:invalid {
     border:#263aac 4px solid;
     border-radius: 8px;
     background-color: #aad3df;
+}
+.bview-legend {
+    position: absolute;
+    bottom: 2rem;
+    right: 0.8rem;
+    width: fit-content;
+    border-radius: 8px;
+    min-height: 200px;
+    z-index: 9999;
 }

webgis/index.html

@@ -27,7 +27,12 @@
     <title>WebGIS Isola di Capri</title>
 </head>
 <body data-controller="menu modal bview"
-    data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu keydown.esc->bview#closeView">
+    data-action="
+        menu-ready@document->menu#buildMenu
+        menu-ready@document->menu#buildCartographyMenu
+        keydown.esc->bview#closeView
+        bview-active@document->bview#openView
+    ">
     <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">
@@ -613,5 +618,65 @@
         </div>
         <button class="modal-close is-large" aria-label="close"></button>
     </div>
+    <!-- Top bar for bview -->
+    <div class="container bview-bar has-background-primary-90 p-3 is-hidden" data-bview-target="bar">
+		<button title="Esci da mappa di dettaglio" 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 di dettaglio interattiva</p>
+		<p class="has-text-centered is-size-6 mt-0 pt-0">(Chiudere questo riquadro o premere ESC per uscire)</p>
+	</div>
+    <!-- Legend for bview -->
+    <div class="bview-legend container is-hidden has-background-white p-4" data-bview-target="legend">
+        <h4 class="has-text-weight-semibold pb-2">Legenda opere murarie</h4>
+        <ul type="none">
+            <li>
+            <li>
+                <span class="icon-text">
+                    <span class="icon polygon-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera poligonale</span>
+                </span>
+            </li>
+            <li>
+                <span class="icon-text">
+                    <span class="icon uncertain-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera incerta</span>
+                </span>
+            </li>
+                <span class="icon-text">
+                    <span class="icon reticul-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera reticolata</span>
+                </span>
+            </li>
+            <li>
+                <span class="icon-text">
+                    <span class="icon later-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera laterizia</span>
+                </span>
+            </li>
+            <li>
+                <span class="icon-text">
+                    <span class="icon mixed-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera mista</span>
+                </span>
+            </li>
+            <li>
+                <span class="icon-text">
+                    <span class="icon cement-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera cementizia</span>
+                </span>
+            </li>
+        </ul>
+    </div>
 </body>
 </html>

webgis/js/controllers/bview_controller.js

@@ -2,7 +2,13 @@ import { Controller } from "@hotwired/stimulus"
 import { GisState } from '../state.js';
 
 export default class extends Controller {
-    static targets = ['bar'];
+    static targets = ['bar', 'legend'];
+
+    openView() {
+        this.barTarget.classList.remove('is-hidden');
+        this.legendTarget.classList.remove('is-hidden');
+        GisState.map._container.classList.add('bview-active');
+    }
 
     closeView(event) {
         // Don't do anything if ESC keyboard event
@@ -10,7 +16,8 @@ export default class extends Controller {
         if (event instanceof KeyboardEvent && !GisState.bViewActive) return;
 
         this.resetMap();
-        this.barTarget.remove();
+        this.barTarget.classList.add('is-hidden');
+        this.legendTarget.classList.add('is-hidden');
         GisState.bViewActive = false;
     }
 

webgis/js/gis.js

@@ -102,7 +102,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     // TEST: marker with SVG icon...
     L.marker([40.5591380,14.2296069], { icon: Icons.wall, id: 'tiberio' })
         .on('click', () => this.activateBuildingView('tiberio'))
-        .bindTooltip('Mappa USM')
+        .bindTooltip('Mappa di dettaglio interattiva')
         .addTo(map);
 
     GisState.map = map;
@@ -122,13 +122,14 @@ GIS.activateBuildingView = async function(layerId) {
     const map = GisState.map;
     saveCurrentState(map);
     let currentBase = GisState.currentMapState.baseLayer;
+    const geometries = GisState.layers.geometries;
 
     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);
+    geometries.removeFrom(map);
     map.addLayer(GisState.baseLayers['Limiti amministrativi']);
-    GisState.layers.geometries.addTo(map);
+    geometries.addTo(map);
 
     // TODO: move to function in Map module??
     const wallLayers = [];
@@ -143,7 +144,6 @@ GIS.activateBuildingView = async function(layerId) {
 
             wallLayer.addTo(map);
             wallLayers.push(wallLayer);
-
         }
         catch {
             continue;
@@ -159,9 +159,8 @@ GIS.activateBuildingView = async function(layerId) {
     );
     map.setMinZoom(this.BVIEW_MIN_ZOOM);
     map.setMaxZoom(this.BVIEW_MAX_ZOOM);
-    // This is terrible...
+    // Global event for Stimulus
-    UI.addBuildingViewBar();
+    document.dispatchEvent(new Event('bview-active'));
-    map._container.classList.add('bview-active');
     GisState.bViewActive = true;
 }
 /**

webgis/js/layer_options.js

@@ -58,21 +58,21 @@ Options.walls = {
         fillColor: '#10ee47',
         fillOpacity: 1,
         opacity: 1,
-        weight: 4.5,
+        weight: 3,
     },
     "mista" : {
         color: '#f0280f',
         fillColor: '#f0280f',
         fillOpacity: 1,
         opacity: 1,
-        weight: 4.5,
+        weight: 3,
     },
     "incerta" : {
         color: '#133cee',
         fillColor: '#133cee',
         fillOpacity: 1,
         opacity: 1,
-        weight: 4.5,
+        weight: 3,
     }
 };
 Options.cluster = {

webgis/js/ui.js

@@ -59,20 +59,6 @@ UI.addCenterMapControl = function (map, centerCoords, zoom) {
     let centerCtr = new L.Control.CenterControl();
     map.addControl(centerCtr);
 }
-
-UI.addBuildingViewBar = function() {
-	const bar = document.createElement('div');
-	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="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);
-}
 /**
  * Toggle burger menu for small screens
  * @param {string} burgerClass The CSS class of the burger element