Manage popup content for features

This commit is contained in:
Nicolò P 2024-03-18 16:46:34 +01:00
parent a67d3dc274
commit 3f512497be

View File

@ -19,7 +19,7 @@ GIS.initMap = async function (mapId, zoomLevel = 15) {
}); });
let map = L.map(mapId, { let map = L.map(mapId, {
attributionControl: false, attributionControl: false,
minZoom: 6, minZoom: 11,
layers: [osmap, layerVincoli] layers: [osmap, layerVincoli]
}).setView([40.5492, 14.2317], zoomLevel); }).setView([40.5492, 14.2317], zoomLevel);
@ -38,6 +38,7 @@ GIS.initMap = async function (mapId, zoomLevel = 15) {
// Il sistema di riferimento per i livelli geoJSON è EPSG3857 // Il sistema di riferimento per i livelli geoJSON è EPSG3857
} }
/** /**
* @todo Distinguere tipo di geojson per contenuto popup
* @param {string} geoJSON * @param {string} geoJSON
* @param {Map} map * @param {Map} map
*/ */
@ -46,6 +47,7 @@ GIS.loadLayer = async function (geoJSON, color = '#987db7') {
.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}`));
// DEBUG
console.log(data.features); console.log(data.features);
// Show data from feature in popUp? // Show data from feature in popUp?
@ -61,18 +63,33 @@ GIS.loadLayer = async function (geoJSON, color = '#987db7') {
return style; return style;
}, },
onEachFeature: function (feature, layer) { onEachFeature: function (feature, layer) {
layer.bindPopup(` layer.bindPopup(GIS.featurePopup(geoJSON, feature));
}
});
return layer;
}
/**
* Generate proper content for features popup
* @todo Hard-coded names!!
*
* @param {string} layerName
* @param {object} feature
* @returns {string} The popup's content
*/
GIS.featurePopup = function (layerName, feature) {
const content = {
'vincoli.geojson' : `
<table class="table m-2"> <table class="table m-2">
<tr><td class="text-bold">Oggetto</td><td>${feature.properties.OGGETTO}</td></tr> <tr><td class="text-bold">Oggetto</td><td>${feature.properties.OGGETTO}</td></tr>
<tr><td class="text-bold">Anno</td><td>${feature.properties.ANNO}</td></tr> <tr><td class="text-bold">Anno</td><td>${feature.properties.ANNO}</td></tr>
<tr><td class="text-bold">Comune</td><td>${feature.properties.COMUNE}</td></tr> <tr><td class="text-bold">Comune</td><td>${feature.properties.COMUNE}</td></tr>
<tr><td class="text-bold">Proprietà</td><td>${feature.properties.PROPRIETA}</td></tr> <tr><td class="text-bold">Proprietà</td><td>${feature.properties.PROPRIETA}</td></tr>
</table> </table>
`); `,
} };
});
return layer; return content[layerName];
} }
export default GIS; export default GIS;