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

Marker coords from DB + local cache

Browse Source
This commit is contained in:
Nicolò P. 2024-06-13 11:18:32 +02:00
parent c4e5c463c4
commit 94b65f0312
1 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
js/caprigis.js
View File

@ -87,13 +87,29 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
) )
.addTo(map); .addTo(map);
sitesGroup.eachLayer(layer => { sitesGroup.eachLayer(async layer => {
const marker = L.marker(layer.getBounds().getCenter()) const fromStorage = localStorage.getItem(layer.id);
.addTo(map); let data = {};
marker.on('click', async () => { let coords = layer.getBounds().getCenter();
const data = await GIS._fetchData(layer.id);
UI.openModal(data); 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? // TODO Horrible?
@ -147,12 +163,16 @@ GIS.initLayers = async function(map) {
* @param {boolean} popup Should the features have a popup? * @param {boolean} popup Should the features have a popup?
*/ */
GIS.loadLayer = async function (geoJSON, options, popup = true) { 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()) .then(res => res.json())
.catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`)); .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? // Show data from feature in popUp?
const layer = new L.geoJson(data, { const layer = new L.geoJson(geo, {
style: function () { style: function () {
let style = options; let style = options;
return style; return style;
@ -163,7 +183,10 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
} }
else { else {
layer.on("click", async () => { 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); UI.openModal(data);
}); });
} }
@ -172,6 +195,15 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
return layer; 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 * Generate proper content for features popup
* @todo Hard-coded names!! * @todo Hard-coded names!!
@ -198,8 +230,7 @@ GIS.featurePopup = function (layerName, feature) {
return content[layerName]; return content[layerName];
} }
/** /**
* Fetch data from DB using API * Fetch data from API
* @todo Actually implement it...
* @param {string} recordId * @param {string} recordId
*/ */
GIS._fetchData = async function (recordId) { GIS._fetchData = async function (recordId) {