No point layers in control; add visibility toggle in menu

webgis/js/controllers/layer_controller.js

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['sites', 'findings', 'notconserved', 'prehist',];
+
+    /**
+     * @param {Event} event 
+     */
+    toggle(event) {
+        let map = window.LMap;
+        let target = event.currentTarget;
+        const id = target.parentElement.getAttribute('data-id');
+        const layers = {
+            'siti': window.Sites,
+            'non-conser': window.NotConserved,
+            'rinv': window.Findings,
+            'preist': window.Prehistoric,
+        }
+
+        let group = layers[id];
+        this.toggleIcon(event.currentTarget);
+
+        if (map.hasLayer(group)) {
+            map.removeLayer(group);
+            target.title = "Mostra";
+        }
+        else {
+            map.addLayer(group);
+            target.title = "Nascondi";
+        }
+    }
+    /**
+     * Toggle visibility icon...
+     * @param {HTMLElement} target
+     */
+    toggleIcon(target) {
+        const icon = target.firstElementChild;
+        const className = icon.className;
+        icon.className = className.includes('slash') ?
+            className.replace('-slash', '') :
+            className.replace('eye', 'eye-slash');
+    }
+}
+

webgis/js/controllers/marker_controller.js

@@ -9,6 +9,9 @@ export default class extends Controller {
         easeLinearity: 0.25
     };
 
+    /**
+     * @param {Event} event 
+     */
     go(event) {
         let map = window.LMap;
         const coords = event.currentTarget
@@ -44,4 +47,3 @@ export default class extends Controller {
         return marker;
     }
 }
-

webgis/js/gis.js

@@ -138,11 +138,6 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let prehistoric = await this.prehistoric();
 
     const archeo = {
-        'Beni archeologici (punti)' : markersGroup,
-        'Beni archeologici (strutture)' : sitesGroup,
-        'Beni non conservati' : notConservedGroup,
-        'Rinvenimenti' : findingsGroup,
-        'Siti preistorici' : prehistoric,
         'Vincoli archeologici' : layerVincoli,
         'Vincoli paesistici' : layerPaesistici,
     };
@@ -155,6 +150,11 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     findingsGroup.addTo(map);
     prehistoric.addTo(map);
 
+    window.Sites = markersGroup;
+    window.NotConserved = notConservedGroup;
+    window.Findings = findingsGroup;
+    window.Prehistoric = prehistoric;
+
     L.control.layers(baseMap, archeo).addTo(map);
 
     return map;

webgis/js/index.js

@@ -6,6 +6,7 @@ import ModalController from './controllers/modal_controller.js';
 import MarkerController from './controllers/marker_controller.js';
 import BiblioController from './controllers/biblio_controller.js';
 import TabsController from './controllers/tabs_controller.js';
+import LayerController from './controllers/layer_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Register Stimulus controllers
@@ -32,4 +33,5 @@ function initStimulus() {
     Stimulus.register("marker", MarkerController);
     Stimulus.register("biblio", BiblioController);
     Stimulus.register("tabs", TabsController);
+    Stimulus.register("layer", LayerController);
 }