No point layers in control; add visibility toggle in menu

webgis/index.html

@@ -70,19 +70,24 @@
             </div>
         </div>
         <div class="column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter" id="menu"
-            data-menu-target="menu">
+            data-menu-target="menu" data-controller="layer">
             <aside class="menu ml-4 mt-3">
                 <button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#close"></button>
-                <p class="menu-label is-size-5 mt-2 is-clickable" data-action="click->menu#toggle" data-id="siti">
+                <p class="menu-label is-size-5 mt-2 is-clickable" data-id="siti">
-                    <span class="icon pr-2">
+                     <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="siti" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
                         <img class="image" src="img/icons/siti_menu.png"/>
                     </span>
-                    Beni archeologici
+                    <span data-action="click->menu#toggle" data-id="siti">
-                    <span class="icon pl-2">
+                        Beni archeologici
-                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="siti"></i>
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="siti"></i>
+                        </span>
                     </span>
                 </p>
-                <ul class="menu-list is-hidden" id="siti-list" data-menu-target="list"data-controller="marker">
+                <ul class="menu-list is-hidden" id="siti-list" data-menu-target="list" data-controller="marker">
                     <li>
                         <span class="is-clickable" data-action="click->menu#openSubList" data-list-id="siti-anacapri-sub">
                             Anacapri
@@ -154,13 +159,19 @@
                         </ul>
                     </li>
                 </ul>
-                <p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="non-conser">
+                <p class="menu-label is-size-5 is-clickable" data-id="non-conser">
-                    <span class="icon pr-2">
+                     <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="non-conser"
+                        data-action="click->layer#toggle" style="max-height: 10px">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
                         <img class="image" src="img/icons/non_cons_menu.png"/>
                     </span>
-                    Beni non conservati
+                    <span data-action="click->menu#toggle" data-id="non-conser">
-                    <span class="icon pl-2">
+                        Beni non conservati
-                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i>
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i>
+                        </span>
                     </span>
                 </p>
                 <ul class="menu-list is-hidden" id="non-conser-list" data-menu-target="list" data-controller="marker">
@@ -270,13 +281,18 @@
                         </ul>
                     </li>
                 </ul>
-                <p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="rinv">
+                <p class="menu-label is-size-5 is-clickable" data-id="rinv">
-                    <span class="icon pr-2">
+                     <span class="icon pl-1 mr-2 is-small" data-layer-target="rinv" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
                         <img class="image" src="img/icons/rinv_menu.png"/>
                     </span>
-                    Rinvenimenti
+                    <span data-action="click->menu#toggle" data-id="rinv">
-                    <span class="icon pl-2">
+                        Rinvenimenti
-                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i>
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i>
+                        </span>
                     </span>
                 </p>
                 <ul class="menu-list is-hidden" id="rinv-list" data-menu-target="list" data-controller="marker">
@@ -345,13 +361,18 @@
                         </ul>
                     </li>
                 </ul>
-                <p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="preist">
+                <p class="menu-label is-size-5 is-clickable" data-id="preist">
-                    <span class="icon pr-2">
+                     <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="preist" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
                         <img class="image" src="img/icons/preistorici.png"/>
                     </span>
-                    Aree pre-protostoriche
+                    <span data-action="click->menu#toggle" data-id="preist">
-                    <span class="icon pl-2">
+                        Aree di affioramento
-                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="preist"></i>
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="preist"></i>
+                        </span>
                     </span>
                 </p>
                 <ul class="menu-list is-hidden" id="preist-list" data-menu-target="list" data-controller="marker">

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);
 }