Manage popup content for features
This commit is contained in:
parent
a67d3dc274
commit
3f512497be
@ -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;
|
Loading…
Reference in New Issue
Block a user