nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

No point layers in control; add visibility toggle in menu

Browse Source
This commit is contained in:
Nicolò P 2025-02-10 15:07:13 +01:00
parent be6398b1aa
commit 64af485a54
5 changed files with 97 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
webgis/index.html
View File

@ -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">
<span class="icon pr-2">
<p class="menu-label is-size-5 mt-2 is-clickable" data-id="siti">
<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 class="icon pl-2">
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="siti"></i>
<span data-action="click->menu#toggle" data-id="siti">
Beni archeologici
<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">
<span class="icon pr-2">
<p class="menu-label is-size-5 is-clickable" data-id="non-conser">
<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 class="icon pl-2">
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i>
<span data-action="click->menu#toggle" data-id="non-conser">
Beni non conservati
<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">
<span class="icon pr-2">
<p class="menu-label is-size-5 is-clickable" data-id="rinv">
<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 class="icon pl-2">
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i>
<span data-action="click->menu#toggle" data-id="rinv">
Rinvenimenti
<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">
<span class="icon pr-2">
<p class="menu-label is-size-5 is-clickable" data-id="preist">
<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 class="icon pl-2">
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="preist"></i>
<span data-action="click->menu#toggle" data-id="preist">
Aree di affioramento
<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">

44
webgis/js/controllers/layer_controller.js Normal file
View File

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

4
webgis/js/controllers/marker_controller.js
View File

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

10
webgis/js/gis.js
View File

@ -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;

2
webgis/js/index.js
View File

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