Refine building view dynamics

TODO: refactor!!

css/app.css

@@ -1,5 +1,5 @@
-@import url("../webgis/js/vendor/bulma/css/bulma.min.css");
+@import url("../vendor/bulma/css/bulma.min.css");
-@import url("../webgis/js/vendor/fontawesome-free/css/all.min.css");
+@import url("../vendor/fontawesome-free/css/all.min.css");
 @import url("../fonts/fonts.css");
 /* Variables */
 :root {
@@ -211,3 +211,27 @@ input:invalid {
 .mixed-tech {
     color: #f0280f;
 }
+/* Building view top bar */
+.bview-bar {
+    position: absolute;
+    top: 4rem;
+    width: 450px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 8px;
+}
+/* Map container border for building view */
+.bview-active {
+    border:#263aac 4px solid;
+    border-radius: 8px;
+    background-color: #aad3df;
+}
+.bview-legend {
+    position: absolute;
+    bottom: 2rem;
+    right: 0.8rem;
+    width: fit-content;
+    border-radius: 8px;
+    min-height: 200px;
+    z-index: 9999;
+}

index.html

@@ -4,12 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="css/app.css" />
     <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
-    <link rel="stylesheet" href="webgis/js/vendor/spotlight.js/dist/css/spotlight.min.css" />
+    <link rel="stylesheet" href="/vendor/spotlight.js/dist/css/spotlight.min.css" />
     <title>Carta Archeologica Isola di Capri</title>
     <script type="importmap">
     {
         "imports": {
-        "@hotwired/stimulus": "./webgis/js/vendor/@hotwired/stimulus/dist/stimulus.js"
+        "@hotwired/stimulus": "./vendor/@hotwired/stimulus/dist/stimulus.js"
         }
     }
     </script>
@@ -560,7 +560,7 @@
     <script type="module">
         import { Application } from '@hotwired/stimulus';
         import ModalController from './webgis/js/controllers/modal_controller.js';
-        import Spotlight from './webgis/js/vendor/spotlight.js/src/js/spotlight.js';
+        import Spotlight from './vendor/spotlight.js/src/js/spotlight.js';
 
         window.Stimulus = Application.start();
         Stimulus.register("modal", ModalController);

package.json

@@ -3,7 +3,7 @@
   "version": "0.01",
   "main": "index.js",
   "author": "Nicolò P.",
-  "license": "GPLv3",
+  "license": "GPL-3.0-or-later",
   "dependencies": {
     "@hotwired/stimulus": "^3.2.2",
     "@kalisio/leaflet-graphicscale": "^1.0.0",
@@ -15,5 +15,10 @@
     "proj4": "^2.9.4",
     "spotlight.js": "^0.7.8"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "standard": "^17.1.2"
+  },
+  "scripts": {
+    "start": "symfony server:start --port=3000"
+  }
 }

webgis/geojson/murarie/tiberio/elemento.geojson

@@ -0,0 +1,17 @@
+{
+"type": "FeatureCollection",
+"name": "elementi",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Elemento Architettonico", "Tipologia": "Mensola", "Materiale": "Marmo", "Descrizione": "Mensola di sostegno posta in corrispondenza dell'imposta della piattabanda" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229579823747143, 40.559347642705454 ], [ 14.229579828259789, 40.559349552504365 ], [ 14.229584850399243, 40.559349576064363 ], [ 14.229585593974916, 40.559349406230019 ], [ 14.2295856739021, 40.559347823066155 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Elemento Architettonico", "Tipologia": "Mensola", "Materiale": "Marmo", "Descrizione": "Mensola di sostegno posta in corrispondenza dell'imposta della piattabanda" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229605952506683, 40.559348448254696 ], [ 14.229606104433259, 40.55934977620344 ], [ 14.229611019025004, 40.559349682106856 ], [ 14.229611404408997, 40.559349255869733 ], [ 14.229611467114879, 40.559348618269226 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Elemento Architettonico", "Tipologia": "Plinto di appoggio della colonna", "Materiale": "Marmo", "Descrizione": "Plinto a sezione quadrangolare pertinente il portico" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229206160383383, 40.559337440370435 ], [ 14.22920636811714, 40.559331015619343 ], [ 14.229207027760287, 40.559330457313607 ], [ 14.229214486108752, 40.559330677143329 ], [ 14.229215019410779, 40.559330766825461 ], [ 14.22921470325031, 40.559337692165599 ], [ 14.229206160383383, 40.559337440370435 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Elemento Architettonico", "Tipologia": "Plinto di appoggio della colonna", "Materiale": "Marmo", "Descrizione": "Plinto a sezione quadrangolare pertinente il portico con foro di ancoraggio" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229173166036801, 40.559336467878659 ], [ 14.229173512485005, 40.559329630587243 ], [ 14.229181712276057, 40.559329863787717 ], [ 14.229182089384732, 40.55933039973948 ], [ 14.229181200214057, 40.559336704682863 ], [ 14.229173166036801, 40.559336467878659 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Elemento Architettonico", "Tipologia": "Plinto di appoggio della colonna", "Materiale": "Marmo", "Descrizione": "Plinto a sezione quadrangolare pertinente il portico con fori di ancoraggio" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229170235524302, 40.559373898793687 ], [ 14.229170237992616, 40.559373789988101 ], [ 14.22917036847986, 40.559368037991106 ], [ 14.229170899588624, 40.559367174125732 ], [ 14.229176144515806, 40.559367342861641 ], [ 14.229178565601487, 40.559368587639092 ], [ 14.229178491746385, 40.559373844963538 ], [ 14.229178379054575, 40.559374156392927 ], [ 14.229170235524302, 40.559373898793687 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Elemento Architettonico", "Tipologia": "Plinto di appoggio della colonna", "Materiale": "Marmo", "Descrizione": "Plinto a sezione quadrangolare pertinente il portico con fori di ancoraggio" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229204544016691, 40.559375101719667 ], [ 14.229204259325266, 40.559374583548355 ], [ 14.229204645760371, 40.559368321856041 ], [ 14.229213010657578, 40.559368496847995 ], [ 14.229213342131985, 40.559368791004367 ], [ 14.229213052141933, 40.559375192079614 ], [ 14.229212503714489, 40.559375409611839 ], [ 14.229204544016691, 40.559375101719667 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Elemento Architettonico", "Tipologia": "Plinto di appoggio della colonna", "Materiale": "Marmo", "Descrizione": "Plinto a sezione quadrangolare pertinente il portico con fori di ancoraggio" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229239876876305, 40.559376171598444 ], [ 14.229240399547615, 40.559369537798887 ], [ 14.229241651151682, 40.559369156931098 ], [ 14.229248659476369, 40.559369418090029 ], [ 14.229249046089533, 40.559370300174891 ], [ 14.229248838207333, 40.559376209263796 ], [ 14.229248663019352, 40.559376487987159 ], [ 14.229239876876305, 40.559376171598444 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Elemento Architettonico", "Tipologia": "Plinto di appoggio della colonna", "Materiale": "Marmo", "Descrizione": "Plinto a sezione quadrangolare pertinente il portico con fori di ancoraggio" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229275562563547, 40.559377226565061 ], [ 14.22927453163433, 40.55937678827263 ], [ 14.229275084316237, 40.559370550637617 ], [ 14.229275608939751, 40.559370443427305 ], [ 14.229283158374926, 40.559370721549804 ], [ 14.229283002639065, 40.559376952220767 ], [ 14.229282681359125, 40.559377323467039 ], [ 14.229275562563547, 40.559377226565061 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Elemento Architettonico", "Tipologia": "Plinto di appoggio della colonna", "Materiale": "Marmo", "Descrizione": "Plinto a sezione quadrangolare pertinente il portico con fori di ancoraggio" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.22924164765231, 40.559338486329295 ], [ 14.229241918978127, 40.559331814365798 ], [ 14.229242584692903, 40.559331438858202 ], [ 14.22924964982562, 40.559331713533943 ], [ 14.22925039925563, 40.559332070781352 ], [ 14.229250061619013, 40.559338734322608 ], [ 14.22924164765231, 40.559338486329295 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Elemento Architettonico", "Tipologia": "Plinto di appoggio della colonna", "Materiale": "Marmo", "Descrizione": "Plinto a sezione quadrangolare pertinente il portico con fori di ancoraggio" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229275324518381, 40.559339478896263 ], [ 14.229275522994854, 40.559333237720999 ], [ 14.22927618467722, 40.559332639158235 ], [ 14.229283693444854, 40.55933271695919 ], [ 14.229284174288592, 40.559332988921916 ], [ 14.229283869468352, 40.559339730751461 ], [ 14.229275324487123, 40.559339480518176 ] ] ] } }
+]
+}

webgis/geojson/murarie/tiberio/incerta.geojson

@@ -0,0 +1,9 @@
+{
+"type": "FeatureCollection",
+"name": "incerta",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": null, "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera incerta", "Materiale": "Calcare", "Funzione": "Sostruttiva", "Descrizione": "Muro di terrazzamento", "Tipologia": "Alzato", "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229125962859451, 40.559293424754848 ], [ 14.229077232408146, 40.559276332411876 ] ] ] } },
+{ "type": "Feature", "properties": { "id": null, "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera incerta", "Materiale": "Calcare", "Funzione": "Sostruttiva", "Descrizione": "Muro di terrazzamento", "Tipologia": "Alzato", "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229106793580016, 40.559279154383496 ], [ 14.22906711717304, 40.55926567389912 ] ] ] } }
+]
+}

webgis/geojson/murarie/tiberio/mista.geojson

@@ -0,0 +1,13 @@
+{
+"type": "FeatureCollection",
+"name": "mista",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": null, "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera mista", "Materiale": "Tufo, laterizio", "Funzione": "Rappresentativa, sostruttiva", "Descrizione": "esedra-ninfeo semicircolare", "Tipologia": "Alzato", "Tecniche componenti": "Opera reticolata, ricorsi in laterizi" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229125962859451, 40.559293424754848 ], [ 14.229119027504554, 40.559307701077607 ], [ 14.229114255687017, 40.559332778429557 ], [ 14.229115817714645, 40.559333786240899 ], [ 14.229144094287724, 40.559334581743741 ], [ 14.229144075228009, 40.559329644329374 ], [ 14.22914238860027, 40.559329648116645 ], [ 14.229142854399703, 40.55932506109832 ], [ 14.229143737666657, 40.559320509930103 ], [ 14.229145034117105, 40.559316016685713 ], [ 14.229146737463013, 40.559311603157909 ], [ 14.229148839442852, 40.559307290752869 ], [ 14.229151329861718, 40.559303100386281 ], [ 14.229154196640712, 40.559299052381945 ], [ 14.229157425875538, 40.55929516637309 ], [ 14.229161001903952, 40.559291461207401 ], [ 14.229164907381776, 40.559287954855279 ], [ 14.229169123366898, 40.559284664323023 ], [ 14.229173629411305, 40.55928160557005 ], [ 14.229178403660082, 40.559278793431716 ], [ 14.22918342295757, 40.559276241547124 ], [ 14.229188662959576, 40.559273962293268 ], [ 14.229194098251455, 40.559271966724772 ], [ 14.229199702471446, 40.559270264520407 ], [ 14.229205448438432, 40.559268863935969 ], [ 14.2292113082838, 40.559267771764546 ], [ 14.229217253586681, 40.55926699330324 ], [ 14.229223255511652, 40.559266532327676 ], [ 14.229229284948701, 40.559266391073635 ], [ 14.229235312654435, 40.559266570226242 ], [ 14.229241309393782, 40.559267068916604 ], [ 14.229247246081862, 40.559267884725955 ], [ 14.229253093925117, 40.559269013697552 ], [ 14.229258824560809, 40.559270450355783 ], [ 14.229264410194732, 40.559272187732709 ], [ 14.229269823735891, 40.559274217401764 ], [ 14.229275038928018, 40.559276529518947 ], [ 14.229280030476794, 40.559279112870129 ], [ 14.229284774172603, 40.559281954925822 ], [ 14.229289247007975, 40.559285041901717 ], [ 14.229293427289056, 40.55928835882559 ], [ 14.229297294741009, 40.559291889610009 ], [ 14.229300830606165, 40.559295617130253 ], [ 14.22930401773508, 40.559299523307423 ], [ 14.22930684066977, 40.559303589196105 ], [ 14.22930928571861, 40.55930779507618 ], [ 14.229311341022688, 40.559312120548718 ], [ 14.229312996613533, 40.559316544634576 ], [ 14.229314244461188, 40.559321045876466 ], [ 14.229315078513386, 40.559325602442769 ], [ 14.229315494724741, 40.559330192233595 ], [ 14.229315491076568, 40.559334792987883 ], [ 14.229313827244397, 40.559334789300671 ], [ 14.229313481939895, 40.559334971251047 ], [ 14.229313378802191, 40.559339282217884 ], [ 14.22931381492308, 40.559339441320432 ] ] ] } },
+{ "type": "Feature", "properties": { "id": null, "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera mista", "Materiale": "Tufo, laterizio", "Funzione": "Sostruttiva", "Descrizione": "Lungo muro del fronte marittimo", "Tipologia": "Alzato", "Tecniche componenti": "Opera reticolata, ricorsi di laterizi" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.22931381492308, 40.559339441320432 ], [ 14.229613569774694, 40.559348683093816 ], [ 14.229613968474398, 40.559344390331148 ], [ 14.229327505424274, 40.55933511780519 ] ] ] } },
+{ "type": "Feature", "properties": { "id": null, "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera mista", "Materiale": "Calcare, tufo", "Funzione": "Sostruttiva", "Descrizione": "Muro di terrazzamento", "Tipologia": "Alzato", "Tecniche componenti": "Opera incerta, ricorsi in blocchetti di tufo" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229340046536493, 40.559298014560952 ], [ 14.229343907872899, 40.559328271382761 ], [ 14.229587901628449, 40.559310158238176 ] ] ] } },
+{ "type": "Feature", "properties": { "id": null, "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera mista", "Materiale": "Calcare, laterizio", "Funzione": "Idraulica, sostruttiva", "Descrizione": "Ambiente voltato lungo la costa", "Tipologia": "Cisterna", "Tecniche componenti": "Opera incerta, ricorsi in laterizi" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.228740514577398, 40.559290678797417 ], [ 14.228757030245625, 40.559290779453839 ], [ 14.22876137586751, 40.559260087003807 ], [ 14.228706013346551, 40.559255527343105 ], [ 14.228701209787104, 40.559254725198137 ], [ 14.228698621277488, 40.559252496985891 ], [ 14.228696999384187, 40.559249239971599 ], [ 14.228695965772054, 40.55924535245277 ], [ 14.228694321397244, 40.559243013607407 ], [ 14.228691151596756, 40.559240553904196 ] ] ] } },
+{ "type": "Feature", "properties": { "id": null, "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera mista", "Materiale": "Calcare, laterizio", "Funzione": "Sostruttiva", "Descrizione": "Muro di terrazzamento in proprietà privata", "Tipologia": "Alzato", "Tecniche componenti": "Opera incerta, ricorsi in laterizi" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.228779522966455, 40.559227158947131 ], [ 14.228691151596756, 40.559240553904196 ], [ 14.228687830297289, 40.559239868051613 ], [ 14.228678247916699, 40.559235419418592 ], [ 14.228672545215792, 40.559229395833363 ], [ 14.228669880011246, 40.559223247005235 ], [ 14.228668188451788, 40.559217635170157 ], [ 14.228665233319962, 40.559209985080962 ], [ 14.228665314958571, 40.559206680087918 ], [ 14.228666225418504, 40.5591999355929 ], [ 14.228667704943051, 40.559196072053709 ], [ 14.228670966908966, 40.559194107458204 ] ] ] } },
+{ "type": "Feature", "properties": { "id": null, "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera mista", "Materiale": "Calcare, laterizio", "Funzione": "Sostruttiva", "Descrizione": "Muro di terrazzamento in proprietà privata", "Tipologia": "Alzato", "Tecniche componenti": "Opera incerta, ricorsi in laterizi" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.228721778590458, 40.559193425798213 ], [ 14.228722624818966, 40.559196088497167 ], [ 14.228894920776289, 40.559164236351336 ] ] ] } }
+]
+}

webgis/geojson/murarie/tiberio/nulla.geojson

@@ -0,0 +1,10 @@
+{
+"type": "FeatureCollection",
+"name": "nulla",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": null, "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": null, "Materiale": "Tufo, calcare", "Funzione": null, "Descrizione": "Lunga fondazione del fronte marittimo, in cavo libero, presenza di crolli e massi calcarei inglobati", "Tipologia": "Fondazione", "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.22931381492308, 40.559339441320432 ], [ 14.229312731565598, 40.559340328235081 ], [ 14.229313329851063, 40.559340599071419 ], [ 14.229316949910668, 40.559341427623359 ], [ 14.229339944569844, 40.559341711969132 ], [ 14.229344630552427, 40.559342234739425 ], [ 14.229354623612091, 40.559341873947574 ], [ 14.229386512315168, 40.55934239273747 ], [ 14.229421327715173, 40.559343573955211 ], [ 14.229423422203254, 40.559344714266295 ], [ 14.229444051408674, 40.559346460825246 ], [ 14.229444063596889, 40.559347005209389 ], [ 14.229442319218649, 40.559349968459955 ], [ 14.229440545903209, 40.559353767059797 ], [ 14.229441058983241, 40.559359477337551 ], [ 14.229443418668948, 40.559362713868758 ], [ 14.229448039722415, 40.559364795557514 ], [ 14.229451249252561, 40.55936555241945 ], [ 14.229455429900806, 40.559364989735236 ], [ 14.229461236678773, 40.559364696291652 ], [ 14.229463648572265, 40.559366008084289 ], [ 14.229469750420954, 40.559368252004596 ], [ 14.229478787043982, 40.559369622730152 ], [ 14.229488067327752, 40.559368807305539 ], [ 14.22949874005401, 40.559366635339899 ], [ 14.229506003474448, 40.559364648061333 ], [ 14.229513494813306, 40.55936084759977 ], [ 14.2295251929794, 40.559353398354418 ], [ 14.229537525619898, 40.559347704126218 ], [ 14.229549249092342, 40.559347769253478 ], [ 14.22955338696765, 40.559347424935702 ], [ 14.229574202703823, 40.559348066689751 ], [ 14.229577757148535, 40.55935180604061 ], [ 14.229581757982922, 40.559355124063728 ], [ 14.22958375907727, 40.559355703865229 ], [ 14.22958975953626, 40.559355095578702 ], [ 14.229591619729009, 40.559353821745489 ], [ 14.229589980124928, 40.559352428978855 ], [ 14.229588036426488, 40.559349172954356 ], [ 14.229587969775142, 40.559348416491019 ], [ 14.229589700976272, 40.559347947220999 ] ] ] } },
+{ "type": "Feature", "properties": { "id": null, "Comune": null, "Località": null, "Categoria": null, "Tecnica": null, "Materiale": null, "Funzione": null, "Descrizione": null, "Tipologia": null, "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ ] } },
+{ "type": "Feature", "properties": { "id": null, "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": null, "Materiale": null, "Funzione": "Sostruttiva", "Descrizione": "Muro di terrazzamento a sezione semicircolare privo di paramento", "Tipologia": "Alzato", "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229340046536493, 40.559298014560952 ], [ 14.229335147920395, 40.559292898780313 ], [ 14.229329826200066, 40.559288035056682 ], [ 14.229324103610235, 40.559283443711088 ], [ 14.229318004060504, 40.559279143926709 ], [ 14.22931155303541, 40.559275153668317 ], [ 14.229304777487991, 40.559271489607625 ], [ 14.229297705727118, 40.559268167053396 ], [ 14.229290367299253, 40.55926519988757 ], [ 14.229282792865098, 40.559262600507189 ], [ 14.229275014071247, 40.559260379772724 ], [ 14.229267063418257, 40.559258546962589 ], [ 14.229258974124612, 40.559257109734425 ] ] ] } }
+]
+}

webgis/geojson/murarie/tiberio/reticolata.geojson

@@ -0,0 +1,14 @@
+{
+"type": "FeatureCollection",
+"name": "reticolata",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera reticolata", "Materiale": "Tufo", "Funzione": null, "Descrizione": "Murature di fondo e divisorie degli ambienti prospicienti il mare, posti all’estremità orientale del complesso dei Bagni di Tiberio", "Tipologia": "Alzati", "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229777980072088, 40.559287936017519 ], [ 14.229767127017078, 40.559288012101483 ], [ 14.22976727121063, 40.559297587195992 ], [ 14.229760323645737, 40.559297626052306 ], [ 14.229760154396285, 40.559286387060112 ], [ 14.229750772025486, 40.559286469247525 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera reticolata", "Materiale": "Tufo", "Funzione": null, "Descrizione": "Lacerto murario in giacitura secondaria, riferibile a una struttura con fondazione in opera cementizia e alzato in opera reticolata", "Tipologia": "alzato, attacco di fondazione", "Tecniche componenti": "Cubilia, scapoli di calcare, scapoli di tufo" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229748638716192, 40.559312774822097 ], [ 14.229749854780234, 40.559313917882299 ], [ 14.229749311598642, 40.559316242764893 ], [ 14.229747641045932, 40.559318431170922 ], [ 14.229745404602166, 40.559318825800922 ], [ 14.229707320793663, 40.559318057726777 ], [ 14.229688319593144, 40.559316631832786 ], [ 14.229687414956194, 40.55931462813308 ], [ 14.229689070847257, 40.559311784892955 ], [ 14.229707054884152, 40.559311704425625 ], [ 14.22973485378067, 40.559312265073793 ], [ 14.229745138689067, 40.559312472499833 ], [ 14.229748638716192, 40.559312774822097 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera reticolata", "Materiale": "Tufo", "Funzione": null, "Descrizione": "Due murature, rispettivamente di fondo e laterale, pertinenti a un ambiente prospiciente il mare nell’area orientale del complesso dei Bagni di Tiberio", "Tipologia": "Alzati", "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229694021609493, 40.55930762924018 ], [ 14.229694082338904, 40.559310341259078 ], [ 14.229682272612358, 40.559310495088383 ], [ 14.229616809841877, 40.559314335557936 ], [ 14.229615693144396, 40.559336306937048 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera reticolata", "Materiale": "Tufo", "Funzione": null, "Descrizione": "Due murature pertinenti a un ambiente ubicato sul livello superiore dell’area occidentale del complesso dei Bagni di Tiberio.", "Tipologia": "Alzati", "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229012969950622, 40.559279324646354 ], [ 14.22901299762786, 40.559273288155325 ], [ 14.228949305222281, 40.559271595449403 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera reticolata", "Materiale": "Tufo", "Funzione": null, "Descrizione": "Muratura in pessimo stato di conservazione, inglobata in costruzione moderna", "Tipologia": "Alzato", "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.228945620292212, 40.559244814778907 ], [ 14.228945097860407, 40.559260882019025 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera reticolata", "Materiale": "Tufo", "Funzione": "Sostruttiva", "Descrizione": "Fondazione del terrazzamento prospiciente il mare, con porticato soprastante", "Tipologia": "Fondazione", "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.22932061572207, 40.559368986602635 ], [ 14.229319898205036, 40.559370575004976 ], [ 14.229315830697367, 40.559373603453658 ], [ 14.229313913113851, 40.559377741595505 ] ] ] } },
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "USM", "Tecnica": "Opera reticolata", "Materiale": "Tufo", "Funzione": "Sostruttiva", "Descrizione": "Fondazione del porticato antistante l'esedra", "Tipologia": "Fondazione", "Tecniche componenti": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229137040051352, 40.55937329635141 ], [ 14.229116998093058, 40.559372712138945 ] ] ] } }
+]
+}

webgis/geojson/murarie/tiberio/rivestimento.geojson

@@ -0,0 +1,8 @@
+{
+"type": "FeatureCollection",
+"name": "rivestimenti",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "Comune": "Capri", "Località": "Bagni di Tiberio", "Categoria": "Rivestimento", "Tipologia": "Cocciopesto", "Descrizione": "Rivestimento pavimentale di un ambiente all'estremità orientale del complesso" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.229615693144396, 40.559336306937048 ], [ 14.229618910157779, 40.559337531158498 ], [ 14.2296195305869, 40.559337523077396 ], [ 14.229620924959729, 40.559335702318364 ], [ 14.229620316601322, 40.559332784714336 ], [ 14.22962074463037, 40.559329380795575 ], [ 14.229623977930633, 40.559324710141411 ], [ 14.22962504290512, 40.55932203670163 ], [ 14.22962671640142, 40.559318823416724 ], [ 14.229628052419137, 40.55931786038883 ], [ 14.229632359403288, 40.559315988104487 ], [ 14.229634664812346, 40.559315012450021 ], [ 14.22963642803367, 40.55931407340929 ], [ 14.229638436458281, 40.559313692639996 ], [ 14.229644402075515, 40.559313348976893 ], [ 14.229664733914671, 40.559311931670514 ], [ 14.229674338968824, 40.559312514760968 ], [ 14.229679746740763, 40.559313242194968 ], [ 14.2296809875986, 40.559313226032067 ], [ 14.229681784693618, 40.559312447327883 ], [ 14.229682272612358, 40.559310495088383 ] ] ] } }
+]
+}

webgis/img/icons/bricks.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bricks" viewBox="0 0 16 16">
+  <path d="M0 .5A.5.5 0 0 1 .5 0h15a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H14v2h1.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H14v2h1.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H.5a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5H2v-2H.5a.5.5 0 0 1-.5-.5v-3A.5.5 0 0 1 .5 6H2V4H.5a.5.5 0 0 1-.5-.5zM3 4v2h4.5V4zm5.5 0v2H13V4zM3 10v2h4.5v-2zm5.5 0v2H13v-2zM1 1v2h3.5V1zm4.5 0v2h5V1zm6 0v2H15V1zM1 7v2h3.5V7zm4.5 0v2h5V7zm6 0v2H15V7zM1 13v2h3.5v-2zm4.5 0v2h5v-2zm6 0v2H15v-2z"/>
+</svg>

webgis/index.html

@@ -2,32 +2,37 @@
 <html lang="it" data-text="html" data-theme="light">
 <head>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
+    <link rel="stylesheet" href="/vendor/leaflet/dist/leaflet.css" />
-    <link rel="stylesheet" href="js/vendor/leaflet.markercluster/dist/MarkerCluster.css" />
+    <link rel="stylesheet" href="/vendor/leaflet.markercluster/dist/MarkerCluster.css" />
-    <link rel="stylesheet" href="js/vendor/leaflet.markercluster/dist/MarkerCluster.Default.css" />
+    <link rel="stylesheet" href="/vendor/leaflet.markercluster/dist/MarkerCluster.Default.css" />
     <link rel="stylesheet" href="../css/app.css" />
-    <link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
+    <link rel="stylesheet" href="/vendor/spotlight.js/dist/css/spotlight.min.css" />
-    <link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
+    <link rel="stylesheet" href="/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
-    <link rel="stylesheet" href="js/vendor/@photo-sphere-viewer/core/index.css" />
+    <link rel="stylesheet" href="/vendor/@photo-sphere-viewer/core/index.css" />
     <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
     <script type="importmap">
     {
         "imports": {
-            "three": "./js/vendor/three/build/three.module.js",
+            "three": "../vendor/three/build/three.module.js",
-            "@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js",
+            "@photo-sphere-viewer/core": "../vendor/@photo-sphere-viewer/core/index.module.js",
-            "@hotwired/stimulus": "./js/vendor/@hotwired/stimulus/dist/stimulus.js"
+            "@hotwired/stimulus": "../vendor/@hotwired/stimulus/dist/stimulus.js"
         }
     }
     </script>
-    <script src="./js/vendor/proj4/dist/proj4.js"></script>
+    <script src="/vendor/proj4/dist/proj4.js"></script>
-    <script src="js/vendor/leaflet/dist/leaflet-src.js"></script>
+    <script src="/vendor/leaflet/dist/leaflet-src.js"></script>
-    <script src="js/vendor/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
+    <script src="/vendor/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
-    <script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
+    <script src="/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
     <script src="js/index.js" type="module"></script>
     <title>WebGIS Isola di Capri</title>
 </head>
-<body data-controller="menu modal"
+<body data-controller="menu modal bview"
-    data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu">
+    data-action="
+        menu-ready@document->menu#buildMenu
+        menu-ready@document->menu#buildCartographyMenu
+        keydown.esc->bview#closeView
+        bview-active@document->bview#openView
+    ">
     <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">
@@ -613,5 +618,81 @@
         </div>
         <button class="modal-close is-large" aria-label="close"></button>
     </div>
+    <!-- Top bar for bview -->
+    <div class="container bview-bar has-background-primary-90 p-3 is-hidden" data-bview-target="bar">
+		<button title="Esci da mappa di dettaglio" class="delete is-pulled-right" data-action="bview#closeView"></button>
+		<p class="has-text-centered has-text-weight-semibold is-size-5 p-2">Mappa di dettaglio interattiva</p>
+		<p class="has-text-centered is-size-6 mt-0 pt-0">(Chiudere questo riquadro o premere ESC per uscire)</p>
+	</div>
+    <!-- Legend for bview -->
+    <div class="bview-legend container is-hidden has-background-white p-4" data-bview-target="legend">
+        <h4 class="has-text-weight-semibold pb-2">Legenda</h4>
+        <ul type="none">
+            <li id="poligonale">
+                <span class="icon-text">
+                    <span class="icon polygon-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera poligonale</span>
+                </span>
+            </li>
+            <li id="incerta">
+                <span class="icon-text">
+                    <span class="icon uncertain-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera incerta</span>
+                </span>
+            </li>
+            <li id="reticolata">
+                <span class="icon-text">
+                    <span class="icon reticul-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera reticolata</span>
+                </span>
+            </li>
+            <li id="laterizia">
+                <span class="icon-text">
+                    <span class="icon later-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera laterizia</span>
+                </span>
+            </li>
+            <li id="mista">
+                <span class="icon-text">
+                    <span class="icon mixed-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera mista</span>
+                </span>
+            </li>
+            <li id="cementizia">
+                <span class="icon-text">
+                    <span class="icon cement-tech">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Opera cementizia</span>
+                </span>
+            </li>
+            <li id="elemento">
+                <span class="icon-text">
+                    <span class="icon arch-element">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Elemento architettonico</span>
+                </span>
+            </li>
+            <li id="rivestimento">
+                <span class="icon-text">
+                    <span class="icon cover">
+                        <i class="fas fa-square"></i>
+                    </span>
+                    <span>Rivestimento</span>
+                </span>
+            </li>
+        </ul>
+    </div>
 </body>
 </html>

webgis/js/controllers/bview_controller.js

@@ -0,0 +1,90 @@
+import { Controller } from "@hotwired/stimulus"
+import { GisState } from '../state.js';
+import { TECH_LAYERS } from "../map.js";
+
+const LEGEND_DEF = [
+    "puntatore",
+    "icona",
+];
+
+export default class extends Controller {
+    static targets = ['bar', 'legend'];
+
+    openView() {
+        const map = GisState.map;
+        // Remove all other layers first!
+        for (const key of Object.keys(GisState.layers)) {
+            if (GisState.layers[key] instanceof L.Layer && key !== 'geometries') {
+                map.removeLayer(GisState.layers[key]);
+            }
+        }
+        /**
+         * @type {string[]}
+         */
+        const currentTechs = [...TECH_LAYERS[GisState.currentBView], ...LEGEND_DEF];
+        this.barTarget.classList.remove('is-hidden');
+
+        /**
+         * @type {HTMLDivElement}
+         */
+        const legend = this.legendTarget;
+        const items = legend.querySelectorAll('li');
+
+        for (let item of items) {
+            if (!currentTechs.includes(item.id)) item.classList.add('is-hidden');
+        }
+
+        legend.classList.remove('is-hidden');
+        map._container.classList.add('bview-active');
+    }
+
+    closeView(event) {
+        // Don't do anything if ESC keyboard event
+        // is not fired from the building view
+        if (event instanceof KeyboardEvent && !GisState.bViewActive) return;
+
+        this.reset();
+        this.barTarget.classList.add('is-hidden');
+        this.legendTarget.classList.add('is-hidden');
+        GisState.bViewActive = false;
+    }
+
+    reset() {
+        // Restore previous map state before closing view
+        const map = GisState.map;
+        // Hard-coded...
+        map.removeLayer(GisState.baseLayers['Limiti amministrativi']);
+
+        const walls = GisState.layers.walls;
+
+        // Re-add all layers first (except techniques)! (TODO: Should this be filtered by map state??)
+        for (const key of Object.keys(GisState.layers)) {
+            if (GisState.layers[key] instanceof L.Layer
+                && key !== 'geometries'
+                && key !== 'buildingTechs') {
+                map.addLayer(GisState.layers[key]);
+            }
+        }
+        // map.removeLayer(GisState.layers.walls) doesn't work, i.e.
+        // it doesn't remove the layer group (fails silently)
+        walls.eachLayer(layer => map.removeLayer(layer));
+
+        map.addLayer(GisState.currentMapState.baseLayer);
+        map.setMinZoom(GisState.currentMapState.minZoom);
+        map.setMaxZoom(GisState.currentMapState.maxZoom);
+        map.setView(
+            GisState.currentMapState.center,
+            GisState.currentMapState.zoom
+        );
+        map._container.classList.remove('bview-active');
+        /**
+         * @type {HTMLDivElement}
+         */
+        const legend = this.legendTarget;
+        const items = legend.querySelectorAll('li');
+
+        for (let item of items) {
+            item.classList.remove('is-hidden');
+        }
+    }
+}

webgis/js/controllers/menu_controller.js

@@ -7,7 +7,8 @@ export default class extends Controller {
         'menu',
         'cartography',
         'search',
-        'icon'
+        'icon',
+        'element',
     ];
 
     static values = {
@@ -169,4 +170,8 @@ export default class extends Controller {
 
         return icon;
     }
+
+    removeElement() {
+        this.elementTarget.remove();
+    }
 }

webgis/js/controllers/search_controller.js

@@ -86,7 +86,7 @@ export default class extends Controller {
 
         // Restore layer groups in map
         for (const key of Object.keys(GisState.layers)) {
-            map.addLayer(GisState.layers[key]);
+            if (GisState.layers[key] instanceof L.Layer) map.addLayer(GisState.layers[key]);
         }
 
         // Empty result set

webgis/js/gis.js

@@ -6,6 +6,7 @@ import Icons from "./icons.js";
 import { SphericalPhoto } from "./components/SphericalPhoto.js";
 import { GisState } from "./state.js";
 import Options from "./layer_options.js";
+import { saveCurrentState, TECH_LAYERS } from "./map.js";
 
 const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
 const BASE_URL = location.href;
@@ -28,6 +29,8 @@ GIS.CENTER_COORDS = [40.5492, 14.2317];
 GIS.INIT_ZOOM = 14;
 GIS.MIN_ZOOM = 11;
 GIS.MAX_ZOOM = 24;
+GIS.BVIEW_MIN_ZOOM = 19;
+GIS.BVIEW_MAX_ZOOM = 25;
 
 // Terrible... fix it!
 export const INIT_ZOOM = 14;
@@ -40,15 +43,8 @@ export const INIT_ZOOM = 14;
  */
 function capitalize(text) {
     let capital = text;
-    if (text) {
+    if (text !== null && text !== undefined && text.at && text.length) {
-        let words = text.split(' ');
+        capital = text.at(0).toLocaleUpperCase() + text.slice(1);
-        capital = '';
-
-        for (let w of words) {
-            w = w[0].toUpperCase() + w.slice(1);
-            capital += w + ' ';
-        }
-        capital.trimEnd();
     }
 
     return capital;
@@ -62,6 +58,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let map = L.map(mapId, {
         //attributionControl: false,
         minZoom: GIS.MIN_ZOOM,
+        maxZoom: GIS.MAX_ZOOM,
     }).setView(this.CENTER_COORDS, zoomLevel);
 
     map.crs = L.CRS.EPSG4326;
@@ -102,15 +99,78 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     };
     L.control.layers(baseMap, cartography).addTo(map);
 
+    // TEST: marker with SVG icon...
+    L.marker([40.5591093,14.2292432], { icon: Icons.wall, id: 'tiberio' })
+        .on('click', () => {
+            if (!GisState.bViewActive) this.activateBuildingView('tiberio')
+        })
+        .bindTooltip('Mappa di dettaglio interattiva')
+        .addTo(map);
+
     GisState.map = map;
+    GisState.cartography.buildings = buildings;
 
     return map;
 }
+
+/**
+ * Draft implementation to activate
+ * a dedicated view with details
+ * to navigate building walls
+ * @todo Find better name
+ * @param {string} layerId
+ */
+GIS.activateBuildingView = async function(layerId) {
+    const map = GisState.map;
+    saveCurrentState(map);
+    let currentBase = GisState.currentMapState.baseLayer;
+    const geometries = GisState.layers.geometries;
+
+    map.removeLayer(currentBase);
+    // Remove site layers then re-add it so vector lines
+    // are placed correctly above the new base map
+    geometries.removeFrom(map);
+    map.addLayer(GisState.baseLayers['Limiti amministrativi']);
+    geometries.addTo(map);
+
+    // TODO: move to function in separate module??
+    const wallLayers = [];
+    // Cache!
+    for (let tech of TECH_LAYERS[layerId]) {
+        try {
+            const wallLayer = await this.loadGeoJSON(
+                `murarie/${layerId}/${tech}.geojson`,
+                Options.walls[tech] ?? {...Options.site, weight: 2.5},
+                true
+            );
+
+            wallLayer.addTo(map);
+            wallLayers.push(wallLayer);
+        }
+        catch {
+            continue;
+        }
+    }
+    // The group of all added walls...
+    GisState.layers.walls = L.featureGroup(wallLayers);
+
+    map.setView(
+        GisState.layers.walls.getBounds().getCenter(),
+        20,
+        {animate: false},
+    );
+    map.setMinZoom(this.BVIEW_MIN_ZOOM);
+    map.setMaxZoom(this.BVIEW_MAX_ZOOM);
+    GisState.bViewActive = true;
+    GisState.currentBView = layerId;
+    // Global event for Stimulus
+    document.dispatchEvent(new Event('bview-active'));
+}
 /**
  * Fetches references to cartography layers
  * and updates GisState
  */
-GIS.fetchCartographyLayers = async function () {
+GIS.fetchCartographyLayers = async function() {
     const data = await this._fetchData('geoimages/menu')
         .catch(error => console.error(`Could not fetch data for geo images: ${error}`));
 
@@ -187,6 +247,9 @@ GIS.addLayerGroups = async function (map) {
     sites.markers.addTo(map);
     sites.geom.addTo(map);
 
+    // A layer group with all site geometries (GeoJSON)
+    GisState.layers.geometries = sites.geom;
+
     const groups = await Promise.all(
         [
             this.notConserved(),
@@ -213,7 +276,7 @@ GIS.sites = async function () {
         if (record.geojson) {
             const options = record.gisId === 'grotta_azzurra' ?
                 Options.grotta : Options.site;
-            geom.push(await this.loadSiteLayer(record, options));
+            geom.push(await this.loadSiteLayer(record, options, false));
         }
         if (record.area) {
             const options = record.gisId === 'villa_bismarck' ?
@@ -412,7 +475,6 @@ GIS.reuse = async function () {
  * @returns {{baseMap: {"OpenStreetMap": L.TileLayer}}}
  */
 GIS.initLayers = async function(map) {
-
     let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxNativeZoom : GIS.MAX_ZOOM,
         maxZoom: GIS.MAX_ZOOM,
@@ -427,7 +489,7 @@ GIS.initLayers = async function(map) {
         attribution: '© Mapbox'
     });
 
-    let boundaries = await this.loadGeoJSON('confini.geojson', {}, false);
+    let boundaries = await this.loadGeoJSON('confini.geojson', Options.boundaries, false);
 
     const baseGroup = new L.LayerGroup([osmap]);
     baseGroup.addTo(map);
@@ -437,6 +499,8 @@ GIS.initLayers = async function(map) {
         'Limiti amministrativi' : boundaries,
     };
 
+    GisState.baseLayers = baseMap;
+
     return baseMap;
 }
 /**
@@ -466,7 +530,7 @@ GIS.toggleSpherical = async function(map) {
                 });
                 modal.querySelector('.modal-close').addEventListener('click', () => {
                     modal.classList.remove('is-active');
-                })
+                });
                 sPhoto.setViewer(pano.filename);
             });
 
@@ -488,7 +552,7 @@ GIS.toggleSpherical = async function(map) {
  * @param {string} geoJSON geoJSON filename
  * @param {{color, opacity, weight, fillColor, fillOpacity}} options Style options for features
  * @param {boolean} popup Should the features have a popup? 
- * @returns {L.Layer}
+ * @returns {L.GeoJSON}
  */
 GIS.loadGeoJSON = async function (geoJSON, options, popup = true) {
     const geo = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
@@ -496,6 +560,9 @@ GIS.loadGeoJSON = async function (geoJSON, options, popup = true) {
         .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
     
     // Show data from feature in popUp?
+    /**
+     * @type {L.GeoJSON} layer
+     */
     const layer = new L.geoJson(geo, {
         style: function () {
             return options;
@@ -545,6 +612,8 @@ GIS.loadSiteLayer = async function (site, options, popup = true, area = false) {
         }
     });
 
+    layer.options.id = site.gisId;
+
     return layer;
 }
 /**
@@ -595,23 +664,28 @@ GIS.cacheDBData = async function (layerId, dbId) {
  * @returns {string} The popup's content
  */
 GIS.featurePopup = function (layerName, feature) {
-    const html = `
+    const html = String.raw;
-        <table class="table is-striped is-size-6 m-2">
-            <tr><th>Oggetto</th><td>${feature.properties.OGGETTO ?? 'n.d.'}</td></tr>
-            <tr><th>Anno</th><td>${feature.properties.ANNO}</td></tr>
-            <tr><th>Comune</th><td>${capitalize(feature.properties.COMUNE)}</td></tr>
-            <tr><th>Località</th><td>${capitalize(feature.properties.LOCALITA) ?? 'n.d.'}</td></tr>
-            <tr><th>Proprietà</th><td>${capitalize(feature.properties.PROPRIETA) ?? 'n.d.'}</td></tr>
-            <tr><th>Foglio</th><td>${feature.properties.FOGLIO}</td></tr>
-            <tr><th>Particella</th><td>${feature.properties.PART_BIS ?? 'n.d.'}</td></tr>
-        </table>
-    `;
-    const content = {
-        'vincoli.geojson' : html,
-        'paesistici.geojson' : html,
-    };
 
-    return content[layerName];
+    let content = html` 
+        <table class="table is-striped is-size-6 m-2">
+    `;
+    
+    for (let key of Object.keys(feature.properties)) {
+        const label = key === 'PART_BIS' ? 'Particella' :
+            key === 'PROPRIETA' ? 'Proprietà' :
+            key === 'LOCALITA' ? 'Località' :
+            key;
+
+        if (key !== 'PERCENTUAL' && key !== 'AREA' && key.toLowerCase() !== 'id') {
+            content += html`
+                <tr><th>${capitalize(label.toLocaleLowerCase())}</th><td>${capitalize(feature.properties[key]) ?? 'n.d.'}</td></tr>
+            `;
+        }
+    }
+
+    content += '</table>'
+
+    return content;
 }
 /**
  * Reproject WMS layer to map's CRS

webgis/js/icons.js

@@ -14,61 +14,56 @@ const buildingTechColors = {
  */
 const Icons = {};
 
-Icons.site = L.icon(
+Icons.site = L.icon({
-    {
+    iconUrl: 'img/icons/siti.png',
-        iconUrl: 'img/icons/siti.png',
+    iconSize: [18, 27],
-        iconSize: [18, 27],
+    iconAnchor: [10, 24],
-        iconAnchor: [10, 24],
+    tooltipAnchor: [0, -22],
-        tooltipAnchor: [0, -22],
+});
-    }
+Icons.notConserved = L.icon({
-);
+    iconUrl: 'img/icons/non_conserv.png',
-Icons.notConserved = L.icon(
+    iconSize: [18, 27],
-    {
+    iconAnchor: [10, 24],
-        iconUrl: 'img/icons/non_conserv.png',
+    tooltipAnchor: [0, -22],
-        iconSize: [18, 27],
+});
-        iconAnchor: [10, 24],
-        tooltipAnchor: [0, -22],
-    }
-);
 
-Icons.finding = L.icon(
+Icons.finding = L.icon({
-    {
+    iconUrl: 'img/icons/rinvenimenti.png',
-        iconUrl: 'img/icons/rinvenimenti.png',
+    iconSize: [18, 27],
-        iconSize: [18, 27],
+    iconAnchor: [10, 24],
-        iconAnchor: [10, 24],
+    tooltipAnchor: [0, -22],
-        tooltipAnchor: [0, -22],
+});
-    }
-);
 
-Icons.prehistoric = L.icon(
+Icons.prehistoric = L.icon({
-    {
+    iconUrl: 'img/icons/preistorici.png',
-        iconUrl: 'img/icons/preistorici.png',
+    iconSize: [18, 27],
-        iconSize: [18, 27],
+    iconAnchor: [10, 24],
-        iconAnchor: [10, 24],
+    tooltipAnchor: [0, -22],
-        tooltipAnchor: [0, -22],
+});
-    }
-);
 
-Icons.underwater = L.icon(
+Icons.underwater = L.icon({
-    {
+    iconUrl: 'img/icons/subacquei.png',
-        iconUrl: 'img/icons/subacquei.png',
+    iconSize: [18, 27],
-        iconSize: [18, 27],
+    iconAnchor: [10, 24],
-        iconAnchor: [10, 24],
+    tooltipAnchor: [0, -22],
-        tooltipAnchor: [0, -22],
+});
-    }
-);
 
-Icons.reuse = L.icon(
+Icons.reuse = L.icon({
-    {
+    iconUrl: 'img/icons/reimpiego.png',
-        iconUrl: 'img/icons/reimpiego.png',
+    iconSize: [18, 27],
-        iconSize: [18, 27],
+    iconAnchor: [10, 24],
-        iconAnchor: [10, 24],
+    tooltipAnchor: [0, -22],
-        tooltipAnchor: [0, -22],
+});
-    }
-);
 
 Icons.camera = L.divIcon({className: 'fa fa-camera'});
 
+Icons.wall = L.icon({
+    iconUrl: 'img/icons/bricks.svg',
+    iconSize: [18, 27],
+    iconAnchor: [10, 24],
+    tooltipAnchor: [0, -22],
+});
+
 /**
  * Assigns a different color to the icon
  * based on building tech type

webgis/js/index.js

@@ -9,6 +9,7 @@ import BiblioController from './controllers/biblio_controller.js';
 import TabsController from './controllers/tabs_controller.js';
 import LayerController from './controllers/layer_controller.js';
 import SearchController from './controllers/search_controller.js';
+import BViewController from './controllers/bview_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Register Stimulus controllers
@@ -39,4 +40,5 @@ function initStimulus() {
     Stimulus.register("tabs", TabsController);
     Stimulus.register("layer", LayerController);
     Stimulus.register("search", SearchController);
+    Stimulus.register("bview", BViewController);
 }

webgis/js/layer_options.js

@@ -42,9 +42,53 @@ Options.buildings = {
     color: '#222',
     opacity: 1,
     weight: 1.5,
-    fillColor: '#5b5d5f',
+    fillColor: '#717274',
     fillOpacity: 0.8
 };
+Options.boundaries = {
+    color: '#222',
+    opacity: 1,
+    weight: 2,
+    fillColor: '#ebdfccff',
+    fillOpacity: 1,
+};
+Options.walls = {
+    "reticolata" : {
+        color: '#10ee47',
+        fillColor: '#10ee47',
+        fillOpacity: 1,
+        opacity: 1,
+        weight: 2.5
+    },
+    "mista" : {
+        color: '#9b7fe9',
+        fillColor: '#9b7fe9',
+        fillOpacity: 1,
+        opacity: 1,
+        weight: 2.5,
+    },
+    "incerta" : {
+        color: '#133cee',
+        fillColor: '#133cee',
+        fillOpacity: 1,
+        opacity: 1,
+        weight: 2.5,
+    },
+    "rivestimento" : {
+        color: '#62646e',
+        fillColor: '#62646e',
+        fillOpacity: 1,
+        opacity: 1,
+        weight: 2.5,
+    },
+    "elemento" : {
+        color: '#e9d948',
+        fillColor: '#e9d948',
+        fillOpacity: 1,
+        opacity: 1,
+        weight: 2.5,
+    },
+};
 Options.cluster = {
     spiderfyOnMaxZoom: false,
     showCoverageOnHover: false,

webgis/js/map.js

@@ -0,0 +1,41 @@
+import { GisState } from "./state.js";
+
+/**
+ * Functions / utilities to manipulate the Leaflet map
+ * @module Map
+ */
+
+export const TECH_LAYERS = {
+    "tiberio" : [
+        "incerta",
+        "mista",
+        "reticolata",
+        "elemento",
+        "rivestimento",
+        "nulla",
+    ],
+};
+/**
+ * Saves the current state of the map
+ * @param {L.Map} map 
+ */
+export function saveCurrentState(map) {
+    let currentBase = {};
+    for (let key of Object.keys(GisState.baseLayers)) {
+        if (map.hasLayer(GisState.baseLayers[key])) {
+            currentBase = GisState.baseLayers[key];
+            break;
+        }
+    }
+    GisState.currentMapState = {
+        baseLayer: currentBase,
+        zoom: map.getZoom(),
+        center: map.getCenter(),
+        minZoom: map.getMinZoom(),
+        maxZoom: map.getMaxZoom(),
+    }
+}
+
+function getCurrentState() {
+    //TODO
+}

webgis/js/state.js

@@ -8,9 +8,23 @@
  * A lookup table of Leaflet layer groups by category
  */
 
+/**
+ * @typedef {Object} MapState
+ * @property {L.Layer} baseLayer
+ * @property {number} zoom
+ * @property {L.LatLngExpression} center
+ * @property {number} minZoom
+ * @property {number} maxZoom
+ * A representation of the (current) Leaflet map state
+ */
+
 /**
  * @typedef {Object} GisStateType
  * @property {L.Map|null} map
+ * @property {{string: L.Layer}|null} baseLayers
+ * @property {?MapState} currentMapState
+ * @property {boolean} bViewActive
+ * @property {?string} currentBView
  * @property {MarkerLookup} markers
  * @property {LayerGroupLookup} layers
  * @property {Object|null} bibliography
@@ -21,6 +35,10 @@
 /** @type {GisStateType} */
 export const GisState = {
     map: null,
+    baseLayers: null,
+    currentMapState: null,
+    bViewActive: false,
+    currentBView: null,
     markers:  {
         sites: {},
         notConserved: {},
@@ -31,6 +49,11 @@ export const GisState = {
         buildingTechs: {},
     },
     layers: {
+        geometries: {},
+        /**
+         * @type {L.FeatureGroup}
+         */
+        walls: {},
         sites: {},
         notConserved: {},
         findings: {},
@@ -44,6 +67,7 @@ export const GisState = {
     cartography : {
         historic: [],
         cadastral: null,
+        buildings: null,
     }
 }
 

webgis/js/ui.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import Spotlight from './vendor/spotlight.js/src/js/spotlight.js';
+import Spotlight from '/vendor/spotlight.js/src/js/spotlight.js';
 import { SiteSheet } from './components/SiteSheet.js';
 import { SiteDocuments } from './components/SiteDocuments.js';
 import { SiteSurveys } from './components/SiteSurveys.js';
@@ -42,7 +42,7 @@ UI.addCenterMapControl = function (map, centerCoords, zoom) {
             let controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
             controlUI.title = 'Centra la mappa';
             controlUI.href = '#';
-            controlUI.innerHTML = `
+            controlUI.innerHTML = html`
 				<span class="icon is-medium">
 					<i>
 						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="pt-2" viewBox="0 0 16 16">

webgis/js/yarn.lock

@@ -1,68 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@hotwired/stimulus@^3.2.2":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
-  integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
-
-"@kalisio/leaflet-graphicscale@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@kalisio/leaflet-graphicscale/-/leaflet-graphicscale-1.0.0.tgz#5a163e01805208b08ddafd9301e6ad0d4c603e51"
-  integrity sha512-iy42jngdr8c+9iymJ+TCRmotYjcRAHz+4V1OXhuDt4vy49dYjsCpeYOi27m6UOWrSkwNLqPkn2q0OXXYVhutUg==
-
-"@photo-sphere-viewer/core@^5.11.1":
-  version "5.11.1"
-  resolved "https://registry.yarnpkg.com/@photo-sphere-viewer/core/-/core-5.11.1.tgz#e0aaf83812dd78a5fd63a1d99a7032feec8497e4"
-  integrity sha512-bxWnoQGYjXfmHGee4OSkoYLZmdgqvJWMn7wmpK0V0Vf46Fqu+TJ4Yt8+dY2PgpM89HoKzNr15Dzt6jqOfjkFxQ==
-  dependencies:
-    three "^0.169.0"
-
-bulma@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-1.0.1.tgz#e37261d6f8e1a3494c9378803d9958effb2715ce"
-  integrity sha512-+xv/BIAEQakHkR0QVz+s+RjNqfC53Mx9ZYexyaFNFo9wx5i76HXArNdwW7bccyJxa5mgV/T5DcVGqsAB19nBJQ==
-
-fontawesome-free@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.4.tgz#c7c499708dabd59eb5dedf232b590a862e05957b"
-  integrity sha512-7sX6Lbg2oQiClFFFFitJlKg20h3YTBON6rdmq3uGjNwDo8G6EjF2bfj2OjjcCUmf4OvZCgyHaXfW2JseqissLw==
-
-leaflet.markercluster@^1.5.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
-  integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
-
-leaflet@^1.9.4:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
-  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:
-  version "0.7.8"
-  resolved "https://registry.yarnpkg.com/spotlight.js/-/spotlight.js-0.7.8.tgz#0620371701508222d736e0658e8db3fbe9ddc53b"
-  integrity sha512-zq822gqhjaMHt31oZi4do211NwqBcxZ4u7Xtb+OEsbLrz37dcELhBCoQXFu/0sTiomqD6tm5g6tmqvE7S6h4ng==
-
-three@^0.169.0:
-  version "0.169.0"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.169.0.tgz#4a62114988ad9728d73526d1f1de6760c56b4adc"
-  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==