Add cartography menu with image overlays (WIP)

This commit is contained in:
2025-06-20 16:07:30 +02:00
parent ecd5db5b4c
commit 8ebaea2ff8
7 changed files with 169 additions and 62 deletions

View File

@@ -25,7 +25,8 @@
<script src="js/index.js" type="module"></script>
<title>WebGIS Isola di Capri</title>
</head>
<body data-controller="menu" data-action="menu-ready@document->menu#buildMenu">
<body data-controller="menu"
data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu">
<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">
@@ -46,12 +47,21 @@
<hr class="navbar-divider">
<div class="navbar-end pb-1 pt-1" id="nav-menu">
<button class="navbar-item button is-size-5 is-white mr-3" role="button"
data-id="main"
data-action="menu#toggleMenu">
<span class="icon mr-2">
<i class="fa fa-list"></i>
</span>
Elenco beni
</button>
<button class="navbar-item button is-size-5 is-white mr-3" role="button"
data-id="cartography"
data-action="menu#toggleMenu">
<span class="icon mr-2">
<i class="fa fa-map"></i>
</span>
Cartografia
</button>
<button class="button is-outlined is-rounded is-link mr-4 mt-1" id="howto" title="Istruzioni">
<span class="icon is-large has-text-link">
<i class="fas fa-question fa-lg"></i>
@@ -69,7 +79,7 @@
<progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
</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"
<div class="menu-overlay column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter"
data-menu-target="menu" data-controller="layer">
<!-- Template to build menu items dynamically -->
<template id="menu-item-template">
@@ -256,6 +266,35 @@
</ul>
</aside>
</div>
<div class="menu-overlay column is-hidden is-3 is-3-desktop is-4-mobile is-pulled-right is-overlay has-background-white-ter"
data-menu-target="cartography">
<!-- Template to build menu items dynamically -->
<template id="cartography-item-template">
<li>
<label class="checkbox">
<input type="checkbox"
data-controller="layer"
data-action="layer#toggleCartography"
data-layer-id-value=""
data-layer-type-value=""
/>
</label>
</li>
</template>
<aside class="menu ml-4 mt-3" data-id="cartography-aside">
<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-id="historic">
<span role="button" data-action="click->menu#toggle" data-id="historic">
Catasto storico
<!--
<span class="icon pl-2">
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="historic"></i>
</span>
-->
</span>
</p>
</aside>
</div>
</div>
<!-- Bibliography citations template -->
<template id="biblio-item-template">