README.md

@@ -23,7 +23,7 @@ export default API_CONFIG;
 
 ### Entry point
 
-Il punto d'ingresso dell'applicazione è `webgis/js/index.js` che registra i controller Stimulus e inizializza alcune funzioni UI (che potrebbero essere migrate in un controller Stimulus dedicato in futuro).
+Il punto d'ingresso dell'applicazione è `webgis/js/index.js` che registra i controller Stimulus, inizializza alcune funzioni UI che potrebbero essere migrate in un controller Stimulus dedicato in futuro.
 
 ### Mappa
 

webgis/index.html

@@ -97,51 +97,37 @@
                         </span>
                         <ul id="siti-anacapri-sub" class="is-hidden">
                             <li>
-                                <a class="is-block button" title="Vai al sito Villa di Gradola"
+                                <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-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"
+                                <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-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"
+                                <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-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"
+                                <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-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"
+                                <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-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"
+                                <a class="is-block button" title="Vai al sito Villa di Gradola" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.560834 14.205793">
-                                    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"
+                                <a class="button" title="Vai al sito San Michele" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.557380 14.225806">
-                                    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>
@@ -161,45 +147,32 @@
                                 </a>
                             </li>
                             <li>
-                                <a class="button" data-controller="marker"
+                                <a class="button" data-controller="marker" data-marker-coords-value="40.54972 14.24669" data-action="marker#go">
-                                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"
+                                <a class="button" data-controller="marker" data-marker-coords-value="40.54652 14.24288" data-action="marker#go">
-                                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"
+                                <a class="button" title="Vai al sito Grotta di Matermania" data-controller="marker" data-marker-coords-value="40.54942 14.25583" data-action="marker#go">
-                                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"
+                                <a class="button" title="Vai al sito Grotta delle Felci" data-controller="marker" data-marker-coords-value="40.543644 14.230008" data-action="marker#go">
-                                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"
+                                <a class="button" title="Vai al sito Grotta del Castiglione" data-controller="marker" data-marker-coords-value="40.54687 14.24023" data-action="marker#go">
-                                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"
+                                <a class="button" data-controller="marker" data-marker-coords-value="40.55150 14.24327" data-action="marker#go">
-                                data-marker-group-value="sites"
-                                data-action="marker#go">
                                     Mura greche
                                 </a>
                             </li>

webgis/js/components/Finding.js

@@ -1,4 +1,3 @@
-import { GisState } from "../state.js";
 /**
  * @class Finding
  */
@@ -73,7 +72,7 @@ export class Finding {
      * @param {Function} gallery
      */
     async setImages(imageContainer, gallery) {
-        let record = await this.fetchData(`${GisState.apiUrl}/finding/${this._data.id}`)
+        let record = await this.fetchData(`${window.API_URL}/finding/${this._data.id}`)
 
         if (record.images.length) {
             this.images = record.images;
@@ -85,7 +84,7 @@ export class Finding {
      * @param {number} recordId 
      */
     async biblio(recordId) {
-        let finding = await this.fetchData(`${GisState.apiUrl}/finding/${recordId}`);
+        let finding = await this.fetchData(`${window.API_URL}/finding/${recordId}`);
 
         let citations = '';
 

webgis/js/components/NotConserved.js

@@ -1,5 +1,3 @@
-import { GisState } from "../state.js";
-
 /**
  * Component to render data for not conserved assets
  * @class NotConserved
@@ -73,6 +71,8 @@ export class NotConserved {
      * @param {Function} gallery
      */
     async setImages(imageContainer, gallery) {
+        //let record = await this.fetchData(`${window.API_URL}/not_conserved/${this._data.id}`)
+
         if (this._data.images.length) {
             this.images = this._data.images;
             imageContainer.innerHTML = this.renderImages();
@@ -82,7 +82,7 @@ export class NotConserved {
     }
 
     async renderDocs() {
-        let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${this._data.id}`);
+        let record = await this.fetchData(`${window.API_URL}/not_conserved/${this._data.id}`);
 
         this.documentation = record.documents.filter(d => d.type === 'documentazione')
         this.publications = record.documents.filter(d => d.type === 'pubblicazione');
@@ -137,7 +137,7 @@ export class NotConserved {
     }
 
     async biblio(recordId) {
-        let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${recordId}`);
+        let record = await this.fetchData(`${window.API_URL}/not_conserved/${recordId}`);
 
         let citations = '';
 

webgis/js/components/Prehistoric.js

@@ -1,4 +1,4 @@
-import { GisState } from "../state.js";
+
 /**
  * @class Prehistoric
  */
@@ -80,6 +80,8 @@ export class Prehistoric {
      * @param {Function} gallery
      */
     async setImages(imageContainer, gallery) {
+        //let record = await this.fetchData(`${window.API_URL}/not_conserved/${this._data.id}`)
+
         if (this._data.images.length) {
             this.images = this._data.images;
             imageContainer.innerHTML = this.renderImages();
@@ -91,7 +93,7 @@ export class Prehistoric {
      * @param {number} recordId 
      */
     async biblio(recordId) {
-        let finding = await this.fetchData(`${GisState.apiUrl}/prehistoric/${recordId}`);
+        let finding = await this.fetchData(`${window.API_URL}/prehistoric/${recordId}`);
 
         let citations = '';
 

webgis/js/controllers/biblio_controller.js

@@ -1,11 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
-import { GisState } from "../state.js";
 
 export default class extends Controller {
     static targets = ['biblio', 'cit', 'ref', 'close'];
 
     open(event) {
-        const biblio = GisState.bibliography;
+        const biblio = window.Biblio;
         this.trigger = event.currentTarget;
         const id = this.trigger.id.replace('cit-', '');
         this.ref = this.biblioTarget;

webgis/js/controllers/layer_controller.js

@@ -1,23 +1,21 @@
-import { Controller } from "@hotwired/stimulus";
+import { Controller } from "@hotwired/stimulus"
-import { GisState } from "../state.js";
 
 export default class extends Controller {
     static targets = ['sites', 'findings', 'notconserved', 'prehist',];
 
     /**
-     * @todo Use Stimulus values?
      * @param {Event} event 
      */
     toggle(event) {
-        let map = GisState.map;
+        let map = window.LMap;
         let target = event.currentTarget;
         const id = target.parentElement.getAttribute('data-id');
         const layers = {
-            'siti': GisState.layers.sites,
+            'siti': window.Sites,
-            'non-conser': GisState.layers.notConserved,
+            'non-conser': window.NotConserved,
-            'rinv': GisState.layers.findings,
+            'rinv': window.Findings,
-            'preist': GisState.layers.prehistoric,
+            'preist': window.Prehistoric,
-            'subacquei': GisState.layers.underwater,
+            'subacquei': window.Underwater,
         }
 
         let group = layers[id];

webgis/js/controllers/marker_controller.js

@@ -1,15 +1,9 @@
-import { Controller } from "@hotwired/stimulus";
+import { Controller } from "@hotwired/stimulus"
-import { GisState, getMarkerByCoords } from "../state.js";
 
 export default class extends Controller {
-    static values = {
+    static values = {'coords': String };
-        'coords': String,
-        'group': String,
-        'id': String,
-    };
 
     END_ZOOM = 19;
-    // Animation breaks automatic tooltip opening...
     mapAnimate = {
         animate: true,
         duration: 1,
@@ -20,18 +14,19 @@ export default class extends Controller {
      * @param {Event} event 
      */
     go() {
-        let map = GisState.map;
+        let map = window.LMap;
+        
+        console.log(this.coordsValue);
+
         const coords = this.coordsValue.split(' ');
 
         map.setView(
             coords,
             this.END_ZOOM,
-            {animate: false}
+            this.mapAnimate
         );
 
         let marker = this.getMarker(map, coords);
-        // DEBUG for sites
-        if (this.groupValue) marker = getMarkerByCoords(coords, this.groupValue);
         marker?.openTooltip();
     }
     /**

webgis/js/gis.js

@@ -4,7 +4,6 @@ import UI from "./ui.js";
 import API_CONFIG from "./config.js";
 import Icons from "./icons.js";
 import { SphericalPhoto } from "./components/SphericalPhoto.js";
-import { GisState } from "./state.js";
 
 const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
 const BASE_URL = location.href;
@@ -16,7 +15,7 @@ if (BASE_URL.includes('localhost')) {
     API_URL = API_CONFIG.prod;
 }
 
-GisState.apiUrl = API_URL;
+window.API_URL = API_URL;
 
 // Global leaflet
 /**
@@ -94,7 +93,7 @@ function capitalize(text) {
 /**
  * @param {string} mapId
  * @param {number} zoomLevel
- * @returns {L.Map}
+ * @returns {Map}
  */
 GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let map = L.map(mapId, {
@@ -112,7 +111,16 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli);
     let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
 
-    this.addLayerGroups(map);
+    // Refactor with separate function...
+    this.sites().then(data => {
+        data.markers.addTo(map);
+        data.geom.addTo(map);
+        window.Sites = data.markers;
+    });
+    this.notConserved().then(group => {group.addTo(map); window.NotConserved = group});
+    this.findings().then(group => {group.addTo(map); window.Findings = group});
+    this.prehistoric().then(group => {group.addTo(map); window.Prehistoric = group});
+    this.underwater().then(group => {group.addTo(map); window.Underwater = group});
 
     const archeo = {
         'Vincoli archeologici' : layerVincoli,
@@ -120,30 +128,8 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     };
     L.control.layers(baseMap, archeo).addTo(map);
 
-    GisState.map = map;
-
     return map;
 }
-/**
- * Add layer groups to map
- */
-GIS.addLayerGroups = function (map) {
-    // Can be included in Promise.all
-    // if it returns only one group...
-    this.sites().then(data => {
-        data.markers.addTo(map);
-        data.geom.addTo(map);
-    });
-    Promise.all(
-        [
-            this.notConserved(),
-            this.findings(),
-            this.prehistoric(),
-            this.underwater(),
-        ]
-    )
-    .then(groups => groups.forEach(group => group.addTo(map)));
-}
 /**
  * Create markers for sites
  * @returns {{markers: L.markerClusterGroup, geom: L.LayerGroup}}
@@ -161,27 +147,17 @@ GIS.sites = async function () {
                 optionsGrotta : optionsSiti;
             geom.push(await this.loadSiteLayer(record, options));
         }
-
+        sites.addLayer(L.marker(
-        const marker = L.marker(
                 record.coordinates,
-                {icon: Icons.site, label: record.label}
+                {icon: Icons.site}
-            )
+            ).bindTooltip(record.label + '<br>(Clicca per aprire scheda)')
-            .bindTooltip(record.label + '<br>(Clicca per aprire scheda)')
             .on(
                 'click',
                 () => UI.openSiteModal(record, '#site-data')
+            )
         );
-
-        sites.addLayer(marker);
-        // Populate app state for reuse and avoid window.Sites etc.
-        // Municipality (Capri, Anacapri) added for reuse in dynamic menu
-        marker.options.municipalilty = record.municipalilty;
-        const markerIndex = `${record.coordinates[0]} ${record.coordinates[1]}`;
-        GisState.markers.sites[markerIndex] = marker;
     }
 
-    GisState.layers.sites = sites;
-
     return {markers: sites, geom: L.layerGroup(geom)};
 }
 /**
@@ -192,21 +168,22 @@ GIS.notConserved = async function () {
     let notConserData = await fetch(`${API_URL}/not_conserved`)
         .then(data => data.json());
 
-    let notConserved = L.markerClusterGroup(clusterOptions);
+    let notConserved = L.markerClusterGroup(
+        clusterOptions
+    );
 
     for (let record of notConserData.records) {
-        const marker = L.marker(record.coordinates, {icon: Icons.notConserved})
+        notConserved.addLayer(L.marker(
-            .bindTooltip(record.denomination)
+                record.coordinates,
-            .on('click', () => UI.openNotConserModal(record, '#not-conser-data'));
+                {icon: Icons.notConserved}
-        
+            ).bindTooltip(record.denomination)
-        notConserved.addLayer(marker);
+            .on(
-        // Populate app state for reuse and avoid window.Sites etc.
+                'click',
-        const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+                () => UI.openNotConserModal(record, '#not-conser-data')
-        GisState.markers.notConserved[markerLabel] = marker;
+            )
+        );
     }
 
-    GisState.layers.notConserved = notConserved;
-
     return notConserved;
 }
 /**
@@ -222,20 +199,17 @@ GIS.findings = async function () {
     );
 
     for (let record of findingsData) {
-        const marker = L.marker(record.coordinates, {icon: Icons.finding}
+        findings.addLayer(L.marker(
+                record.coordinates,
+                {icon: Icons.finding}
             ).bindTooltip(record.object)
             .on(
                 'click',
                 () => UI.openFindingModal(record, '#finding-data')
+            )
         );
-
-        findings.addLayer(marker);
-        const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
-        GisState.markers.findings[markerLabel] = marker;
     }
 
-    GisState.layers.findings = findings;
-
     return findings;
 }
 /**
@@ -251,23 +225,17 @@ GIS.prehistoric = async function () {
     );
 
     for (let record of data.records) {
-        const marker = L.marker(
+        prehistoric.addLayer(L.marker(
                 record.coordinates,
                 {icon: Icons.prehistoric}
             ).bindTooltip(record.denomination)
             .on(
                 'click',
                 () => UI.openPrehistModal(record, '#prehist-data')
+            )
         );
-
-        const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
-        GisState.markers.prehistoric[markerLabel] = marker;
-
-        prehistoric.addLayer(marker);
     }
 
-    GisState.layers.prehistoric = prehistoric;
-
     return prehistoric;
 }
 /**
@@ -281,23 +249,17 @@ GIS.underwater = async function () {
     let underwater = L.markerClusterGroup(clusterOptions);
 
     for (let record of underwaterData.records) {
-        const marker = L.marker(
+        underwater.addLayer(L.marker(
                 record.coordinates,
                 {icon: Icons.underwater}
             ).bindTooltip(record.denomination)
             .on(
                 'click',
                 () => UI.openUnderwaterModal(record, '#underwater-data')
+            )
         );
-
-        const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
-        GisState.markers.prehistoric[markerLabel] = marker;
-
-        underwater.addLayer(marker);
     }
 
-    GisState.layers.underwater = underwater;
-
     return underwater;
 }
 /**

webgis/js/index.js

@@ -22,6 +22,8 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
     UI.toggleBurger('navbar-burger');
+
+    window.LMap = map;
 });
 
 function initStimulus() {

webgis/js/state.js

@@ -1,48 +0,0 @@
-/**
- * @typedef {Object.<string, L.Marker>} MarkerLookup
- * A lookup table of markers keyed by 'lat lng' (no groupings)
- */
-
-/**
- * @typedef {Object.<string, L.LayerGroup>} LayerGroupLookup
- * A lookup table of Leaflet layer groups by category
- */
-
-/**
- * @typedef {Object} GisStateType
- * @property {L.Map|null} map
- * @property {String|null} apiUrl
- * @property {MarkerLookup} markers
- * @property {LayerGroupLookup} layers
- * @property {Object|null} bibliography
- */
-
-/** @type {GisStateType} */
-export const GisState = {
-    map: null,
-    markers:  {
-        sites: {},
-        notConserved: {},
-        findings: {},
-        prehistoric: {},
-        underwater: {},
-    },
-    layers: {
-        sites: {},
-        notConserved: {},
-        findings: {},
-        prehistoric: {},
-        underwater: {},
-    },
-    bibliography: null,
-    apiUrl : null,
-}
-
-/**
- * @param {array} coords - ['lat', 'lng']
- * @param {string} group
- * @returns {L.Marker|undefined}
- */
-export function getMarkerByCoords(coords, group) {
-	return GisState.markers[group][`${coords[0]} ${coords[1]}`];
-}

webgis/js/ui.js

@@ -9,7 +9,6 @@ import { NotConserved } from './components/NotConserved.js';
 import { Finding } from './components/Finding.js';
 import { Prehistoric } from './components/Prehistoric.js';
 import { Underwater } from './components/Underwater.js';
-import { GisState } from "./state.js";
 
 /**
  * @namespace UI
@@ -108,7 +107,7 @@ UI.openSiteModal = function (data, selector) {
 	let siteSheet = new SiteSheet();
 	siteSheet.siteData = data;
 
-	GisState.bibliography = siteSheet;
+	window.Biblio = siteSheet;
 
 	modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort();
 	if (data.description) {
@@ -170,7 +169,7 @@ UI.openNotConserModal = function (data, selector) {
 	let notConserved = new NotConserved();
 	notConserved.data = data;
 	// For Stimulus biblio_controller
-	GisState.bibliography = notConserved;
+	window.Biblio = notConserved;
 
 	notConserved.render().then(html => modal.querySelector('#not-conserved-sheet').innerHTML = html);
 	notConserved.renderDocs().then(html => modal.querySelector('#documents').innerHTML = html);
@@ -192,7 +191,7 @@ UI.openFindingModal = function (data, selector) {
 	finding.data = data;
 
 	// For Stimulus biblio_controller
-	GisState.bibliography = finding;
+	window.Biblio = finding;
 
 	finding.render().then(html => modal.querySelector('#finding-sheet').innerHTML = html);
 	finding.setImages(modal.querySelector('#photos'), this.imageGallery);
@@ -215,7 +214,7 @@ UI.openPrehistModal = function (data, selector) {
 	prehistoric.data = data;
 
 	// For Stimulus biblio_controller
-	//GisState.bibliography = prehistoric;
+	//window.Biblio = prehistoric;
 	prehistoric.render().then(html => modal.querySelector('#prehist-sheet').innerHTML = html);
 	prehistoric.setImages(modal.querySelector('#photos'), this.imageGallery);
 	modal.classList.add('is-active');
@@ -232,7 +231,7 @@ UI.openUnderwaterModal = function (data, selector) {
 	underwater.data = data;
 
 	// For Stimulus biblio_controller
-	//GisState.bibliography = underwater;
+	//window.Biblio = prehistoric;
 	underwater.render().then(html => modal.querySelector('#underwater-sheet').innerHTML = html);
 	modal.classList.add('is-active');
 }