Refactor everything to use GisState (WIP)

webgis/index.html

@@ -97,37 +97,51 @@
                         </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">
+                                <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">
+                                <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">
+                                <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">
+                                <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">
+                                <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="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">
+                                <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.557380 14.225806">
+                                <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>
@@ -147,32 +161,45 @@
                                 </a>
                             </li>
                             <li>
-                                <a class="button" data-controller="marker" data-marker-coords-value="40.54972 14.24669" data-action="marker#go">
+                                <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-coords-value="40.54652 14.24288" data-action="marker#go">
+                                <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-coords-value="40.54942 14.25583" data-action="marker#go">
+                                <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-coords-value="40.543644 14.230008" data-action="marker#go">
+                                <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-coords-value="40.54687 14.24023" data-action="marker#go">
+                                <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.55150 14.24327" data-action="marker#go">
+                                <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>

webgis/js/components/Finding.js

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

webgis/js/components/NotConserved.js

@@ -1,3 +1,5 @@
+import { GisState } from "../state.js";
+
 /**
  * Component to render data for not conserved assets
  * @class NotConserved
@@ -71,8 +73,6 @@ 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(`${window.API_URL}/not_conserved/${this._data.id}`);
+        let record = await this.fetchData(`${GisState.apiUrl}/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(`${window.API_URL}/not_conserved/${recordId}`);
+        let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${recordId}`);
 
         let citations = '';
 

webgis/js/components/Prehistoric.js

@@ -1,4 +1,4 @@
-
+import { GisState } from "../state.js";
 /**
  * @class Prehistoric
  */
@@ -80,8 +80,6 @@ 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();
@@ -93,7 +91,7 @@ export class Prehistoric {
      * @param {number} recordId 
      */
     async biblio(recordId) {
-        let finding = await this.fetchData(`${window.API_URL}/prehistoric/${recordId}`);
+        let finding = await this.fetchData(`${GisState.apiUrl}/prehistoric/${recordId}`);
 
         let citations = '';
 

webgis/js/controllers/layer_controller.js

@@ -1,21 +1,23 @@
-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 = window.LMap;
+        let map = GisState.map;
         let target = event.currentTarget;
         const id = target.parentElement.getAttribute('data-id');
         const layers = {
-            'siti': window.Sites,
+            'siti': GisState.layers.sites,
-            'non-conser': window.NotConserved,
+            'non-conser': GisState.layers.notConserved,
-            'rinv': window.Findings,
+            'rinv': GisState.layers.findings,
-            'preist': window.Prehistoric,
+            'preist': GisState.layers.prehistoric,
-            'subacquei': window.Underwater,
+            'subacquei': GisState.layers.underwater,
         }
 
         let group = layers[id];

webgis/js/controllers/marker_controller.js

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

webgis/js/gis.js

@@ -4,6 +4,7 @@ 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;
@@ -15,7 +16,7 @@ if (BASE_URL.includes('localhost')) {
     API_URL = API_CONFIG.prod;
 }
 
-window.API_URL = API_URL;
+GisState.apiUrl = API_URL;
 
 // Global leaflet
 /**
@@ -93,7 +94,7 @@ function capitalize(text) {
 /**
  * @param {string} mapId
  * @param {number} zoomLevel
- * @returns {Map}
+ * @returns {L.Map}
  */
 GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let map = L.map(mapId, {
@@ -111,16 +112,7 @@ 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);
 
-    // Refactor with separate function...
+    this.addLayerGroups(map);
-    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,
@@ -128,8 +120,30 @@ 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}}
@@ -147,17 +161,27 @@ 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}
+                {icon: Icons.site, label: record.label}
-            ).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)};
 }
 /**
@@ -168,22 +192,21 @@ GIS.notConserved = async function () {
     let notConserData = await fetch(`${API_URL}/not_conserved`)
         .then(data => data.json());
 
-    let notConserved = L.markerClusterGroup(
+    let notConserved = L.markerClusterGroup(clusterOptions);
-        clusterOptions
-    );
 
     for (let record of notConserData.records) {
-        notConserved.addLayer(L.marker(
+        const marker = L.marker(record.coordinates, {icon: Icons.notConserved})
-                record.coordinates,
+            .bindTooltip(record.denomination)
-                {icon: Icons.notConserved}
+            .on('click', () => UI.openNotConserModal(record, '#not-conser-data'));
-            ).bindTooltip(record.denomination)
+        
-            .on(
+        notConserved.addLayer(marker);
-                'click',
+        // Populate app state for reuse and avoid window.Sites etc.
-                () => UI.openNotConserModal(record, '#not-conser-data')
+        const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
-            )
+        GisState.markers.notConserved[markerLabel] = marker;
-        );
     }
 
+    GisState.layers.notConserved = notConserved;
+
     return notConserved;
 }
 /**
@@ -199,17 +222,20 @@ GIS.findings = async function () {
     );
 
     for (let record of findingsData) {
-        findings.addLayer(L.marker(
+        const marker = L.marker(record.coordinates, {icon: Icons.finding}
-                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;
 }
 /**
@@ -225,17 +251,23 @@ GIS.prehistoric = async function () {
     );
 
     for (let record of data.records) {
-        prehistoric.addLayer(L.marker(
+        const marker = 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;
 }
 /**
@@ -249,17 +281,23 @@ GIS.underwater = async function () {
     let underwater = L.markerClusterGroup(clusterOptions);
 
     for (let record of underwaterData.records) {
-        underwater.addLayer(L.marker(
+        const marker = 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,8 +22,6 @@ 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

@@ -0,0 +1,59 @@
+/**
+ * @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.<string, Object>} BibliographyLookup
+ * A lookup table of bibliography data by category
+ */
+
+/**
+ * @typedef {Object} GisStateType
+ * @property {L.Map|null} map
+ * @property {String|null} apiUrl
+ * @property {MarkerLookup} markers
+ * @property {LayerGroupLookup} layers
+ * @property {BibliographyLookup} bibliography
+ */
+
+/** @type {GisStateType} */
+export const GisState = {
+    map: null,
+    markers:  {
+        sites: {},
+        notConserved: {},
+        findings: {},
+        prehistoric: {},
+        underwater: {},
+    },
+    layers: {
+        sites: {},
+        notConserved: {},
+        findings: {},
+        prehistoric: {},
+        underwater: {},
+    },
+    bibliography: {
+        sites: {},
+        notConserved: {},
+        findings: {},
+        prehistoric: {},
+        underwater: {},
+    },
+    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]}`];
+}