From 94b65f031265ad26a6d9c01c07912fa4b091e2ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P=2E?= <nicolo.paraciani@cnr.it>
Date: Thu, 13 Jun 2024 11:18:32 +0200
Subject: [PATCH] Marker coords from DB + local cache

---
 js/caprigis.js | 55 +++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/js/caprigis.js b/js/caprigis.js
index 8722b81..531e3bf 100644
--- a/js/caprigis.js
+++ b/js/caprigis.js
@@ -87,13 +87,29 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
         )
         .addTo(map);
 
-    sitesGroup.eachLayer(layer => {
-        const marker = L.marker(layer.getBounds().getCenter())
-            .addTo(map);
-        marker.on('click', async () => {
-            const data = await GIS._fetchData(layer.id);
-            UI.openModal(data);
-        });
+    sitesGroup.eachLayer(async layer => {
+        const fromStorage = localStorage.getItem(layer.id);
+        let data = {};
+        let coords = layer.getBounds().getCenter();
+
+        if (fromStorage !== undefined) {
+            try {
+                data = JSON.parse(fromStorage);
+                const lat = data?.lat ?? coords[0];
+                const lon = data?.lon ?? coords[1];
+                coords = [lat, lon];
+            } catch (error) {
+                console.log(error);
+            }
+        } else {
+            data = await GIS._fetchData(layer.id);
+        }
+
+        const marker = L.marker(coords)
+            .addTo(map)
+            .bindTooltip(Object.keys(archeo).find(k => archeo[k] === layer))
+            .openTooltip();
+        marker.on('click', () => UI.openModal(data));
     });
 
     // TODO Horrible?
@@ -147,12 +163,16 @@ GIS.initLayers = async function(map) {
  * @param {boolean} popup Should the features have a popup? 
  */
 GIS.loadLayer = async function (geoJSON, options, popup = true) {
-    const data = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
+    const geo = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
         .then(res => res.json())
         .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
+    
+    const layerId = geoJSON.replace('.geojson', '');
+    
+    this.cacheDBData(layerId);
 
     // Show data from feature in popUp?
-    const layer = new L.geoJson(data, {
+    const layer = new L.geoJson(geo, {
         style: function () {
             let style = options;
             return style;
@@ -163,7 +183,10 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
             }
             else {
                 layer.on("click", async () => {
-                    const data = await GIS._fetchData(geoJSON.replace('.geojson', ''));
+                    const fromStorage = localStorage.getItem(layerId);
+                    const data = fromStorage !== undefined ?
+                        JSON.parse(fromStorage) :
+                        await GIS._fetchData(layerId);
                     UI.openModal(data);
                 });
             }
@@ -172,6 +195,15 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
 
     return layer;
 }
+/**
+ * Cache data from DB in local storage
+ * for a given layer
+ * @param {string} layerId
+ */
+GIS.cacheDBData = async function (layerId) {
+    const data = await this._fetchData(layerId);
+    localStorage.setItem(layerId, JSON.stringify(data));
+}
 /**
  * Generate proper content for features popup
  * @todo Hard-coded names!!
@@ -198,8 +230,7 @@ GIS.featurePopup = function (layerName, feature) {
     return content[layerName];
 }
 /**
- * Fetch data from DB using API
- * @todo Actually implement it...
+ * Fetch data from API
  * @param {string} recordId
  */
 GIS._fetchData = async function (recordId) {