Merge branch 'master' of https://git.electricmandarine.cloud/nicolo/caprigis

2025-07-15 16:08:38 +02:00
parent 065e49ccb2 106c8f60bc
commit e3a3b30ade
6 changed files with 250 additions and 61 deletions
--- a/webgis/js/components/SiteMedia.js
+++ b/webgis/js/components/SiteMedia.js
@@ -43,4 +43,21 @@ export class SiteMedia {
 			</div>
 		`;
    }
+
+	renderReconstructions() {
+		return `
+			<div class="content has-text-centered mb-5 pb-5">
+				<p class="is-size-5 mt-3">Ricostruzioni 3D</p>
+				<div style="max-width: 70%; margin: 0 auto">
+					<p class="is-size-6 has-text-centered">Gallery ricostruzioni 3D</p>
+					<figure class="is-relative is-clickable has-text-centered" id="gallery-3d">
+						<img src="img/${this._siteData.filename}" width="300"/>
+						<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
+							<i class="is-flex fa fa-2x fa-play-circle"></i>
+						</div>
+					</figure>
+				</div>
+			</div>
+		`;
+	}
 }
--- a/webgis/js/gis.js
+++ b/webgis/js/gis.js
@@ -5,6 +5,7 @@ import API_CONFIG from "./config.js";
 import Icons from "./icons.js";
 import { SphericalPhoto } from "./components/SphericalPhoto.js";
 import { GisState } from "./state.js";
+import Options from "./layer_options.js";

 const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
 const BASE_URL = location.href;
@@ -28,47 +29,6 @@ GIS.INIT_ZOOM = 14;
 GIS.MIN_ZOOM = 11;
 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
 * @todo Move to utils
@@ -108,8 +68,9 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
    L.control.scale({imperial: false}).addTo(map);
    L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);

-    let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli);
-    let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
+    let layerVincoli = await this.loadGeoJSON('vincoli.geojson', Options.constraintsArch);
+    let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', Options.constraintsLand);
+    let buildings = await this.loadGeoJSON('fabbricati.geojson', Options.buildings, false);

    await this.addLayerGroups(map);
    await this.fetchCartographyLayers();
@@ -130,15 +91,14 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
    );
    const cartography = {
        'Catasto Agenzia delle Entrate (zoom per visualizzare)' : wmsLayer,
+        'Fabbricati' : buildings,
        'Vincoli archeologici' : layerVincoli,
-        'Vincoli paesaggistici' : layerPaesistici,
+        'Vincoli archeologici indiretti' : layerPaesistici,
    };
    L.control.layers(baseMap, cartography).addTo(map);

    GisState.map = map;

-    //GisState.cartography.cadastral = wmsLayer;
-
    return map;
 }
 /**
@@ -210,15 +170,20 @@ GIS.sites = async function () {
    let sitesData = await fetch(`${API_URL}/sites`)
        .then(data => data.json());

-    let sites = L.markerClusterGroup(clusterOptions);
+    let sites = L.markerClusterGroup(Options.cluster);
    let geom = [];

    for (let record of sitesData) {
        if (record.geojson) {
            const options = record.gisId === 'grotta_azzurra' ?
-                optionsGrotta : optionsSiti;
+                Options.grotta : Options.site;
            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(
                record.coordinates,
@@ -250,7 +215,7 @@ GIS.notConserved = async function () {
    let notConserData = await fetch(`${API_URL}/not_conserved`)
        .then(data => data.json());

-    let notConserved = L.markerClusterGroup(clusterOptions);
+    let notConserved = L.markerClusterGroup(Options.cluster);

    for (let record of notConserData.records) {
        const marker = L.marker(
@@ -280,7 +245,7 @@ GIS.findings = async function () {
        .then(data => data.json());

    let findings = L.markerClusterGroup(
-        clusterOptions
+        Options.cluster
    );

    for (let record of findingsData) {
@@ -312,7 +277,7 @@ GIS.prehistoric = async function () {
        .then(data => data.json());

    let prehistoric = L.markerClusterGroup(
-        clusterOptions
+        Options.cluster
    );

    for (let record of data.records) {
@@ -344,7 +309,7 @@ GIS.underwater = async function () {
    let underwaterData = await fetch(`${API_URL}/underwater`)
        .then(data => data.json());

-    let underwater = L.markerClusterGroup(clusterOptions);
+    let underwater = L.markerClusterGroup(Options.cluster);

    for (let record of underwaterData.records) {
        const marker = L.marker(
@@ -369,7 +334,6 @@ GIS.underwater = async function () {
 /**
 * Adds layers to map and returns an object
 * with {baseMap, archeoLayers, sitesLayerGroup}
- * @todo Load areas for sites that have them!!
 * @param {L.Map} map 
 * @returns {{baseMap: {"OpenStreetMap": L.TileLayer}}}
 */
@@ -388,16 +352,15 @@ GIS.initLayers = async function(map) {
        maxZoom: GIS.MAX_ZOOM,
        attribution: '&copy; 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]);
    baseGroup.addTo(map);
    const baseMap = {
        "OpenStreetMap" : osmap,
        "Satellite" : mapbox,
-        "Fabbricati e limiti comuni" : baseCatasto,
+        'Limiti amministrativi' : boundaries,
    };

    return baseMap;
@@ -478,9 +441,10 @@ GIS.loadGeoJSON = async function (geoJSON, options, popup = true) {
 * @param {boolean} popup Should the features have a popup? 
 * @returns {L.Layer}
 */
-GIS.loadSiteLayer = async function (site, options, popup = true) {
-    const geoJSON = `${site.gisId}.geojson`;
-    const geo = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
+GIS.loadSiteLayer = async function (site, options, popup = true, area = false) {
+    let geoJSON = site.gisId;
+    geoJSON += area ? '_area.geojson' : '.geojson';
+    const geo = await fetch(`${BASE_URL}geojson/${geoJSON}`)
        .then(res => res.json())
        .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
    
--- a/webgis/js/layer_options.js
+++ b/webgis/js/layer_options.js
@@ -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;
--- a/webgis/js/ui.js
+++ b/webgis/js/ui.js
@@ -100,8 +100,14 @@ UI.openSiteModal = function (data, selector) {
 	let surveys = data.images.filter(i => i.type === 'Survey');
 	let photos = data.images.filter(i => i.type === 'Photo');
 	let videos = data.images.filter(i => i.type === 'Video');
+	let reconstructions = data.images.filter(i => i.type === 'Reconstruction');

-	if (surveys.length === 0 && photos.length === 0 && videos.length === 0) {
+	const noMedia = surveys.length === 0
+		&& photos.length === 0
+		&& reconstructions.length === 0
+		&& videos.length === 0;
+
+	if (noMedia) {
 		images.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
 	}

@@ -114,6 +120,9 @@ UI.openSiteModal = function (data, selector) {
 		siteMedia.siteData = photos[0] ?? undefined;
 		images.innerHTML += photos[0] ? siteMedia.renderPhotos() : '';

+		siteMedia.siteData = reconstructions[0] ?? undefined;
+		images.innerHTML += reconstructions[0] ? siteMedia.renderReconstructions() : '';
+
 		siteMedia.siteData = videos[0] ?? undefined;
 		images.innerHTML += videos[0] ? siteMedia.renderVideos() : '';
 	}
@@ -122,6 +131,7 @@ UI.openSiteModal = function (data, selector) {

 	this.imageGallery('gallery-1', surveys);
 	this.imageGallery('gallery-2', photos);
+	this.imageGallery('gallery-3d', reconstructions);
 	this.imageGallery('gallery-video', videos, true);
 }
 /**