Add Villa Bismarck geojson; refactor layer options

This commit is contained in:
Nicolò P 2025-07-07 13:19:06 +02:00
parent f68216c84c
commit 378e14d56a
3 changed files with 220 additions and 59 deletions

File diff suppressed because one or more lines are too long

View File

@ -5,6 +5,7 @@ import API_CONFIG from "./config.js";
import Icons from "./icons.js"; import Icons from "./icons.js";
import { SphericalPhoto } from "./components/SphericalPhoto.js"; import { SphericalPhoto } from "./components/SphericalPhoto.js";
import { GisState } from "./state.js"; import { GisState } from "./state.js";
import Options from "./layer_options.js";
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw'; const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
const BASE_URL = location.href; const BASE_URL = location.href;
@ -28,47 +29,6 @@ GIS.INIT_ZOOM = 14;
GIS.MIN_ZOOM = 11; GIS.MIN_ZOOM = 11;
GIS.MAX_ZOOM = 24; GIS.MAX_ZOOM = 24;
const optionsVincoli = {
color: '#222',
opacity: 0.8,
weight: 1,
fillColor: '#fa7861',
fillOpacity: 0.8
};
const optionsSiti = {
color: '#800040',
opacity: 1,
weight: 1.5,
fillColor: '#800040',
fillOpacity: 0.8
};
const optionsGrotta = {
color: '#205dac',
opacity: 1,
weight: 1.5,
fillColor: '#205dac',
fillOpacity: 0.8
}
const optionsPaesistici = {
color: '#222',
opacity: 1,
weight: 1.5,
fillColor: '#88d28d',
fillOpacity: 0.8
};
const optionsFabbricati = {
color: '#222',
opacity: 1,
weight: 1.5,
fillColor: '#5b5d5f',
fillOpacity: 0.8
};
const clusterOptions = {
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
disableClusteringAtZoom: 19,
};
/** /**
* Capitalize a text string * Capitalize a text string
* @todo Move to utils * @todo Move to utils
@ -108,8 +68,10 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
L.control.scale({imperial: false}).addTo(map); L.control.scale({imperial: false}).addTo(map);
L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map); L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);
let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli); let layerVincoli = await this.loadGeoJSON('vincoli.geojson', Options.constraintsArch);
let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici); let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', Options.constraintsLand);
let boundaries = await this.loadGeoJSON('confini.geojson', {}, false);
let buildings = await this.loadGeoJSON('fabbricati.geojson', Options.buildings, false);
await this.addLayerGroups(map); await this.addLayerGroups(map);
await this.fetchCartographyLayers(); await this.fetchCartographyLayers();
@ -130,6 +92,8 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
); );
const cartography = { const cartography = {
'Catasto Agenzia delle Entrate (zoom per visualizzare)' : wmsLayer, 'Catasto Agenzia delle Entrate (zoom per visualizzare)' : wmsLayer,
'Limiti comuni' : boundaries,
'Fabbricati' : buildings,
'Vincoli archeologici' : layerVincoli, 'Vincoli archeologici' : layerVincoli,
'Vincoli paesaggistici' : layerPaesistici, 'Vincoli paesaggistici' : layerPaesistici,
}; };
@ -137,8 +101,6 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
GisState.map = map; GisState.map = map;
//GisState.cartography.cadastral = wmsLayer;
return map; return map;
} }
/** /**
@ -210,15 +172,20 @@ GIS.sites = async function () {
let sitesData = await fetch(`${API_URL}/sites`) let sitesData = await fetch(`${API_URL}/sites`)
.then(data => data.json()); .then(data => data.json());
let sites = L.markerClusterGroup(clusterOptions); let sites = L.markerClusterGroup(Options.cluster);
let geom = []; let geom = [];
for (let record of sitesData) { for (let record of sitesData) {
if (record.geojson) { if (record.geojson) {
const options = record.gisId === 'grotta_azzurra' ? const options = record.gisId === 'grotta_azzurra' ?
optionsGrotta : optionsSiti; Options.grotta : Options.site;
geom.push(await this.loadSiteLayer(record, options)); geom.push(await this.loadSiteLayer(record, options));
} }
if (record.area) {
const options = record.gisId === 'villa_bismarck' ?
Options.bismarck : Options.site;
geom.push(await this.loadSiteLayer(record, options, false, true));
}
const marker = L.marker( const marker = L.marker(
record.coordinates, record.coordinates,
@ -250,7 +217,7 @@ GIS.notConserved = async function () {
let notConserData = await fetch(`${API_URL}/not_conserved`) let notConserData = await fetch(`${API_URL}/not_conserved`)
.then(data => data.json()); .then(data => data.json());
let notConserved = L.markerClusterGroup(clusterOptions); let notConserved = L.markerClusterGroup(Options.cluster);
for (let record of notConserData.records) { for (let record of notConserData.records) {
const marker = L.marker( const marker = L.marker(
@ -280,7 +247,7 @@ GIS.findings = async function () {
.then(data => data.json()); .then(data => data.json());
let findings = L.markerClusterGroup( let findings = L.markerClusterGroup(
clusterOptions Options.cluster
); );
for (let record of findingsData) { for (let record of findingsData) {
@ -312,7 +279,7 @@ GIS.prehistoric = async function () {
.then(data => data.json()); .then(data => data.json());
let prehistoric = L.markerClusterGroup( let prehistoric = L.markerClusterGroup(
clusterOptions Options.cluster
); );
for (let record of data.records) { for (let record of data.records) {
@ -344,7 +311,7 @@ GIS.underwater = async function () {
let underwaterData = await fetch(`${API_URL}/underwater`) let underwaterData = await fetch(`${API_URL}/underwater`)
.then(data => data.json()); .then(data => data.json());
let underwater = L.markerClusterGroup(clusterOptions); let underwater = L.markerClusterGroup(Options.cluster);
for (let record of underwaterData.records) { for (let record of underwaterData.records) {
const marker = L.marker( const marker = L.marker(
@ -369,7 +336,6 @@ GIS.underwater = async function () {
/** /**
* Adds layers to map and returns an object * Adds layers to map and returns an object
* with {baseMap, archeoLayers, sitesLayerGroup} * with {baseMap, archeoLayers, sitesLayerGroup}
* @todo Load areas for sites that have them!!
* @param {L.Map} map * @param {L.Map} map
* @returns {{baseMap: {"OpenStreetMap": L.TileLayer}}} * @returns {{baseMap: {"OpenStreetMap": L.TileLayer}}}
*/ */
@ -388,16 +354,12 @@ GIS.initLayers = async function(map) {
maxZoom: GIS.MAX_ZOOM, maxZoom: GIS.MAX_ZOOM,
attribution: '© Mapbox' attribution: '© Mapbox'
}); });
let boundaries = await this.loadGeoJSON('confini.geojson', {}, false);
let buildings = await this.loadGeoJSON('fabbricati.geojson', optionsFabbricati, false);
let baseCatasto = new L.LayerGroup([buildings, boundaries]);
const baseGroup = new L.LayerGroup([osmap]); const baseGroup = new L.LayerGroup([osmap]);
baseGroup.addTo(map); baseGroup.addTo(map);
const baseMap = { const baseMap = {
"OpenStreetMap" : osmap, "OpenStreetMap" : osmap,
"Satellite" : mapbox, "Satellite" : mapbox,
"Fabbricati e limiti comuni" : baseCatasto,
}; };
return baseMap; return baseMap;
@ -478,9 +440,10 @@ GIS.loadGeoJSON = async function (geoJSON, options, popup = true) {
* @param {boolean} popup Should the features have a popup? * @param {boolean} popup Should the features have a popup?
* @returns {L.Layer} * @returns {L.Layer}
*/ */
GIS.loadSiteLayer = async function (site, options, popup = true) { GIS.loadSiteLayer = async function (site, options, popup = true, area = false) {
const geoJSON = `${site.gisId}.geojson`; let geoJSON = site.gisId;
const geo = await fetch(`${BASE_URL}/geojson/${geoJSON}`) geoJSON += area ? '_area.geojson' : '.geojson';
const geo = await fetch(`${BASE_URL}geojson/${geoJSON}`)
.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}`));

View File

@ -0,0 +1,54 @@
/**
* @namespace Options
*/
let Options = {};
Options.constraintsArch = {
color: '#222',
opacity: 0.8,
weight: 1,
fillColor: '#fa7861',
fillOpacity: 0.8
};
Options.site = {
color: '#800040',
opacity: 1,
weight: 1.5,
fillColor: '#800040',
fillOpacity: 0.8
};
Options.grotta = {
color: '#205dac',
opacity: 1,
weight: 1.5,
fillColor: '#205dac',
fillOpacity: 0.8
}
Options.bismarck = {
color: '#a4a79a',
opacity: 1,
weight: 1.5,
fillColor: '#a4a79a',
fillOpacity: 0.8
}
Options.constraintsLand = {
color: '#222',
opacity: 1,
weight: 1.5,
fillColor: '#88d28d',
fillOpacity: 0.8
};
Options.buildings = {
color: '#222',
opacity: 1,
weight: 1.5,
fillColor: '#5b5d5f',
fillOpacity: 0.8
};
Options.cluster = {
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
disableClusteringAtZoom: 19,
};
export default Options;