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

Compare commits

base: nicolo:5b5d0aeb3d0e006b6a8d2bb03d2c62c70d43a3d2
Branches Tags
nicolo:master nicolo:wms
...
compare: nicolo:wms
Branches Tags
nicolo:master nicolo:wms

14 Commits
5b5d0aeb3d ... wms

Author SHA1 Message Date
Nicolò P
6f632c3ee2 wms: layer added to map with control 2025-06-30 10:07:45 +02:00
Nicolò P
09d5a31a07 wms: debugging reprojection 2025-06-30 08:57:31 +02:00
Nicolò P
9873b22c4c Fix close button for cartography menu 2025-06-23 17:06:08 +02:00
Nicolò P
8ebaea2ff8 Add cartography menu with image overlays (WIP) 2025-06-20 16:07:30 +02:00
Nicolò P
ecd5db5b4c Add image overlays 2025-06-18 11:20:23 +02:00
Nicolò P
632eb1bfc1 Update menu 2025-06-17 12:28:14 +02:00
Nicolò P
afff222ac2 Update menu 2025-06-09 17:18:40 +02:00
Nicolò P
c0d3aaa846 Don't show documentation field in site documents 2025-06-06 14:23:11 +02:00
Nicolò P
71f111d5df Use labels everywhere + ordering for underwater... 2025-06-06 14:14:15 +02:00
Nicolò P
b51d701830 Don't capitalize biblio citations 
TODO: refactor bibliography UI logic...
 2025-06-05 10:19:09 +02:00
Nicolò P
0e979ca5c5 Don't use label span in menu item template 2025-06-04 13:39:57 +02:00
Nicolò P
af9516dde0 Fix bug in menu ('Rinvenimenti') 2025-06-03 16:17:26 +02:00
Nicolò P
b556ad66bb Refactor to generate menu dynamically 2025-06-03 15:36:42 +02:00
Nicolò P.
41dca4f563 Stub for dynamic menu (WIP) 2025-06-03 11:42:06 +02:00
17 changed files with 462 additions and 625 deletions
Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -15,4 +15,7 @@ shapefile
config.js config.js
# Don't track shperical photos # Don't track shperical photos
webgis/img/spherical/*.png webgis/img/spherical/*.png
# Don't track georeferenced images
webgis/img/geo/*
!webgis/img/geo/.keep
*Zone*Identifier *Zone*Identifier

4
css/app.css
View File

@@ -158,12 +158,12 @@ a:visited {
left: 35vw; left: 35vw;
} }
/* Menu overlay */ /* Menu overlay */
#menu { .menu-overlay {
z-index: 1000; z-index: 1000;
overflow-y: auto; overflow-y: auto;
margin-top: 54px; margin-top: 54px;
} }
#menu.is-overlay { .menu-overlay.is-overlay {
left: auto; left: auto;
} }
/* Content in tabs */ /* Content in tabs */

0
webgis/img/geo/.keep Normal file
View File

663
webgis/index.html
View File

@@ -13,19 +13,21 @@
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"three": "./js/vendor/three/build/three.module.js", "three": "./js/vendor/three/build/three.module.js",
"@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js", "@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js",
"@hotwired/stimulus": "./js/vendor/@hotwired/stimulus/dist/stimulus.js" "@hotwired/stimulus": "./js/vendor/@hotwired/stimulus/dist/stimulus.js"
} }
} }
</script> </script>
<script src="js/vendor/leaflet/dist/leaflet.js"></script> <script src="./js/vendor/proj4/dist/proj4.js"></script>
<script src="js/vendor/leaflet/dist/leaflet-src.js"></script>
<script src="js/vendor/leaflet.markercluster/dist/leaflet.markercluster.js"></script> <script src="js/vendor/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script> <script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
<script src="js/index.js" type="module"></script> <script src="js/index.js" type="module"></script>
<title>WebGIS Isola di Capri</title> <title>WebGIS Isola di Capri</title>
</head> </head>
<body data-controller="menu"> <body data-controller="menu"
data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu">
<nav class="navbar mb-0" role="navigation"> <nav class="navbar mb-0" role="navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page"> <a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
@@ -46,12 +48,21 @@
<hr class="navbar-divider"> <hr class="navbar-divider">
<div class="navbar-end pb-1 pt-1" id="nav-menu"> <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" <button class="navbar-item button is-size-5 is-white mr-3" role="button"
data-id="main"
data-action="menu#toggleMenu"> data-action="menu#toggleMenu">
<span class="icon mr-2"> <span class="icon mr-2">
<i class="fa fa-list"></i> <i class="fa fa-list"></i>
</span> </span>
Elenco beni Elenco beni
</button> </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"> <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"> <span class="icon is-large has-text-link">
<i class="fas fa-question fa-lg"></i> <i class="fas fa-question fa-lg"></i>
@@ -69,651 +80,233 @@
<progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." /> <progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
</div> </div>
</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"> data-menu-target="menu" data-controller="layer">
<!-- Template to build menu items dynamically -->
<template id="menu-item-template">
<li>
<a class="is-block button"
data-controller="marker"
data-action="marker#go"
data-marker-coords-value=""
data-marker-group-value="">
</a>
</li>
</template>
<aside class="menu ml-4 mt-3"> <aside class="menu ml-4 mt-3">
<button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#close"></button> <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="siti"> <p class="menu-label is-size-5 mt-2 is-clickable" data-id="sites">
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="siti" data-action="click->layer#toggle"> <span role="button" class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="sites" data-action="click->layer#toggle">
<i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i> <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
</span> </span>
<span class="icon pr-1"> <span class="icon pr-1">
<img class="image" src="img/icons/siti_menu.png"/> <img class="image" src="img/icons/siti_menu.png"/>
</span> </span>
<span data-action="click->menu#toggle" data-id="siti"> <span role="button" data-action="click->menu#toggle" data-id="sites">
Beni archeologici Beni archeologici
<span class="icon pl-2"> <span class="icon pl-2">
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="siti"></i> <i class="fa fa-chevron-right" data-menu-target="icon" data-id="sites"></i>
</span> </span>
</span> </span>
</p> </p>
<ul class="menu-list is-hidden" id="siti-list" data-menu-target="list" data-controller="marker"> <ul class="menu-list is-hidden" id="sites-list" data-menu-target="list" data-controller="marker">
<li> <li data-list-id="sites-anacapri-sub">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="siti-anacapri-sub"> <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="sites-anacapri-sub">
Anacapri Anacapri
<span class="icon ml-2"> <span class="icon ml-2">
<i class="fa fa-chevron-right" data-menu-target="icon"></i> <i class="fa fa-chevron-right" data-menu-target="icon"></i>
</span> </span>
</span> </span>
<ul id="siti-anacapri-sub" class="is-hidden">
<li>
<a class="is-block button" title="Vai al sito Villa di Gradola"
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.56094295 14.20573624"
data-marker-group-value="sites">
Grotta Azzurra
</a>
</li>
<li>
<a class="button" title="Vai al sito Grotta del Pisco"
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.543768 14.202657"
data-marker-group-value="sites">
Grotta del Pisco
</a>
</li>
<li>
<a class="button" title="Vai al sito Lo Pozzo"
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.556601 14.213642"
data-marker-group-value="sites">
Località Lo Pozzo
</a>
</li>
<li>
<a class="button" title="Vai al sito Scala Fenicia"
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5562963 14.2285935"
data-marker-group-value="sites">
Scala Fenicia
</a>
</li>
<li>
<a class="button" title="Vai al sito Villa di Damecuta"
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55906 14.20055"
data-marker-group-value="sites">
Villa di Damecuta
</a>
</li>
<li>
<a class="button" title="Vai al sito Villa di Gradola"
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.560834 14.205793"
data-marker-group-value="sites">
Villa di Gradola
</a>
</li>
<li>
<a class="button" title="Vai al sito San Michele"
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55738 14.225806"
data-marker-group-value="sites">
Villa San Michele
</a>
</li>
</ul>
</li> </li>
<li class="mt-3"> <li class="mt-3" data-list-id="sites-capri-sub">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="siti-capri-sub"> <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="sites-capri-sub">
Capri Capri
<span class="icon ml-2"> <span class="icon ml-2">
<i class="fa fa-chevron-right" data-menu-target="icon"></i> <i class="fa fa-chevron-right" data-menu-target="icon"></i>
</span> </span>
</span> </span>
<ul id="siti-capri-sub" class="is-hidden">
<li>
<a class="button" id="tiberio">
Bagni di Tiberio
</a>
</li>
<li>
<a class="button" data-controller="marker"
data-marker-coords-value="40.54972 14.24669"
data-marker-group-value="sites"
data-action="marker#go">
Camerelle
</a>
</li>
<li>
<a class="button" data-controller="marker"
data-marker-group-value="sites"
data-marker-coords-value="40.54652 14.24288" data-action="marker#go">
Grotta dell'Arsenale
</a>
</li>
<li>
<a class="button" title="Vai al sito Grotta di Matermania" data-controller="marker"
data-marker-group-value="sites"
data-marker-coords-value="40.54942 14.25583" data-action="marker#go">
Grotta di Matermania
</a>
</li>
<li>
<a class="button" title="Vai al sito Grotta delle Felci" data-controller="marker"
data-marker-group-value="sites"
data-marker-coords-value="40.543644 14.230008" data-action="marker#go">
Grotta delle Felci
</a>
</li>
<li>
<a class="button" title="Vai al sito Grotta del Castiglione" data-controller="marker"
data-marker-group-value="sites"
data-marker-coords-value="40.54687 14.24023" data-action="marker#go">
Grotta del Castiglione
</a>
</li>
<li>
<a class="button" data-controller="marker" data-marker-coords-value="40.5515 14.24327"
data-marker-group-value="sites"
data-action="marker#go">
Mura greche
</a>
</li>
<li>
<a class="button" data-controller="marker" data-marker-coords-value="40.55325 14.24761" data-action="marker#go">
Monte San Michele
</a>
</li>
<li>
<a class="button" data-controller="marker" data-marker-coords-value="40.55641 14.23503" data-action="marker#go">
San Costanzo
</a>
</li>
<li>
<a class="button" data-controller="marker" data-marker-coords-value="40.549 14.24801" data-action="marker#go">
Tragara (strada)
</a>
</li>
<li>
<a class="button" data-controller="marker" data-marker-coords-value="40.54695 14.24962" data-action="marker#go">
Tragara (area residenziale)
</a>
</li>
<li>
<a class="button" data-controller="marker" data-marker-coords-value="40.543719 14.252836" data-action="marker#go">
Tragara, approdo
</a>
</li>
<li>
<a class="button" data-controller="marker" data-marker-coords-value="40.55791 14.26253" data-action="marker#go">
Villa Jovis
</a>
</li>
</ul>
</li> </li>
</ul> </ul>
<p class="menu-label is-size-5 is-clickable" data-id="non-conser"> <p class="menu-label is-size-5 is-clickable" data-id="notConserved">
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="non-conser" <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="notConserved"
data-action="click->layer#toggle" style="max-height: 10px"> data-action="click->layer#toggle" style="max-height: 10px">
<i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i> <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
</span> </span>
<span class="icon pr-1"> <span class="icon pr-1">
<img class="image" src="img/icons/non_cons_menu.png"/> <img class="image" src="img/icons/non_cons_menu.png"/>
</span> </span>
<span data-action="click->menu#toggle" data-id="non-conser"> <span role="button" data-action="click->menu#toggle" data-id="notConserved">
Beni non conservati Beni non conservati
<span class="icon pl-2"> <span class="icon pl-2">
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i> <i class="fa fa-chevron-right" data-menu-target="icon" data-id="notConserved"></i>
</span> </span>
</span> </span>
</p> </p>
<ul class="menu-list is-hidden" id="non-conser-list" data-menu-target="list" data-controller="marker"> <ul class="menu-list is-hidden" id="notConserved-list" data-menu-target="list" data-controller="marker">
<li data-list-id="noncons-anacapri-sub"> <li data-list-id="notConserved-anacapri-sub">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="noncons-anacapri-sub"> <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="notConserved-anacapri-sub">
Anacapri Anacapri
<span class="icon ml-2 is-small" data-list-id="noncons-anacapri-sub"> <span class="icon ml-2 is-small" data-list-id="notConserved-anacapri-sub">
<i class="fa fa-chevron-right"></i> <i class="fa fa-chevron-right"></i>
</span> </span>
</span> </span>
<ul id="noncons-anacapri-sub" class="is-hidden">
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5595565 14.2003896">
Cala a mare - resti di ambienti
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.549026 14.196911">
Punta Campetiello - scala
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5501214 14.2198544">
Castagnaro - area funeraria
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55129683 14.21261142">
Ceselle - necropoli
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5533744 14.2178754">
Località Piscina - complesso idraulico
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5546467 14.2092143">
La Cera - ambienti voltati
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5495555 14.2108741">
Cesa - complesso idraulico
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5575337 14.2027513">
La Fabbrica - resti murari
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5543028 14.2129861">
Le Boffe - Frammenti scultorei
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5530655 14.201767">
Lupinaro - resti murari
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5399801 14.2092552">
Migliara Belvedere - frammenti erratici
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5451791 14.2233019">
Monte Solaro - vaso corinzio
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5523988 14.2087281">
Monticello - “Vaso di Monticello”
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5521975 14.2107296">
Monticello - “Villa di Monticello”
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5559514 14.2197966">
Pastena - strutture murarie
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.546923 14.2173871">
Petracquale - ruderi indeterminati
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55666444 14.21446043">
Timberino - impianto idraulico
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5590486 14.1984242">
Vetereto - ambienti voltati
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.556597 14.214518">
Veterino - complesso residenziale
</a>
</li>
</ul>
</li> </li>
<li class="mt-3" data-list-id="noncons-capri-sub"> <li class="mt-3" data-list-id="notConserved-capri-sub">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="noncons-capri-sub"> <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="notConserved-capri-sub">
Capri Capri
<span class="icon ml-2 is-small" data-list-id="noncons-capri-sub"> <span class="icon ml-2 is-small" data-list-id="notConserved-capri-sub">
<i class="fa fa-chevron-right"></i> <i class="fa fa-chevron-right"></i>
</span> </span>
</span> </span>
<ul id="noncons-capri-sub" class="is-hidden">
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5511089 14.2362655">
Le Parate - necropoli
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5532513 14.2538048">
Moneta - impianti idraulici e struttura residenziale a Moneta
</a>
</li>
<li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5533825 14.2385025">
Sant'Antonio - necropoli
</a>
</li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5484525 14.2478183">
Unghia Marina - complesso residenziale
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5473155 14.2405834">
Villa Imperiale del Castiglione
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5480487 14.2420423">
Villa imperiale del Castiglione, scavi Hadrawa
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5492126 14.2438121">
Villa imperiale del Castiglione, Li Campi
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5493422 14.2430196">
Villa imperiale del Castiglione, Località Valentino
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5489398 14.2408126">
Villa imperiale del Castiglione, mura via Castello
</a>
</li>
</ul>
</li> </li>
</ul> </ul>
<p class="menu-label is-size-5 is-clickable" data-id="rinv"> <p class="menu-label is-size-5 is-clickable" data-id="findings">
<span class="icon pl-1 mr-2 is-small" data-layer-target="rinv" data-action="click->layer#toggle"> <span class="icon pl-1 mr-2 is-small" data-layer-target="findings" data-action="click->layer#toggle">
<i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i> <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
</span> </span>
<span class="icon pr-1"> <span class="icon pr-1">
<img class="image" src="img/icons/rinv_menu.png"/> <img class="image" src="img/icons/rinv_menu.png"/>
</span> </span>
<span data-action="click->menu#toggle" data-id="rinv"> <span role="button" data-action="click->menu#toggle" data-id="findings">
Rinvenimenti Reperti
<span class="icon pl-2"> <span class="icon pl-2">
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i> <i class="fa fa-chevron-right" data-menu-target="icon" data-id="findings"></i>
</span> </span>
</span> </span>
</p> </p>
<ul class="menu-list is-hidden" id="rinv-list" data-menu-target="list" data-controller="marker"> <ul class="menu-list is-hidden" id="findings-list" data-menu-target="list" data-controller="marker">
<li> <li data-list-id="findings-anacapri-sub">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="rinv-anacapri-sub"> <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="findings-anacapri-sub">
Anacapri Anacapri
<span class="icon ml-2"> <span class="icon ml-2">
<i class="fa fa-chevron-right" data-menu-target="icon"></i> <i class="fa fa-chevron-right" data-menu-target="icon"></i>
</span> </span>
</span> </span>
<ul id="rinv-anacapri-sub" class="is-hidden"> </li>
<li> <li class="mt-3" data-list-id="findings-capri-sub">
<a class="button" data-marker-target="coords" <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="findings-capri-sub">
data-controller="marker" data-marker-coords-value="40.55939119 14.20064002" data-action="marker#go"> Capri
Affresco di IV stile - Villa Damecuta <span class="icon ml-2">
</a> <i class="fa fa-chevron-right" data-menu-target="icon"></i>
</li> </span>
<li> </span>
<a class="button" data-marker-target="coords"
data-controller="marker" data-marker-coords-value="40.5596847 14.2013025" data-action="marker#go">
Statua di fanciullo - Villa Damecuta
</a>
</li>
<li>
<a class="button" data-marker-target="coords"
data-controller="marker" data-marker-coords-value="40.5595088 14.2008549" data-action="marker#go">
Frammento di testa di Sileno - Villa Damecuta
</a>
</li>
<li>
<a class="button" data-marker-target="coords"
data-controller="marker" data-marker-coords-value="40.5565536 14.2133073" data-action="marker#go">
Base di candelabro - Lo Pozzo
</a>
</li>
<li>
<a class="button" data-marker-target="coords"
data-controller="marker" data-marker-coords-value="40.56061123 14.20569607" data-action="marker#go">
Statua di Nettuno - Grotta Azzurra
</a>
</li>
<li>
<a class="button" data-marker-target="coords"
data-controller="marker" data-marker-coords-value="40.56070704 14.20588946" data-action="marker#go">
Statua di Tritone imberbe - Grotta Azzurra
</a>
</li>
<li>
<a class="button" data-marker-target="coords"
data-controller="marker" data-marker-coords-value="40.56057044 14.20603369" data-action="marker#go">
Statua di Tritone barbato - Grotta Azzurra
</a>
</li>
<li>
<a class="button" data-marker-target="coords"
data-controller="marker" data-marker-coords-value="40.56048101 14.20591339" data-action="marker#go">
Statua di Tritone - Grotta Azzurra
</a>
</li>
<li>
<a class="button" data-marker-target="coords"
data-controller="marker" data-marker-coords-value="40.5605702 14.20575881" data-action="marker#go">
Statua di peplophoros - Grotta Azzurra
</a>
</li>
</ul>
</li> </li>
</ul> </ul>
<p class="menu-label is-size-5 is-clickable" data-id="preist"> <p class="menu-label is-size-5 is-clickable" data-id="prehistoric">
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="preist" data-action="click->layer#toggle"> <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="prehistoric" data-action="click->layer#toggle">
<i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i> <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
</span> </span>
<span class="icon pr-1"> <span class="icon pr-1">
<img class="image" src="img/icons/preistorici.png"/> <img class="image" src="img/icons/preistorici.png"/>
</span> </span>
<span data-action="click->menu#toggle" data-id="preist"> <span role="button" data-action="click->menu#toggle" data-id="prehistoric">
Aree di affioramento Aree di affioramento
<span class="icon pl-2"> <span class="icon pl-2">
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="preist"></i> <i class="fa fa-chevron-right" data-menu-target="icon" data-id="prehistoric"></i>
</span> </span>
</span> </span>
</p> </p>
<ul class="menu-list is-hidden" id="preist-list" data-menu-target="list" data-controller="marker"> <ul class="menu-list is-hidden" id="prehistoric-list" data-menu-target="list" data-controller="marker">
<li data-list-id="preist-anacapri-sub"> <li data-list-id="prehistoric-anacapri-sub">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="preist-anacapri-sub"> <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="prehistoric-anacapri-sub">
Anacapri Anacapri
<span class="icon ml-2 is-small" data-list-id="preist-anacapri-sub"> <span class="icon ml-2 is-small" data-list-id="prehistoric-anacapri-sub">
<i class="fa fa-chevron-right"></i> <i class="fa fa-chevron-right"></i>
</span> </span>
</span> </span>
<ul id="preist-anacapri-sub" class="is-hidden">
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.548922 14.229593">
Cetrella
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.554641 14.198711">
Punta Capocchia
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.556512 14.198711">
Punta del Miglio
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.549190 14.198606">
Punta Campetiello
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5473633 14.1992508">
Rio Latino - Cala di Mezzo
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5469179 14.2022463">
Località Pino
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.541755 14.197580">
Punta del Pino
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5386677 14.1997139">
Capo Ruglio-Limmo
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5399062 14.2098143">
Belvedere della Migliara
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5367431 14.1995263">
Punta Carena-Limmo
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.558507 14.200558">
Punta dell'Arcera
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.542092 14.223073">
Monte Solaro
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5425792 14.2299374">
Punta Mulo
</a>
</li>
</ul>
</li> </li>
<li class="mt-3" data-list-id="preist-capri-sub"> <li class="mt-3" data-list-id="prehistoric-capri-sub">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="preist-capri-sub"> <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="prehistoric-capri-sub">
Capri Capri
<span class="icon ml-2 is-small" data-list-id="preist-capri-sub"> <span class="icon ml-2 is-small" data-list-id="prehistoric-capri-sub">
<i class="fa fa-chevron-right"></i> <i class="fa fa-chevron-right"></i>
</span> </span>
</span> </span>
<ul id="preist-capri-sub" class="is-hidden">
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.558602 14.2233">
Artimo
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.552006 14.2300939">
Calcara
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5495598 14.2442728">
Camerelle, Hotel Quisisana
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5512194 14.2487155">
Croce
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5516843 14.2514713">
Fondo Mongiardino
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5489554 14.2347825">
La Torina
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5500081 14.2377156">
Le Parate
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55918 14.259928">
Lo Capo
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5517999 14.2283005">
L’Anginola
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5562267 14.2350889">
Marina Grande, Chiesa di S. Costanzo
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5474502 14.2533369">
Tragara
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5534825 14.2329379">
Veruotto
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5504548 14.2340138">
Via Aiano di Sopra
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.54917684 14.23908714">
Via Castiglione snc
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.546096 14.240045">
Via Krupp
</a>
</li>
</ul>
</li> </li>
</ul> </ul>
<p class="menu-label is-size-5 is-clickable" data-id="subacquei"> <p class="menu-label is-size-5 is-clickable" data-id="underwater">
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="underwater" data-action="click->layer#toggle"> <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="underwater" data-action="click->layer#toggle">
<i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i> <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
</span> </span>
<span class="icon pr-1"> <span class="icon pr-1">
<img class="image" src="img/icons/subacquei_menu.png"/> <img class="image" src="img/icons/subacquei_menu.png"/>
</span> </span>
<span data-action="click->menu#toggle" data-id="subacquei"> <span role="button" data-action="click->menu#toggle" data-id="underwater">
Giacimenti subacquei Giacimenti subacquei
<span class="icon pl-2"> <span class="icon pl-2">
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="subacquei"></i> <i class="fa fa-chevron-right" data-menu-target="icon" data-id="underwater"></i>
</span> </span>
</span> </span>
</p> </p>
<ul class="menu-list is-hidden" id="subacquei-list" data-menu-target="list" data-controller="marker"> <ul class="menu-list is-hidden" id="underwater-list" data-menu-target="list" data-controller="marker">
<li> <li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5511022 14.1910274"> <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5511022 14.1910274">
Bocca Grande - relitto con carico Bocca Grande - relitto con carico
</a> </a>
</li> </li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5579004 14.2363139">
Marina Grande - strutture portuali
</a>
</li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5649884 14.1940185">
Punta dell’Arcera - relitto con carico
</a>
</li>
<li> <li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5870549 14.2887986"> <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5870549 14.2887986">
Bocca Piccola - relitto con carico Bocca Piccola - relitto con carico
</a> </a>
</li> </li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5579004 14.2363139">
Marina Grande - strutture portuali
</a>
</li>
<li> <li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.54468634 14.23392751"> <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.54468634 14.23392751">
Marina Piccola, Scoglio delle Sirene - strutture portuali, approdo Marina Piccola, Scoglio delle Sirene - strutture portuali, approdo
</a> </a>
</li> </li>
<li>
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5649884 14.1940185">
Punta dell’Arcera - relitto con carico
</a>
</li>
</ul> </ul>
</aside> </aside>
</div> </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#closeCartography"></button>
<ul class="menu-list">
<li>
<input type="checkbox" data-controller="layer" data-action="layer#toggleCadastral" />
Catasto Agenzia delle Entrate (particelle e fabbricati)
</li>
</ul>
<p class="menu-label is-size-5 mt-4 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> </div>
<!-- Bibliography citations template -->
<template id="biblio-item-template">
<span class="is-clickable has-text-link"
data-action="click->biblio#open">
</span>
</template>
<!-- Sites data modal --> <!-- Sites data modal -->
<div class="modal" id="site-data" data-controller="modal biblio tabs marker" data-modal-target="modal"> <div class="modal" id="site-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
<div class="modal-background" data-action="click->modal#close click->tabs#reset"></div> <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>

4
webgis/js/components/Finding.js
View File

@@ -92,10 +92,10 @@ export class Finding {
if (finding.bibliography.length) { if (finding.bibliography.length) {
finding.bibliography.forEach(record => { finding.bibliography.forEach(record => {
citations += ` citations += `
<span class="is-clickable is-capitalized has-text-link" <span class="is-clickable has-text-link"
data-action="click->biblio#open" data-action="click->biblio#open"
id="cit-${record.id}"> id="cit-${record.id}">
${record.citation.toLowerCase()}</span>`; ${record.citation}</span>`;
citations += record.pages?.length ? `, ${record.pages};` : ';'; citations += record.pages?.length ? `, ${record.pages};` : ';';

4
webgis/js/components/NotConserved.js
View File

@@ -144,10 +144,10 @@ export class NotConserved {
if (record.bibliography.length) { if (record.bibliography.length) {
record.bibliography.forEach(record => { record.bibliography.forEach(record => {
citations += ` citations += `
<span class="is-clickable is-capitalized has-text-link" <span class="is-clickable has-text-link"
data-action="click->biblio#open" data-action="click->biblio#open"
id="cit-${record.id}"> id="cit-${record.id}">
${record.citation.toLowerCase().trim()}</span>`; ${record.citation.trim()}</span>`;
citations += record.pages?.length ? `, ${record.pages};` : ';'; citations += record.pages?.length ? `, ${record.pages};` : ';';

4
webgis/js/components/Prehistoric.js
View File

@@ -98,10 +98,10 @@ export class Prehistoric {
if (finding.bibliography.length) { if (finding.bibliography.length) {
finding.bibliography.forEach(record => { finding.bibliography.forEach(record => {
citations += ` citations += `
<span class="is-clickable is-capitalized has-text-link" <span class="is-clickable has-text-link"
data-action="click->biblio#open" data-action="click->biblio#open"
id="cit-${record.id}"> id="cit-${record.id}">
${record.citation.toLowerCase()}</span>`; ${record.citation}</span>`;
citations += record.pages?.length ? `, ${record.pages};` : ';'; citations += record.pages?.length ? `, ${record.pages};` : ';';

11
webgis/js/components/SiteDocuments.js
View File

@@ -13,6 +13,14 @@ export class SiteDocuments {
} }
render() { render() {
if (this._siteData.documents.length === 0) {
return `
<p class="p-2 has-text-centered mt-3 mb-3">
Nessuna documentazione disponibile.
</p>
`;
}
this.documentation = this._siteData.documents this.documentation = this._siteData.documents
.filter(d => d.type === 'documentazione') .filter(d => d.type === 'documentazione')
@@ -20,9 +28,6 @@ export class SiteDocuments {
let content = ` let content = `
<div class="has-bottom-border"> <div class="has-bottom-border">
<p class="p-2 has-text-centered mt-3 mb-3">
${this._siteData.documentation}
</p>
<div class="p-2"> <div class="p-2">
<table class="p-4 table is-fullwidth is-striped"> <table class="p-4 table is-fullwidth is-striped">
<thead> <thead>

4
webgis/js/components/SiteSheet.js
View File

@@ -102,10 +102,10 @@ export class SiteSheet {
if (this._siteData.bibliography.length) { if (this._siteData.bibliography.length) {
this._siteData.bibliography.forEach(record => { this._siteData.bibliography.forEach(record => {
citations += ` citations += `
<span class="is-clickable is-capitalized has-text-link" <span class="is-clickable has-text-link"
data-action="click->biblio#open" data-action="click->biblio#open"
id="cit-${record.id}"> id="cit-${record.id}">
${record.citation.toLowerCase().trim()}</span>`; ${record.citation.trim()}</span>`;
citations += record.pages?.length ? `, ${record.pages};` : ';'; citations += record.pages?.length ? `, ${record.pages};` : ';';

50
webgis/js/controllers/layer_controller.js
View File

@@ -1,8 +1,45 @@
import { Controller } from "@hotwired/stimulus"; import { Controller } from "@hotwired/stimulus";
import { GisState } from "../state.js"; import { GisState } from "../state.js";
import GIS from "../gis.js";
export default class extends Controller { export default class extends Controller {
static targets = ['sites', 'findings', 'notconserved', 'prehist',]; static targets = [
'sites',
'findings',
'notconserved',
'prehist',
];
static values = {
'id': Number,
'type': String,
};
async toggleCartography() {
const map = GisState.map;
const id = this.idValue;
let currentLayer = await GIS.getImageOverlay(id);
let hasLayer = false;
map.eachLayer(function (layer) {
if (layer.options.label === currentLayer.options.label) {
hasLayer |= true;
currentLayer = layer;
}
});
if (!hasLayer) currentLayer.addTo(map);
else map.removeLayer(currentLayer);
}
toggleCadastral() {
const map = GisState.map;
const wms = GisState.cartography.cadastral;
if (!map.hasLayer(wms)) map.addLayer(wms);
else map.removeLayer(wms);
}
/** /**
* @todo Use Stimulus values? * @todo Use Stimulus values?
@@ -12,17 +49,10 @@ export default class extends Controller {
let map = GisState.map; let map = GisState.map;
let target = event.currentTarget; let target = event.currentTarget;
const id = target.parentElement.getAttribute('data-id'); const id = target.parentElement.getAttribute('data-id');
const layers = {
'siti': GisState.layers.sites,
'non-conser': GisState.layers.notConserved,
'rinv': GisState.layers.findings,
'preist': GisState.layers.prehistoric,
'subacquei': GisState.layers.underwater,
}
let group = layers[id];
this.toggleIcon(event.currentTarget); this.toggleIcon(event.currentTarget);
let group = GisState.layers[id];
if (map.hasLayer(group)) { if (map.hasLayer(group)) {
map.removeLayer(group); map.removeLayer(group);
target.title = "Mostra"; target.title = "Mostra";

105
webgis/js/controllers/menu_controller.js
View File

@@ -1,16 +1,115 @@
import { Controller } from "@hotwired/stimulus" import { Controller } from "@hotwired/stimulus"
import { GisState } from '../state.js';
export default class extends Controller { export default class extends Controller {
static targets = ['list', 'menu', 'icon']; static targets = [
'list',
'menu',
'cartography',
'icon'
];
toggleMenu() { static values = {
this.menuTarget.classList.toggle('is-hidden'); 'cartography' : String,
'main' : String,
};
buildMenu() {
const groups = Object.keys(GisState.markers);
const municipalities = ['Anacapri', 'Capri'];
// TODO refactor with Stimulus values?
for (let group of groups) {
for (let municipality of municipalities) {
let ul = this.renderMenuItems(group, municipality);
document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
?.appendChild(ul);
}
}
}
/**
*
* @param {String} group
* @param {String} municipality
*/
renderMenuItems(group, municipality) {
const ul = document.createElement('ul');
ul.className = 'is-hidden';
ul.id = `${group}-${municipality.toLowerCase()}-sub`;
const template = document.getElementById('menu-item-template');
for (let key in GisState.markers[group]) {
const marker = GisState.markers[group][key];
if (marker.options.municipality === municipality) {
const clone = template.content.cloneNode(true);
const link = clone.querySelector('a');
link.dataset.markerCoordsValue = key;
link.dataset.markerGroupValue = group;
link.textContent = marker.options.label;
ul.appendChild(clone);
}
}
return ul;
}
buildCartographyMenu() {
const historicCadastre = GisState.cartography.historic;
const template = document.getElementById('cartography-item-template');
const ul = document.createElement('ul');
ul.className = 'menu-list';
ul.id = 'historic-sub';
const aside = document.querySelector('[data-id="cartography-aside"]');
for (let geoImage of historicCadastre) {
const clone = template.content.cloneNode(true);
const label = clone.querySelector('label');
const checkbox = clone.querySelector('input[type="checkbox"]');
checkbox.dataset.layerIdValue = geoImage.id;
checkbox.dataset.layerTypeValue = 'historic';
const span = document.createElement('span');
span.className = 'pl-3';
span.textContent = geoImage.label;
label.appendChild(span);
ul.appendChild(clone);
}
aside.appendChild(ul);
}
toggleMenu(event) {
const menuId = event.target.dataset.id;
// Stupid...
if (menuId === 'main') {
this.menuTarget.classList.toggle('is-hidden');
if (!this.cartographyTarget.classList.contains('is-hidden')) {
this.cartographyTarget.classList.add('is-hidden');
}
}
if (menuId === 'cartography') {
this.cartographyTarget.classList.toggle('is-hidden');
if (!this.menuTarget.classList.contains('is-hidden')) {
this.menuTarget.classList.add('is-hidden');
}
}
} }
close() { close() {
this.menuTarget.classList.add('is-hidden'); this.menuTarget.classList.add('is-hidden');
} }
closeCartography() {
this.cartographyTarget.classList.add('is-hidden');
}
toggleList(id) { toggleList(id) {
document.querySelector(`#${id}`).classList.toggle('is-hidden'); document.querySelector(`#${id}`).classList.toggle('is-hidden');
} }

166
webgis/js/gis.js
View File

@@ -9,16 +9,15 @@ import { GisState } from "./state.js";
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw'; const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
const BASE_URL = location.href; const BASE_URL = location.href;
let API_URL = ''; let API_URL = API_CONFIG.prod;
if (BASE_URL.includes('localhost')) {
if (!BASE_URL.includes('cnr.it')) {
API_URL = API_CONFIG.dev; API_URL = API_CONFIG.dev;
} else {
API_URL = API_CONFIG.prod;
} }
GisState.apiUrl = API_URL; GisState.apiUrl = API_URL;
// Global leaflet // Global leaflet and proj4
/** /**
* @namespace GIS * @namespace GIS
*/ */
@@ -112,37 +111,97 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli); let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli);
let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici); let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
this.addLayerGroups(map); await this.addLayerGroups(map);
await this.fetchCartographyLayers();
const archeo = { const archeo = {
'Vincoli archeologici' : layerVincoli, 'Vincoli archeologici' : layerVincoli,
'Vincoli paesistici' : layerPaesistici, 'Vincoli paesistici' : layerPaesistici,
//'Catasto storico' : historicCadastre,
}; };
L.control.layers(baseMap, archeo).addTo(map); L.control.layers(baseMap, archeo).addTo(map);
GisState.map = map; GisState.map = map;
const reprojectedWMSLayer = GIS.reprojectWMS();
const wmsLayer = new reprojectedWMSLayer(
'https://wms.cartografia.agenziaentrate.gov.it/inspire/wms/ows01.php?',
{
layers: 'CP.CadastralParcel,fabbricati',
transparent: true,
format: 'image/png',
version: '1.1.1',
minZoom: 15,
maxZoom: this.MAX_ZOOM,
tileSize: 1024,
opacity: 0.6,
}
);
GisState.cartography.cadastral = wmsLayer;
return map; return map;
} }
/**
* Fetches references to cartography layers
* and updates GisState
*/
GIS.fetchCartographyLayers = async function () {
const data = await this._fetchData('geoimages/menu')
.catch(error => console.error(`Could not fetch data for geo images: ${error}`));
for (let item of data) {
let {id, label} = item;
GisState.cartography.historic.push({id, label});
}
}
/**
* Load georeferenced image overlays layer group
* @param {Number} imageId - The API id of the georeferenced image
* @returns {L.ImageOverlay}
*/
GIS.getImageOverlay = async function (imageId) {
const imageData = await this._fetchData(`geoimages/${imageId}`)
.catch(error => console.error(`Could not fetch data for geo image ${imageId}: ${error}`));
let polygonCoords = JSON.parse(imageData.polygon).coordinates[0];
// Image rectangle bounds are SE and NW coordinates from the PostGIS polygon
// with long/lat swapped...
const se = [polygonCoords[0][1], polygonCoords[0][0]];
const nw = [polygonCoords[2][1], polygonCoords[2][0]];
const bounds = [se, nw];
const imageOverlay = L.imageOverlay(
`/webgis/img/geo/${imageData.filename}`,
bounds,
{
opacity: 0.6,
alt: `Immagine georeferita (${imageData.label})`,
label: `geoimage:${imageData.id}:${imageData.label}`,
}
);
return imageOverlay;
}
/** /**
* Add layer groups to map * Add layer groups to map
*/ */
GIS.addLayerGroups = function (map) { GIS.addLayerGroups = async function (map) {
// Can be included in Promise.all // Can be included in Promise.all
// if it returns only one group... // if it returns only one group...
this.sites().then(data => { const sites = await this.sites();
data.markers.addTo(map); sites.markers.addTo(map);
data.geom.addTo(map); sites.geom.addTo(map);
});
Promise.all( const groups = await Promise.all(
[ [
this.notConserved(), this.notConserved(),
this.findings(), this.findings(),
this.prehistoric(), this.prehistoric(),
this.underwater(), this.underwater(),
] ]
) );
.then(groups => groups.forEach(group => group.addTo(map))); groups.forEach(group => group.addTo(map));
} }
/** /**
* Create markers for sites * Create markers for sites
@@ -166,7 +225,7 @@ GIS.sites = async function () {
record.coordinates, record.coordinates,
{icon: Icons.site, label: record.label} {icon: Icons.site, label: record.label}
) )
.bindTooltip(record.label + '<br>(Clicca per aprire scheda)') .bindTooltip(record.label)
.on( .on(
'click', 'click',
() => UI.openSiteModal(record, '#site-data') () => UI.openSiteModal(record, '#site-data')
@@ -175,7 +234,7 @@ GIS.sites = async function () {
sites.addLayer(marker); sites.addLayer(marker);
// Populate app state for reuse and avoid window.Sites etc. // Populate app state for reuse and avoid window.Sites etc.
// Municipality (Capri, Anacapri) added for reuse in dynamic menu // Municipality (Capri, Anacapri) added for reuse in dynamic menu
marker.options.municipalilty = record.municipalilty; marker.options.municipality = record.municipality;
const markerIndex = `${record.coordinates[0]} ${record.coordinates[1]}`; const markerIndex = `${record.coordinates[0]} ${record.coordinates[1]}`;
GisState.markers.sites[markerIndex] = marker; GisState.markers.sites[markerIndex] = marker;
} }
@@ -195,13 +254,17 @@ GIS.notConserved = async function () {
let notConserved = L.markerClusterGroup(clusterOptions); let notConserved = L.markerClusterGroup(clusterOptions);
for (let record of notConserData.records) { for (let record of notConserData.records) {
const marker = L.marker(record.coordinates, {icon: Icons.notConserved}) const marker = L.marker(
.bindTooltip(record.denomination) record.coordinates,
{icon: Icons.notConserved, label: record.label}
)
.bindTooltip(record.label)
.on('click', () => UI.openNotConserModal(record, '#not-conser-data')); .on('click', () => UI.openNotConserModal(record, '#not-conser-data'));
notConserved.addLayer(marker); notConserved.addLayer(marker);
// Populate app state for reuse and avoid window.Sites etc. // Populate app state for reuse and avoid window.Sites etc.
const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`; const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
marker.options.municipality = record.municipality;
GisState.markers.notConserved[markerLabel] = marker; GisState.markers.notConserved[markerLabel] = marker;
} }
@@ -222,8 +285,10 @@ GIS.findings = async function () {
); );
for (let record of findingsData) { for (let record of findingsData) {
const marker = L.marker(record.coordinates, {icon: Icons.finding} const marker = L.marker(
).bindTooltip(record.object) record.coordinates,
{icon: Icons.finding, label: record.label}
).bindTooltip(record.label)
.on( .on(
'click', 'click',
() => UI.openFindingModal(record, '#finding-data') () => UI.openFindingModal(record, '#finding-data')
@@ -231,6 +296,7 @@ GIS.findings = async function () {
findings.addLayer(marker); findings.addLayer(marker);
const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`; const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
marker.options.municipality = record.municipality;
GisState.markers.findings[markerLabel] = marker; GisState.markers.findings[markerLabel] = marker;
} }
@@ -253,14 +319,15 @@ GIS.prehistoric = async function () {
for (let record of data.records) { for (let record of data.records) {
const marker = L.marker( const marker = L.marker(
record.coordinates, record.coordinates,
{icon: Icons.prehistoric} {icon: Icons.prehistoric, label: record.label}
).bindTooltip(record.denomination) ).bindTooltip(record.label)
.on( .on(
'click', 'click',
() => UI.openPrehistModal(record, '#prehist-data') () => UI.openPrehistModal(record, '#prehist-data')
); );
const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`; const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
marker.options.municipality = record.municipality;
GisState.markers.prehistoric[markerLabel] = marker; GisState.markers.prehistoric[markerLabel] = marker;
prehistoric.addLayer(marker); prehistoric.addLayer(marker);
@@ -284,7 +351,7 @@ GIS.underwater = async function () {
const marker = L.marker( const marker = L.marker(
record.coordinates, record.coordinates,
{icon: Icons.underwater} {icon: Icons.underwater}
).bindTooltip(record.denomination) ).bindTooltip(record.label)
.on( .on(
'click', 'click',
() => UI.openUnderwaterModal(record, '#underwater-data') () => UI.openUnderwaterModal(record, '#underwater-data')
@@ -508,11 +575,56 @@ GIS.featurePopup = function (layerName, feature) {
return content[layerName]; return content[layerName];
} }
/** /**
* Fetch data from API * Reproject WMS layer to map's CRS
* @param {string} recordId * @todo Parametrize CRS?
* @returns {L.TileLayer.WMS}
*/ */
GIS._fetchData = async function (recordId) { GIS.reprojectWMS = function (crs = 'EPSG:4258') {
const data = await fetch(`${API_URL}/${recordId}`) // Define EPSG:4258
proj4.defs('EPSG:4258', "+proj=longlat +ellps=GRS80 +no_defs +type=crs");
const reprojectedWMSLayer = L.TileLayer.WMS.extend({
getTileUrl(tilePoint) {
const map = GisState.map;
//const crs = map.options.crs;
const tileSize = this.getTileSize();
//const geoPoint = L.point(tilePoint.x, tilePoint.y);
const nwPoint = L.point(
tilePoint.x * tileSize.x,
tilePoint.y * tileSize.y,
)
const sePoint = nwPoint.add(L.point(tileSize));
const nw = map.unproject(nwPoint, tilePoint.z);
const se = map.unproject(sePoint, tilePoint.z);
const [minX, minY] = proj4('EPSG:4326', 'EPSG:4258', [nw.lng, se.lat]);
const [maxX, maxY] = proj4('EPSG:4326', 'EPSG:4258', [se.lng, nw.lat]);
const bbox = [minX, minY, maxX, maxY].join(',');
return this._url + L.Util.getParamString({
...this.wmsParams,
bbox,
width: tileSize.x,
height: tileSize.y,
srs: 'EPSG:4258'
},
this._url,
true
);
}
});
return reprojectedWMSLayer;
}
/**
* Fetch data from API
* @param {string} recordUri The URI to be appendend to the API's base URL
*/
GIS._fetchData = async function (recordUri) {
const data = await fetch(`${API_URL}/${recordUri}`)
.then(res => res.json()) .then(res => res.json())
.catch(err => console.log('Error fetching data from DB: ' + err)); .catch(err => console.log('Error fetching data from DB: ' + err));

4
webgis/js/index.js
View File

@@ -18,6 +18,10 @@ document.addEventListener('DOMContentLoaded', async () => {
map._container.setAttribute('aria-busy', false); map._container.setAttribute('aria-busy', false);
// Trigger Stimulus buildMenu method...
const menuEvent = new Event('menu-ready');
document.dispatchEvent(menuEvent);
GIS.toggleSpherical(map); GIS.toggleSpherical(map);
UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM); UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);

1
webgis/js/package.json
View File

@@ -12,6 +12,7 @@
"fontawesome-free": "^1.0.4", "fontawesome-free": "^1.0.4",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3", "leaflet.markercluster": "^1.5.3",
"proj4": "^2.9.4",
"spotlight.js": "^0.7.8" "spotlight.js": "^0.7.8"
}, },
"devDependencies": {} "devDependencies": {}

7
webgis/js/state.js
View File

@@ -11,10 +11,11 @@
/** /**
* @typedef {Object} GisStateType * @typedef {Object} GisStateType
* @property {L.Map|null} map * @property {L.Map|null} map
* @property {String|null} apiUrl
* @property {MarkerLookup} markers * @property {MarkerLookup} markers
* @property {LayerGroupLookup} layers * @property {LayerGroupLookup} layers
* @property {Object|null} bibliography * @property {Object|null} bibliography
* @property {String|null} apiUrl
* @property {Object} cartography
*/ */
/** @type {GisStateType} */ /** @type {GisStateType} */
@@ -36,6 +37,10 @@ export const GisState = {
}, },
bibliography: null, bibliography: null,
apiUrl : null, apiUrl : null,
cartography : {
historic: [],
cadastral: null,
}
} }
/** /**

39
webgis/js/ui.js
View File

@@ -68,31 +68,6 @@ UI.toggleBurger = function(burgerClass) {
document.querySelector(`#${menuId}`).classList.toggle('is-active'); document.querySelector(`#${menuId}`).classList.toggle('is-active');
}); });
} }
/**
* Toggle side menu
* @param {string} triggerId The ID of the trigger element
* @param {?string} listId The ID of the menu list to open (if any)
*/
UI.toggleMenu = function (triggerId, listId = null) {
const trigger = document.querySelector(`#${triggerId}`);
const menu = document.querySelector('#menu');
trigger.addEventListener('click', () => {
menu.classList.remove('is-hidden');
//menu.classList.add('is-3');
const lists = menu.querySelectorAll('ul');
if (listId !== null) {
const list = document.querySelector(`#${listId}`);
list.classList.remove('is-hidden');
for (let ul of lists) {
if (ul.id !== listId && !ul.id.includes('sub')) {
ul.classList.add('is-hidden');
}
}
}
});
}
/** /**
* Open a modal with DB site data * Open a modal with DB site data
* @param {object} data The data retrieved from the DB to display as modal content * @param {object} data The data retrieved from the DB to display as modal content
@@ -118,17 +93,9 @@ UI.openSiteModal = function (data, selector) {
let images = modal.querySelector('#photos'); let images = modal.querySelector('#photos');
let docs = modal.querySelector('#documents'); let docs = modal.querySelector('#documents');
if (data.documents?.length) { let siteDocs = new SiteDocuments;
let siteDocs = new SiteDocuments; siteDocs.siteData = data;
siteDocs.siteData = data; docs.innerHTML = siteDocs.render();
docs.innerHTML = siteDocs.render();
} else {
docs.innerHTML = `
<p class="has-text-centered">
${data.documentation}
</p>
`;
}
let surveys = data.images.filter(i => i.type === 'Survey'); let surveys = data.images.filter(i => i.type === 'Survey');
let photos = data.images.filter(i => i.type === 'Photo'); let photos = data.images.filter(i => i.type === 'Photo');

18
webgis/js/yarn.lock
View File

@@ -39,6 +39,19 @@ leaflet@^1.9.4:
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d" resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA== integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
mgrs@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/mgrs/-/mgrs-1.0.0.tgz#fb91588e78c90025672395cb40b25f7cd6ad1829"
integrity sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==
proj4@^2.9.4:
version "2.19.4"
resolved "https://registry.yarnpkg.com/proj4/-/proj4-2.19.4.tgz#38cf347309f523309ead94d565788de94f07098f"
integrity sha512-1l6JiJ2ZOzXIoo6k64diOQVOvHIF0IACMrHTaFHrEQmuo1tY1vb73mrWfTSyPH+muc0Lut4zuj5encvB1Ccuhg==
dependencies:
mgrs "1.0.0"
wkt-parser "^1.5.1"
spotlight.js@^0.7.8: spotlight.js@^0.7.8:
version "0.7.8" version "0.7.8"
resolved "https://registry.yarnpkg.com/spotlight.js/-/spotlight.js-0.7.8.tgz#0620371701508222d736e0658e8db3fbe9ddc53b" resolved "https://registry.yarnpkg.com/spotlight.js/-/spotlight.js-0.7.8.tgz#0620371701508222d736e0658e8db3fbe9ddc53b"
@@ -48,3 +61,8 @@ three@^0.169.0:
version "0.169.0" version "0.169.0"
resolved "https://registry.yarnpkg.com/three/-/three-0.169.0.tgz#4a62114988ad9728d73526d1f1de6760c56b4adc" resolved "https://registry.yarnpkg.com/three/-/three-0.169.0.tgz#4a62114988ad9728d73526d1f1de6760c56b4adc"
integrity sha512-Ed906MA3dR4TS5riErd4QBsRGPcx+HBDX2O5yYE5GqJeFQTPU+M56Va/f/Oph9X7uZo3W3o4l2ZhBZ6f6qUv0w== integrity sha512-Ed906MA3dR4TS5riErd4QBsRGPcx+HBDX2O5yYE5GqJeFQTPU+M56Va/f/Oph9X7uZo3W3o4l2ZhBZ6f6qUv0w==
wkt-parser@^1.5.1:
version "1.5.2"
resolved "https://registry.yarnpkg.com/wkt-parser/-/wkt-parser-1.5.2.tgz#a8eaf86ac2cc1d0a2e6a8082a930f5c7ebdb5771"
integrity sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q==