Refactor bview to Stimulus (mostly)

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...
-    UI.addBuildingViewBar();
-    map._container.classList.add('bview-active');
+    // Global event for Stimulus
+    document.dispatchEvent(new Event('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