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

Refactor to generate menu dynamically

Browse Source
This commit is contained in:
Nicolò P
2025-06-03 15:36:42 +02:00
parent 41dca4f563
commit b556ad66bb
4 changed files with 113 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
webgis/js/controllers/layer_controller.js
View File

@@ -12,17 +12,10 @@ export default class extends Controller {
let map = GisState.map;
let target = event.currentTarget;
const id = target.parentElement.getAttribute('data-id');
const layers = {
'siti': GisState.layers.sites,
'non-conser': GisState.layers.notConserved,
'rinv': GisState.layers.findings,
'preist': GisState.layers.prehistoric,
'subacquei': GisState.layers.underwater,
}
let group = layers[id];
this.toggleIcon(event.currentTarget);
let group = GisState.layers[id];
if (map.hasLayer(group)) {
map.removeLayer(group);
target.title = "Mostra";

59
webgis/js/controllers/menu_controller.js
View File

@@ -5,30 +5,47 @@ export default class extends Controller {
static targets = ['list', 'menu', 'icon'];
buildMenu() {
let ulAnacapri = document.createElement('ul');
ulAnacapri.id = 'siti-anacapri-sub';
ulAnacapri.className = 'is-hidden';
const groups = Object.keys(GisState.markers);
const municipalities = ['Anacapri', 'Capri'];
console.log(GisState.markers.sites);
for (let key in GisState.markers.sites) {
if (GisState.markers.sites[key].options.municipality === 'Anacapri') {
const li = document.createElement('li');
li.innerHTML = `
<a class="is-block button"
data-action="marker#go"
data-controller="marker"
data-marker-coords-value="${key}"
data-marker-group-value="sites">
${GisState.markers.sites[key].options.label}
</a>
`;
ulAnacapri.appendChild(li);
// TODO refactor with Stimulus values?
for (let group of groups) {
for (let municipality of municipalities) {
let ul = this.renderMenuItems(group, municipality);
document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
?.appendChild(ul);
}
}
console.log(ulAnacapri);
}
/**
*
* @param {String} group
* @param {String} municipality
*/
renderMenuItems(group, municipality) {
const ul = document.createElement('ul');
ul.className = 'is-hidden';
ul.id = `${group}-${municipality.toLowerCase()}-sub`;
const template = document.getElementById('menu-item-template');
for (let key in GisState.markers[group]) {
const marker = GisState.markers[group][key];
if (marker.options.municipality === municipality) {
const clone = template.content.cloneNode(true);
const link = clone.querySelector('a');
const labelSpan = clone.querySelector('.label');
link.dataset.markerCoordsValue = key;
link.dataset.markerGroupValue = group;
labelSpan.textContent = marker.options.label;
ul.appendChild(clone);
}
}
return ul;
}
toggleMenu() {

32
webgis/js/gis.js
View File

@@ -112,7 +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);
this.addLayerGroups(map);
await this.addLayerGroups(map);
const archeo = {
'Vincoli archeologici' : layerVincoli,
@@ -127,22 +127,22 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
/**
* Add layer groups to map
*/
GIS.addLayerGroups = function (map) {
GIS.addLayerGroups = async 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(
const sites = await this.sites();
sites.markers.addTo(map);
sites.geom.addTo(map);
const groups = await Promise.all(
[
this.notConserved(),
this.findings(),
this.prehistoric(),
this.underwater(),
]
)
.then(groups => groups.forEach(group => group.addTo(map)));
);
groups.forEach(group => group.addTo(map));
}
/**
* Create markers for sites
@@ -195,13 +195,17 @@ GIS.notConserved = async function () {
let notConserved = L.markerClusterGroup(clusterOptions);
for (let record of notConserData.records) {
const marker = L.marker(record.coordinates, {icon: Icons.notConserved})
const marker = L.marker(
record.coordinates,
{icon: Icons.notConserved, label: record.label}
)
.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]}`;
marker.options.municipality = record.municipality;
GisState.markers.notConserved[markerLabel] = marker;
}
@@ -222,7 +226,9 @@ GIS.findings = async function () {
);
for (let record of findingsData) {
const marker = L.marker(record.coordinates, {icon: Icons.finding}
const marker = L.marker(
record.coordinates,
{icon: Icons.finding, label: record.label}
).bindTooltip(record.object)
.on(
'click',
@@ -231,6 +237,7 @@ GIS.findings = async function () {
findings.addLayer(marker);
const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
marker.options.municipality = record.municipality;
GisState.markers.findings[markerLabel] = marker;
}
@@ -253,7 +260,7 @@ GIS.prehistoric = async function () {
for (let record of data.records) {
const marker = L.marker(
record.coordinates,
{icon: Icons.prehistoric}
{icon: Icons.prehistoric, label: record.label}
).bindTooltip(record.denomination)
.on(
'click',
@@ -261,6 +268,7 @@ GIS.prehistoric = async function () {
);
const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
marker.options.municipality = record.municipality;
GisState.markers.prehistoric[markerLabel] = marker;
prehistoric.addLayer(marker);