135 lines
3.7 KiB
JavaScript
135 lines
3.7 KiB
JavaScript
'use strict';
|
|
// Global leaflet
|
|
/**
|
|
* @namespace GIS
|
|
*/
|
|
const GIS = {};
|
|
|
|
const optionsVincoli = {
|
|
color: '#222',
|
|
opacity: 0.8,
|
|
weight: 1,
|
|
fillColor: '#987db7',
|
|
fillOpacity: 0.8
|
|
};
|
|
const optionsSiti = {
|
|
color: '#800040',
|
|
opacity: 1,
|
|
weight: 2.5,
|
|
fillColor: '#800040',
|
|
fillOpacity: 0.8
|
|
};
|
|
const optionsPaesistici = {
|
|
color: '#222',
|
|
opacity: 1,
|
|
weight: 1.5,
|
|
fillColor: '#ff8000',
|
|
fillOpacity: 0.8
|
|
};
|
|
|
|
const BASE_URL = location.href;
|
|
/**
|
|
*
|
|
* @param {?string} text
|
|
*/
|
|
function capitalize(text) {
|
|
let capital = text;
|
|
if (text) {
|
|
let words = text.split(' ');
|
|
capital = '';
|
|
|
|
for (let w of words) {
|
|
w = w[0].toUpperCase() + w.slice(1);
|
|
capital += w + ' ';
|
|
}
|
|
capital.trimEnd();
|
|
}
|
|
|
|
return capital;
|
|
}
|
|
/**
|
|
* @param {string} mapId
|
|
* @param {number} zoomLevel
|
|
* @returns {Map}
|
|
*/
|
|
GIS.initMap = async function (mapId, zoomLevel = 15) {
|
|
let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
|
|
let layerSiti = await this.loadLayer('siti.geojson', optionsSiti, false);
|
|
// TODO named parameters??
|
|
let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici);
|
|
let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxNativeZoom : 22,
|
|
maxZoom: 22,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
});
|
|
let map = L.map(mapId, {
|
|
attributionControl: false,
|
|
minZoom: 11,
|
|
layers: [osmap, layerVincoli, layerSiti, layerPaesistici]
|
|
}).setView([40.5492, 14.2317], zoomLevel);
|
|
|
|
map.crs = L.CRS.EPSG4326;
|
|
|
|
const baseMap = {
|
|
"Mappa di base (OpenStreetMap)" : osmap
|
|
};
|
|
const archeo = {
|
|
"Siti indagati" : layerSiti,
|
|
"Vincoli archeologici" : layerVincoli,
|
|
"Vincoli paesistici" : layerPaesistici,
|
|
};
|
|
|
|
let layerControl = L.control.layers(baseMap, archeo).addTo(map);
|
|
}
|
|
/**
|
|
* @todo Distinguere tipo di geojson per contenuto popup
|
|
* @param {string} geoJSON
|
|
* @param {{color, opacity, weight, fillColor, fillOpacity}} options Style options for features
|
|
* @param {boolean} popup Should the features have a popup?
|
|
*/
|
|
GIS.loadLayer = async function (geoJSON, options, popup = true) {
|
|
const data = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
|
|
.then(res => res.json())
|
|
.catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
|
|
|
|
// Show data from feature in popUp?
|
|
const layer = new L.geoJson(data, {
|
|
style: function (feature) {
|
|
let style = options;
|
|
return style;
|
|
},
|
|
onEachFeature: function (feature, layer) {
|
|
if (popup) {
|
|
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 html = `
|
|
<table class="table m-2">
|
|
<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">Comune</td><td>${capitalize(feature.properties.COMUNE)}</td></tr>
|
|
<tr><td class="text-bold">Proprietà</td><td>${capitalize(feature.properties.PROPRIETA)}</td></tr>
|
|
</table>
|
|
`;
|
|
const content = {
|
|
'vincoli.geojson' : html,
|
|
'paesistici.geojson' : html,
|
|
};
|
|
|
|
return content[layerName];
|
|
}
|
|
|
|
export default GIS; |