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

Refactor everything to use GisState (WIP)

Browse Source
This commit is contained in:
Nicolò P
2025-06-02 09:42:26 +02:00
parent 86d692381d
commit c265e4aa94
9 changed files with 207 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
webgis/js/gis.js
View File

@@ -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.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});
this.addLayerGroups(map);
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}
).bindTooltip(record.label + '<br>(Clicca per aprire scheda)')
{icon: Icons.site, label: record.label}
)
.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(
clusterOptions
);
let notConserved = L.markerClusterGroup(clusterOptions);
for (let record of notConserData.records) {
notConserved.addLayer(L.marker(
record.coordinates,
{icon: Icons.notConserved}
).bindTooltip(record.denomination)
.on(
'click',
() => UI.openNotConserModal(record, '#not-conser-data')
)
);
const marker = L.marker(record.coordinates, {icon: Icons.notConserved})
.bindTooltip(record.denomination)
.on('click', () => UI.openNotConserModal(record, '#not-conser-data'));
notConserved.addLayer(marker);
// Populate app state for reuse and avoid window.Sites etc.
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(
record.coordinates,
{icon: Icons.finding}
const marker = 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;
}
/**
@@ -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;
}
/**